Introduction to Single Page App monitoring

Single page applications (SPAs) are web applications that load a single HTML page. The app dynamically updates without requiring a full page reload, in response to user interactions with the app, such as clicking a button or submitting a request.

New Relic Browser's SPA monitoring provides deeper visibility and actionable insights into real users' experiences with single-page apps. SPA monitoring is also valuable for any app that uses AJAX requests to pull content dynamically and create a fluid user experience.

In addition to monitoring route changes out of the box, you can use New Relic Browser's SPA API to monitor virtually anything that executes inside the browser. This allows developers and their team to:

  • Create faster, more responsive, highly interactive apps.
  • Monitor the throughput and performance that real users are experiencing.
  • Troubleshoot and resolve problems within the context of the page load.
  • Analyze the data with New Relic Insights to assist with business decisions.
  • Bring better apps to the marketplace more quickly.

Access to this feature depends on your subscription level. SPA monitoring is only available with New Relic Browser Pro.

Enable SPA monitoring

Before installing New Relic SPA monitoring, read New Relic's SPA compatibility and requirements. Then, see Add apps to Single Page App monitoring.

Analyze throughput and performance data

Improving on traditional industry standards for measuring page load timing, New Relic gives you a complete picture of the activity, both synchronous and asynchronous, associated with page loads and route changes.

Browser SPA Page views page > (select an app) > Browser app > Page views: Use New Relic Browser's SPA monitoring to examine the throughput and performance of your SPA-architecture app.

SPA data monitored by New Relic Browser can include:

  • Performance data and throughput for page loads and route changes
  • AJAX request data
  • JavaScript activity, both synchronous and asynchronous
  • Dynamic page updates, monitored using the New Relic SPA API

With this data, you will gain a clear understanding of how your users experience your app's page loads and route changes, and be able to solve bottlenecks and troubleshoot errors. For more about how New Relic handles SPA data, see Understand SPA data collection.

Browser SPA features

Here is a summary of SPA monitoring features:

Single-page app monitoring Take advantage of these features
Robust views in New Relic Browser's UI

When a user initiates a page load or route change, New Relic begins to monitor all subsequent JavaScript, and ends the timing once all AJAX events are complete. This provides a more accurate view of when a page is actually ready for a user compared to the traditional method of ending the timing when the window load event is fired.

When SPA monitoring is enabled, the Page views page in New Relic Browser shows event-driven data about application usage levels (throughput) and user experience (performance), including:

  • Charts with drill-down details about initial page load performance, route changes, and historical performance
  • Sort, search, and filter options, including custom attributes
  • Additional AJAX breakdown data for all initial page loads and route changes

For an explanation of how SPA monitoring will impact your existing Browser account's data usage, see SPA and Browser data usage.

Data analysis with Insights New Relic Insights supports three SPA-specific event types: BrowserInteraction, AjaxRequest, and BrowserTiming. You can query these events in Insights to analyze your app's performance and make business decisions.
Customized data from API Use New Relic's SPA API to obtain the specific data you need, such as custom naming, custom timing, finishline API, or other custom attributes.

For more help

Additional documentation resources include:

Recommendations for learning more: