Session traces: Exploring a webpage's life cycle

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
  • What is the sequence of JavaScript and browser events, which take longer than others, and when each event occurs
  • 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.

Requirements

To use New Relic Browser's session traces feature, make sure you meet these requirements:

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
Browser Session traces index
Browser > Browser app > (selected app) > Session traces: You can select a session trace from the index. You can also select a session trace directly from the New Relic Browser Overview, Page views, JS errors, and AJAX pages.

To select a specific session trace:

  1. From the New Relic menu bar, select Browser > Browser app > (selected app) > Session traces.
  2. To locate a session trace from a different date or time period, use the time picker.
  3. To limit the index to a specific type of trace, use the search window.
  4. To view detailed information, select the session trace's link.

You can also select a session trace directly from the Browser Overview, Page views, JS errors and AJAX pages.

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 use 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.

New Relic Browser Session Traces details
Browser > Browser app > (selected app) > Session traces > (selected trace): Use New Relic Browser's session trace details to examine events and identify problems during the end user's webpage session.

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.

Slow JavaScript execution and repainting

Session traces help you identify callbacks in your JavaScript code which execute slowly, blocking 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, a speed which seems sluggish to humans.

For more help

Discuss Browser monitoring in the New Relic Online Technical Community! Troubleshoot and ask questions, or discuss JavaScript error reporting or AJAX timing in detail.

If you need additional help, get support at support.newrelic.com.