For SPA2, you only need to set a flag to enable the JavaScript Agent to auto-instrument SPAs. When SPA2 auto-instrumentation is enabled, the JavaScript Agent will do the following:

  • detect virtual pages

  • measure the end-to-end time for virtual pages

  • correlate resources, JavaScript errors, and Ajax requests

  • name virtual pages

SPA2 Requirements

  • JavaScript Agent 4.4.3+

  • Controller / EUM Server 4.4.3+ (for on-premises deployments)

  • Enable SPA2 monitoring

  • IE 10 and Edge is supported. IE 10+ and Edge cannot be in compatibility mode with IE 9 or older browsers. 
  • For non-AngularJS frameworks, the JavaScript Agent version 4.2 or later is required.

Angular 6-8 SPAs are supported by JavaScript Agent version 4.5.16+. To manually report and name virtual pages with the JavaScript Agent API, you will need to use the JavaScript Agent 4.5+. The 4.4.3+ JavaScript Agent does not support the use of the JavaScript Agent API to manually report events.

Enable/Disable SPA2 Monitoring

In the JavaScript Agent configuration, set spa2 to true and then inject the JavaScript Agent as shown below. You can use either manual or automatic injection. The default value for spa2 is false, so to enable SPA2 monitoring, you must set spa2 to true

<script charset='UTF-8'>
    window['adrum-start-time'] = new Date().getTime();
        config.appKey = '<EUM_APP_KEY>';
        config.adrumExtUrlHttp = '';
        config.adrumExtUrlHttps = '';
        config.beaconUrlHttp = '';
        config.beaconUrlHttps = '';
        config.xd = {enable : false}; = {
            "spa2": true 
    })(window['adrum-config'] || (window['adrum-config'] = {}));
<script src='//' type='text/javascript' charset='UTF-8'></script>

You must set the configuration, including the setting to enable SPA2 monitoring, before you load the JavaScript Agent.

Disable SPA2 Monitoring

To disable SPA2 auto-instrumentation, just set spa2 to false. Although the default value for spa2 is false, you are recommended to set the configuration to false and not just remove it.

Migrate from SPA1 to SPA2 Monitoring

To migration from SPA1 to SPA2 monitoring:

  1. Read SPA1 and SPA2 Monitoring to confirm that your use case is suitable for SPA2.
  2. Meet the SPA2 requirements.
  3. Enable SPA2 monitoring.

SPA2 Monitoring Compatibility

When you configure the JavaScript Agent to use SPA2 auto-instrumentation, the following happens:

  • Metrics such as DOM ready, # of digests, etc., are no longer measured and reported for virtual pages.

Fetch API Support for SPA2 Monitoring

The JavaScript Agent monitors Fetch API calls by default for all SPAs except for Angular applications. 

For Angular.js and Angular 2-8 applications, follow these steps to ensure Fetch API calls are monitored. 

  1. The JavaScript Agent is configured to monitor Fetch API calls by default. Make sure that your JavaScript Agent configuration doesn't have the following:

    config.fetch = false
  2. Load the JavaScript Agent before Angular (recommended, but not required). 

    <script src="adrum.js"></script>
    <script src="angular.js"></script>
  3. Add the following configuration to ensure the JavaScript Agent monitors the Angular application correctly.

    function(config) { 
       config.isZonePromise = true; 
    })(window['adrum-config'] || (window['adrum-config'] = {}));
    function(config) { 
       config.angular = true; 
    })(window['adrum-config'] || (window['adrum-config'] = {}));

How SPA2 Monitoring Works

The diagram below demonstrates how the JavaScript Agent defines the start and end points for the End User Response Time (EURT) metric and correlates with Ajax requests, resources, and JavaScript errors.

StepBrowser ActivityJavaScript Agent Actions

The user navigates to the base page of a SPA. The HTML skeleton, core CSS, and JavaScript are loaded into the browser. 

The JavaScript Agent sends a beacon for the base page.

From the base page, the user clicks a button to view products. The URL changes as the virtual page is loaded through a combination of previously downloaded content and from new content fetched through Ajax requests.

The JavaScript marks the user action as the start time of the virtual page.

User actions and the browser activity cease for five seconds. The browser activity includes requesting resources, making Ajax calls, and so on.

The JavaScript Agent or your code using the JavaScript API marks the end time of the virtual page as the last time browser activity was seen after the URL changed. The JavaScript Agent then sends a beacon for the virtual page; however, if the virtual-page load stalls on one slow activity, the JavaScript Agent waits eight seconds before marking the end of the virtual page.

Any activities such as Ajax requests, resource loads, and JavaScript errors that happened during the virtual page load will be correlated to that virtual page.

There are some kinds of browser activities that aren't accessible to JavaScript. For example, the time that the browser takes render the DOM to the screen after the DOM has been updated. Therefore, if your virtual pages don’t request any resources, you will likely see a very fast EURT (<10ms).

SPA2 Metrics

Browser RUM calculates metrics differently for base pages, Ajax requests, and virtual pages. The diagrams below demonstrate the differences between base page and virtual page metrics from the end-user perspective. See Browser RUM Metrics for metric definitions.

For base pages, Browser RUM calculates End User Response Time (EURT), Visually Complete Time (VCT), and Page Complete Time (PCT). For virtual pages, Browser RUM calculates EURT and VCT.

End User Response Time

End User Response Time (EURT) calculates the total time for all content (visual and non-visual) to be loaded on a page. 

Visually Complete Time

Visually Complete Time (VCT) calculates the point in time when the browser has finished loading all visual content in the viewport.

Page Complete Time

Page Complete Time (PCT) is a SPA2 metric for base pages only. PCT calculates the point in time when the browser has finished loading all visual content on the page, regardless of whether the content is in or outside the viewport.

Configure Virtual Page Monitoring

The property maxInactiveTime tracks when activities like networking and DOM changes stop. Though maxInactiveTime is not directly included in metrics like EURT, for example, maxInactiveTime confirms the EURT stop time. For larger pages, you may want to increase the maxInactiveTime to accurately track when all page activity is complete. The default maxInactiveTime is set to 8 seconds. 

In this example, the maxInactiveTime is increased to 10 seconds.

   config.navComplete = {
                maxInactiveTime: 10000
})(window['adrum-config'] || (window['adrum-config'] = {}));