Today marks a special and proud day at New Relic. Adoption of single-page application architectures is skyrocketing, creating a need for new monitoring solutions. More than just a handful of frameworks, the single-page application (SPA) concept allows developers to create faster, more responsive, and more interactive applications. As great as SPAs are, however, they pose a significant challenge to Real User Monitoring (RUM)—a challenge met by today’s launch of our public beta of SPA monitoring in New Relic Browser.

SPA wreaks havoc with RUM

Traditional RUM solutions monitor page views, which are defined by the industry as server-side page loads. With an SPA, server-side page loads are minimized in favor of dynamically updating the page with JavaScript and AJAX requests. Where a traditional web application will record a page view for each and every new screen presented, a SPA may have just a single page view while the rest of the screen views are experienced via JavaScript and XHRs. In some cases, as many as 90% of new screen views may be presented without a server-side page load. And the problem doesn’t end there.

The use of SPA concepts means that page-load performance timings don’t always match the user’s experience. Traditional RUM says a page view is done when the window load event fires in the browser. With SPA architecture, the application typically waits on AJAX with JavaScript execution still to come when the window load event fires. Users may experience a long wait time for the page to be ready, even when RUM page view timing says it was lightning fast.

The result of this misalignment between traditional RUM and SPAs is a lack of visibility into the majority of the user experience, and sometimes the little data you do have can be misleading.

How New Relic addresses the SPA challenge

Today, New Relic fills that gap. We are happy to announce the public beta of single-page application monitoring in New Relic Browser. Our low-level, framework-agnostic instrumentation is designed to monitor SPA initial page loads and route changes out of the box, so that developers can monitor any client-side interaction with a new SPA-inspired API.

That means any framework—AngularJS, React, Ember, Backbone.js, etc.—out of the box, no custom instrumentation required. (While frameworks like Angular and Backbone aren’t required to build an SPA, they do supercharge JavaScript and help developers bring better applications to market faster. If you are reading this, there is a good chance your company uses Angular, React, or similar frameworks and libraries somewhere in the organization.) Even if you’re using your own custom or in-house SPA framework, we’ve got you covered. Our instrumentation is designed to capture the low-level JavaScript timings, regardless of the framework, to give you this visibility with no additional work.

In New Relic Browser, SPAs are now a first-class concept. We now treat route changes with just as much importance as page loads. From the first time you experience the new SPA Views UI, you’ll see what I mean. Route changes live alongside Initial Page Loads. And we don’t stop with just simple timings. For route changes, we separate the JavaScript execution from the time waiting on AJAX. For Initial Page Loads, we surface backend time, frontend time, and the point in time when the Window Load Event fires in the browser, the old way of saying a page is done. For both Route Changes and Initial Page Loads, we also break out the components that contributed to the user experience, namely AJAX. You’ll see which AJAX requests were involved in a route change or initial page load, how often that AJAX is executed, how long JavaScript executed for, and how long the application waited for a response.

SPA UI screenshot

[click to enlarge]

In New Relic Browser, route changes are defined by a set of criteria we designed to determine when a developer intends to present an entirely new view to the end user. You may want to monitor more than that, however, and we’ve provided an API to let you do so. With the New Relic Browser SPA API, you can monitor virtually anything that executes in the browser. Any user interaction, from the refresh of a single widget on a page to the auto-suggest in a search box … we can monitor it with the same level of detail and automatic capture of AJAX requests and other components as you’ll find in our out-of-the-box initial page load and route change monitoring.

SPA UI screenshot

Finally, we also address the Initial Page Load time issue. Saying a page was done when the Window Load Event fires no longer matches the user experience in many applications, where widgets, components, image spinners, and videos are often still loading long after the Window Load Event. So our new SPA-style monitoring goes beyond the Window Load event to include AJAX response time, reporting page load performance as the time when the view is complete, not just when the window load event fires.

SPA UI screenshot

Analytics-first, analytics-only in New Relic Insights

Finally, all of this data is available immediately in New Relic Insights. SPA monitoring with New Relic Browser is an analytics-first, analytics-only experience. We drive the New Relic Browser UI from Insights events, and we offer those same events for you to explore at your leisure with NRQL (New Relic Query Language). New Relic Browser Pro subscribers who have opted in to SPA monitoring can get up to eight days of historical data in Insights for free and can see the BrowserInteraction and AjaxRequest event types. New Relic Insights Pro subscribers can to see longer periods of time—matching their subscription level—revealing longer-term trends and allowing period-over-period comparisons, just like you are used to with the PageView event type.

Private beta customers are already finding value in the new feature. John Swindell, vice president of operations at Bionic Advertising Systems, explains the importance of tracking single-page applications:

“Bionic’s platform enables marketers to build dynamic, multi-channel digital media plans for their customers. The use of single-page applications allows us to deliver a seamless workflow for our customers, but were a black box for us in being able to pinpoint performance issues. New Relic Browser’s support for single-page applications is key to what we’re doing at Bionic and implementing it within our application was very easy. We now have insight into the performance of route changes in the application allowing us to optimize and ultimately create the best end-user experience.”

So, have we piqued your interest? Are you ready to monitor 100% of user interactions in your SPA, rather than just the 10% that traditional RUM monitoring covers?

Starting today, New Relic Browser Pro subscribers can opt into our SPA monitoring public beta, and we are working feverishly towards general availability later this summer. To get started, head on over to New Relic Browser, navigate into an application, and look for the “SPA Views” tab in the left nav. From there, you’ll be asked to accept the beta terms. Customers who instrument RUM via their language agent will be upgraded automatically, while copy/paste customers will be presented with a new JavaScript snippet for inclusion in the application.

SPA monitoring has been tested for months

When you opt into SPA monitoring with New Relic Browser, you won’t be alone. More than 40 customers around the world have been using the features in private beta for the past 5 months. These customers use a variety of frameworks and libraries, including Angular 1/2, React, Backbone, Ember, custom SPAs, and more. And they have benefited from our framework-agnostic approach, which offers deeper visibility without having to worry about compatibility. Just as important, even if tomorrow’s framework du jour is different than today’s, you won’t have to worry: New Relic will still have you covered!

While you enjoy these new features, know that we aren’t stopping here. SPA-style monitoring is in our DNA and we are moving beyond the page view, and beyond the SPA Views feature. In the coming months you can expect enhancements like SPA alerting, route-change context on JavaScript errors, route changes in Session Traces, and a revamped Overviews page with SPA interactions front and center.

To get started, fire up New Relic Browser or ask your account team for a Browser Pro Trial so you can experience it for yourself. Or to learn more, check out our documentation:

Enjoy!

 

Forward-Looking Statements

This post contains “forward-looking” statements, as that term is defined under the federal securities laws, including but not limited to future enhancements and benefits therefrom, the benefits of our new features to our customers resulting from SPA alerting and any features or benefits related thereto, and the timing and availability of such features. The achievement or success of the matters covered by such forward-looking statements are based on New Relic’s current assumptions, expectations, and beliefs and are subject to substantial risks, uncertainties, assumptions, and changes in circumstances that may cause New Relic’s actual results, performance, or achievements to differ materially from those expressed or implied in any forward-looking statement. Further information on factors that could affect New Relic’s financial and other results and the forward-looking statements in this blog post is included in the filings New Relic makes with the SEC from time to time, including in New Relic’s most recent Form 10-K, particularly under the captions “Risk Factors” and “Management’s Discussion and Analysis of Financial Condition and Results of Operations.” Copies of these documents may be obtained by visiting New Relic’s Investor Relations website at http://ir.newrelic.com or the SEC’s website at www.sec.gov. New Relic assumes no obligation and does not intend to update these forward-looking statements, except as required by law.

Jeff Martens is a Portland-based Product Manager, leading the New Relic Browser offering. Prior to his role on the New Relic Browser team, he served as a Product Manager for New Relic Insights. View posts by .

Interested in writing for New Relic Blog? Send us a pitch!