Our browser monitoring Session traces UI provides a detailed timeline of the load and interaction events during a webpage's full life cycle, for as long as ten minutes. After you select the session URL or session trace ID, you can use the detailed waterfall visualization and heat map overview to examine metrics and identify problems related to:
- Page load timing
- Individual asset loads
- User interactions
- AJAX requests
- Callbacks
- Errors and other events during the session
Identify problems and solutions
Go to one.newrelic.com > Browser > (select an app) > Session traces: Here is an example of some of the wealth of information you can explore in a session trace.
Session traces help you understand:
Issues | Use session trace data to do this.. |
|---|---|
Backend problems | See how long it takes from when the request begins to when backend activity finishes and the DOM loading process begins. |
Page load timing issues | Explore data that helps you answer questions such as:
|
Core Web Vitals | Look at the timing segments for first input delay and largest contentful paint to identify performance issues affecting your Core Web Vitals scores. |
JavaScript events | Examine the sequence of JavaScript and browser events to understand:
|
Errors | Sort or filter the errors to see what patterns emerge. For example, you can check whether errors increase based on:
|
By connecting performance to user experience and interactions to performance, the ability to see all events in the user's session can help you pinpoint problem areas and identify solutions. You can also create a permalink to share this information with others.
Get started
To use our session traces feature, make sure that you are using the Pro or Pro+SPA agent type for browser monitoring. If you're using multiple names for an app, session traces will only report to the most specific application.
Browser monitoring randomly captures traces only from browsers that support the Resource Timing API. Session traces are randomly sampled and stored at a rate of 90/hour. You can page through up to 500 traces at a time.
Select a session trace
one.newrelic.com > Browser > (select an app) > Session traces: Search by URL or session trace ID, or sort any column, then click the link to use the interactive session trace details.
To select a specific session trace:
- Go to one.newrelic.com > Browser > (select a browser app) > Session traces.
- To limit the index to a specific URL or session trace ID, use the search window.
- To look for other patterns, change the sort order on any column.
- Click the session trace link, then use the details page to drill down into detailed information.
For deeper analysis, you can also query attributes such as session, sessionTraceId, largestContentfulPaint, etc. For more information, see our documentation about browser monitoring event data as well as our data dictionary.
Session segment definitions
For apps that have been deployed using the copy/paste method in New Relic, browser monitoring includes web app and queue time in Network time as part of the page load timing process. This is because browser monitoring relies on the server-side agent to pass the application values to the browser agent through auto-injection.
You can view detailed information about how this backend time breaks down from the browser's point of view. The session traces report on all the network related events available, so you can see on a case-by-case basis how the browser spends time on DNS lookups and other network events.
Measurements for each segment indicate how long into a session that the segment ended. For example, if Page load is 6.9s, this means the page load event completed 6.9 seconds after the request began.
The following table describes each segment of the session trace, with a link to the data dictionary for more details about these attributes.
Session segment | Description |
|---|---|
The time from when the request began to when backend activity finished and DOM loading began. | |
The time from when the request began to when DOM processing finished. | |
The time from when the request began to when the page load event fired. | |
The time from when the request began to when AJAX activity ended. | |
The time from when the request began to when the first user activity was recorded, such as a mouse click or a scroll. | |
Core Web Vitals: The time from when the request began to when the first browser response to user input was recorded. | |
Core Web Vitals: The render time of the largest content element that is visible in the viewport. | |
The total duration of the session. |
Slow JavaScript execution and repainting
Session traces help you identify callbacks in your JavaScript code that execute slowly and block the execution of subsequent calls on the browser's main thread. These calls should execute quickly in order to allow the browser to quickly repaint the page in response to user actions.
Session traces highlight any callbacks longer than 33ms. If called in rapid succession (such as inside a requestAnimationFrame loop), callbacks longer than 33ms reduce the frame rate below 30 frames per second. This speed seems sluggish to users.