New Relic Browser's session traces provide a detailed timeline of the load and interaction events during a webpage's full life cycle, for as long as ten minutes. Page load timing, individual asset loads, user interactions, AJAX requests, callbacks, errors, and other events appear in an interactive timeline which includes a detailed waterfall visualization, a heat map overview, and highlighted metrics and problems related to that session.
Access to this feature depends on your subscription level.
Identify problems and solutions
Session traces help you understand:
- How users experience your page load, including time to DOM load, time waiting for AJAX requests to complete, and the user's interactions with the page
- How the New Relic metrics reflect your end users' experiences
- Where bottlenecks occur, and what may be causing them
- Why one page load may be slower than others, by providing the context for individual events during a session
By connecting performance to user experience and interactions to performance, this detailed and intuitive visualization of all events in the user's session can help pinpoint problem areas and easily identify solutions.
To use New Relic Browser's session traces feature, make sure you meet these requirements:
- Your New Relic agent version must support New Relic Browser.
- If you're using multiple names for an app, session traces will only report to the most specific application.
- For accounts older than October 2014, you must enable New Relic Browser and the enhanced Pro features.
New Relic Browser randomly captures traces only from browsers that support the Resource Timing API.
Select a session trace
The Session traces index lists up to 20 of the most recent traces for the selected app, including:
- Full URL, with query string parameters removed
- Browser type
- Started at date or time
- Page load time
To select a specific session trace:
- Go to rpm.newrelic.com/browser > (select an app) > Session traces.
- To locate a session trace from a different date or time period, use the time picker.
- To limit the index to a specific type of trace, use the search window.
- To view detailed information, select the session trace's link.
View session trace details
The Session trace details page provides summary information about the trace, a heat map with timing details, and a waterfall of events that you can explore. The color-coded legend identifies the page load events during the webpage's life cycle.
For apps that have been deployed using the copy/paste method, New Relic Browser includes web app and queue time in Network time as part of the page load timing process. This is because New Relic Browser 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 "back end" 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.
To navigate through a session trace, explore the waterfall chart by scrolling vertically through the event stack, or select individual events to view their details.
|If you want to...||Do this...|
|View the web page for this session trace||Select the trace link.|
|Jump to a specific time||Select the time indicator or event on the heat map.|
|View details about individual events||Select any event in the waterfall chart. From there, select View full details if applicable.|
|Change the location on the session trace||Click on the heat map, or scroll vertically through the waterfall chart.|
|Zoom in or out of the overall trace||Select the plus fa-plus or minus fa-minus icons below the heat map.|
|Share the session trace information||Create a permalink to paste into a form, ticket, email, etc.|
Session segment definitions
Important session trace measurements are displayed in the upper right corner of the Session traces page. The first four measurements represent how long into a session that the segment ended. For example, if
Page Load is
1.111s, that means that the page load event completed 1.111 seconds after the request began.
|Backend||The time from when the request began to when backend activity finished and DOM loading began.|
|DOM processing||The time from when the request began to when DOM processing finished.|
|Page load||The time from when the request began to when the page load event fired.|
|Waiting on AJAX||The time from when the request began to when AJAX activity ended.|
|First interaction||The time from when the request began to when the first user activity, like a mouse click or a scroll, was recorded.|
|Duration||The total duration of the session.|
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, a speed which seems sluggish to humans.