Configure SPA2 Monitoring

SPA2 Requirements

  • JavaScript Agent >= 4.4.3

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

  • Enable SPA2 monitoring

  • IE 10 and Edge are supported. IE >= 10 and Edge cannot be in compatibility mode with IE <= 9 browsers.

  • For non-AngularJS frameworks, the JavaScript Agent >= 4.2 is required.

  • Angular support:

    • Angular 12 SPAs are supported by JavaScript Agent >= 21.12.0.
    • Angular 10-11 SPAs are supported by JavaScript Agent >= 21.7.0.
    • Angular 6-9 SPAs are supported by JavaScript Agent version >= 4.5.16.
  • Vue framework is supported by JavaScript Agent >= 24.5.0.
Note: To manually report and name virtual pages with the JavaScript Agent API, you will need to use the JavaScript Agent >= 4.5. The JavaScript Agent >= 4.4.3 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.

Note: Make sure you set the configuration, including enabling SPA2 monitoring, before you load the JavaScript Agent.
JSON 
<script charset='UTF-8'>
    window['adrum-start-time'] = new Date().getTime();
    (function(config){
        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>
<script src='//cdn.appdynamics.com/adrum/adrum-latest.js' type='text/javascript' charset='UTF-8'></script>

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.

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-9 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:
    CODE 
    config.fetch = false
  2. Load the JavaScript Agent before Angular (recommended, but not required).
    CODE 
    <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.
    >=Version 4.5.15
    CODE 
    function(config) {
...
config.isZonePromise = true;
...
})(window['adrum-config'] || (window['adrum-config'] = {}));
    <=Version 4.5.14
    CODE 
    function(config) {
...
config.angular = true;
...
})(window['adrum-config'] || (window['adrum-config'] = {}));