View SPA data in New Relic Browser UI

Access to this feature depends on your subscription level.

If you have opted in to New Relic SPA (single-page app) monitoring, the Browser Page views page will include data on SPA route changes and initial page loads.

Browser SPA Page views page
rpm.newrelic.com/browser > (select an app) > Page views: When you opt in to SPA monitoring, the Browser Page views page will display SPA data like route changes and associated asynchronous browser activity.

Single-page app (SPA) data

To view SPA data: from the New Relic menu bar, select rpm.newrelic.com/browser > (select an app) > Page views from the left-hand navigation.

Initial page loads and route changes are automatically grouped by Browser Interaction Name (which can be adjusted using the whitelist segment system). If you have set custom route names via the SPA API, the custom route names will be displayed. You can change how the page loads and route changes are grouped by using the Group page by dropdown.

By default, the list of page loads and route changes displays the most time consuming views at the top of the list. You can also sort by average response time, median response time, and throughput per minute by using the Sort by dropdown.

To search for specific views by grouped URL, type in the search bar below the Sort by dropdown. For example, to find URLs that represent your checkout page, search for checkout.

The charts on the initial Page view page display:

  • The five views with the slowest average response times
  • The five views with the highest throughput

To change the range of time being examined, use the Time Picker near the top of the page. (If you choose a time range more than 8 days in the past, some filtering and grouping functionality won't be available.)

Filter SPA views

Browser SPA Page views page filter
rpm.newrelic.com/browser > (select an app) > Page views > Filter: Use the Filter to filter for route changes, initial page loads, and other attributes like location and browser type.

To view only initial page loads or only route changes, use the Filter dropdown, to the right of the Time Picker. For example, to view only route changes, select Filter then select Route change.

The Filter also gives you the ability to filter by other attributes of page loads and route changes, such as the app name, the geographical location of the browser, and the browser type. For example, to see only page loads and route changes that occurred on browsers in the city of Portland, Oregon, you'd select Filter, select City from the dropdown, and then select Portland.

Group SPA views

You can use the Group page by dropdown to group the list of page views by any attribute. For example, if you wanted to compare the average response times by browser type, you'd select Group page by and then select userAgent from the dropdown options.

The combination of filtering and grouping lets you quickly find very specific data. For example, let's say you want to compare how a specific URL is loading on different browsers:

  1. From the Filter dropdown, choose targetURL, then select the URL you want to study.
  2. From the Group page by dropdown, select userAgent.

SPA view details

Browser SPA Page views details
rpm.newrelic.com/browser > (select an app) > Page views > (select a view): Select a view from the list to see assorted details and breakdowns.

Select an individual page load or route change to see details. Selecting either will provide a breakdown of where time was spent for a browser interaction, and display that data over a time series matching the window selected in the Time Picker.

Every route change view can theoretically also be an initial page load. (For example, when a route change URL is sent to someone else and they load it, that will now be considered an initial page load to New Relic.) For this reason, the SPA view details page has charts for both initial page loads and route changes. This allows you to compare how a view performs as an initial page load to how its performance as a route change.

There are three chart display options, selectable with the icons to the right of the Avg initial page load time chart title. The default display is the color-coded stacked area chart. You can also switch to a Histogram display or a percentile line graph.

At the bottom of the details page is a Throughput chart that combines initial page loads and route changes.

Here are details on the specific performance data displayed for both page loads and route changes:

Initial page load performance details

For initial page loads, the performance details include the average back end time, front end time, and the window onload event:

  • Back end time includes network, web app time, and request queuing.
  • Front end time includes DOM processing, page rendering, and the time to complete all XHRs.
  • A horizontal red line represents when the window load event is fired. This corresponds to the traditional page load timing measured by New Relic Browser without SPA monitoring enabled. With SPA monitoring it is common to have a window load event before the front end time is complete. (For more about how SPA page load timing differs from traditional page load timing, see Understand SPA data collection.)
Route change performance details

For route changes, the performance chart displays JS duration and waiting time.

  • JS Duration is the sum of all JavaScript execution time during the interaction, which is synchronous by definition.
  • The remaining time is called Waiting time and is derived by subtracting JS duration from the total duration.

The Historical Performance and Breakdown details are similar for both page loads and route changes:

Detail tab Comments
Historical data The Historical Performance tab displays throughput (views per minute) and response time charted against the same time period yesterday and last week.
Breakdowns The Breakdowns tab lists the various components individually timed as part of an interaction. By default, all XHRs are captured and timed. You can also use the SPA API to include additional elements for a route change or page load.

For more help

Additional documentation resources include:

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.