On this page:

Related pages:

Your Rating:
19 rates

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

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 = 'http://cdn.appdynamics.com';
        config.adrumExtUrlHttps = 'https://cdn.appdynamics.com';
        config.beaconUrlHttp = 'http://col.eum-appdynamics.com';
        config.beaconUrlHttps = 'https://col.eum-appdynamics.com';
        config.xd = {enable : false};
        config.spa = {
            "spa2": true 
    })(window['adrum-config'] || (window['adrum-config'] = {}));
<script src='//cdn.appdynamics.com/adrum/adrum-latest.js' 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 Which SPA Monitoring to Use? to confirm that your use case is suitable for SPA2.
  2. Meet the SPA2 requirements.
  3. Enable SPA2 monitoring.

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-5 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.angular = true; 
    })(window['adrum-config'] || (window['adrum-config'] = {}));

How the End User Response Time Is Calculated

The following page describes how the End User Response Time (EURT) is measured for virtual pages. Browser Monitoring calculates the EURT differently for base pages, Ajax requests, and virtual pages. While Browser RUM provides different metrics for base pages and Ajax requests, virtual pages only have the EURT metric.

The diagram below shows the browser and JavaScript Agent activity in parallel to demonstrate how the JavaScript Agent defines the start and end points for the EURT as well as correlates 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, etc.

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 Monitoring Compatability

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

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

  • No labels