Configure Real User Monitoring to capture XHR actions

Modern web applications don't rely on page loads to change the UI after user input. Instead, each user interaction triggers one or more XHR requests to get the necessary data, thus changing only parts of the UI. When you activate XHR-action support, you add visibility into each kind of user interaction, not just the regular page loads that are captured by default. This option significantly extends visibility in single-page application (SPA) environments built on top of AngularJS, React, or other JavaScript frameworks.

Supported JavaScript frameworks

As there are so many different JavaScript frameworks out there, we focus our support on the most popular of them, but that doesn't mean that you don't get XHR actions for frameworks that aren't listed on the configuration pages. For those that are listed, Dynatrace offers special support, while the general settings cover all other popular frameworks such as React, Ember.js, Google Web Toolkit, and Vanilla JavaScript implementations.

The reason Dynatrace lists some frameworks specifically relates to the input capture of user action names, such as Click on ‘Search’. To determine the "Search" caption from the example and the corresponding XHR-request, Dynatrace requires special support for frameworks like AngularJS, jQuery, Dojo, Ext JS, Sencha Touch, Backbone.js, MooTools, and Prototype.

Activate support for specific JavaScript frameworks

To enable support for specific JavaScript frameworks

1. In the Dynatrace menu, go to Web.
2. Select the application that you want to configure.
3. In the upper-right corner of the application overview page, select More (…) > Edit.

4. From the application settings, go to Capturing > Async web requests and SPAs.

5. Under JavaScript framework support, select one of the JavaScript frameworks relevant to your web application. For Angular, you may need to enter the package name.

   What is an Angular package name?

   Starting with Angular version 12, you must specify your application's Angular package name in the Dynatrace settings. Otherwise, Real User Monitoring won't work.

   For Angular 12, the package name depends on the project name and is no longer static, while for Angular 11 and earlier, the package name is always webpackjsonp.

   To find the Angular package name for your application

   1. Open your browser's developer tools, and go to the Console tab.

   2. Start entering webpackChunk. The browser should display the package name for your Angular application. Copy that name.
      For example, the package name on the screenshot below is webpackChunklite.

      

      If you see multiple webpackChunk entries in the console, choose the one that matches your application's name. Also, try disabling your browser extensions to get a cleaner list. If there are no webpackChunk entries in the console, you're probably using Angular version 11 or earlier. In this case, you do not need to specify the Angular package name.

   3. Paste the name copied in step 2 to the Angular package name field in your application settings.

Activate generic JavaScript frameworks support

If your application uses a JavaScript framework that Dynatrace doesn't explicitly support, you can enable generic support for XHR and fetch() web requests.

1. In the Dynatrace menu, go to Web.
2. Select the application that you want to configure.
3. In the upper-right corner of the application overview page, select More (…) > Edit.

4. From the application settings, go to Capturing > Async web requests and SPAs.
5. Under Generic support, turn on the required options:
   • Enable Capture fetch() requests to capture user actions data for requests based on the Fetch API.
   • Enable Capture XmlHttpRequest (XHR) to capture any interaction that leads to an XmlHttpRequest call as an XHR action.

Enable timed action support

Depending on the XHR (AJAX) framework or architecture of your application, you may additionally need to enable the timed action support setting. This setting is necessary when an application doesn't trigger XHR (AJAX) calls directly in event handlers of HTML elements but instead defers them via SetTimeout calls.

1. In the Dynatrace menu, go to Web.
2. Select the application that you want to configure.
3. In the upper-right corner of the application overview page, select More (…) > Edit.

4. From the application settings, go to Capturing > Content capture.

5. Enable Timed action support.

Exclude specific XHR calls from monitoring

You can exclude specific XHR calls from monitoring, for example, if your application sends frequent status-based XHR calls that you don't want to see in your user data.

To exclude XHR calls from monitoring

1. In the Dynatrace menu, go to Web.
2. Select the application that you want to configure.
3. In the upper-right corner of the application overview page, select More (…) > Edit.

4. From the application settings, go to Capturing > XHR exclusions.
5. Select Add an XHR exclusion rule, and specify a regular expression that matches the URLs that shouldn't become XHR actions.

   The regular expression for an XHR exclusion rule is executed in the case-insensitive mode. When you check your regular expression at one of the regex tester sites, turn on the Case insensitive match flag.

You can also customize Real User Monitoring using the RUM JavaScript API.

Missing XHR actions when promises are used

When promises are used, Dynatrace does not always create user actions, so you might notice that some XHR actions are missing.

How Dynatrace usually creates user actions:

1. A user interaction with a page—for example, a click, keypress, or scroll event—is registered.
2. If an XHR or fetch request starts during the next 30 milliseconds, a user action is created. If a request starts later than that, a user action is not created.

Using promises, code can be executed asynchronously. When code execution is completed, the original caller is notified and can continue with its own code execution. Unfortunately, it's impossible to determine when code execution will be finished; it may or may not occur within the 30-ms window. For this reason, we recommend that you use the RUM JavaScript API to create actions in such cases.

To check if a user action uses promises

1. Open your browser's developer tools.

2. Perform an action in your web application.

3. Check the initiator of the request.