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 you're interested in.

  3. On the application overview page, select Browse () > 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.

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 you're interested in.
  3. On the application overview page, select Browse () > 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 you're interested in.
  3. On the application overview page, select Browse () > Edit.
  4. From the application settings, go to Capturing > Content capture.
  5. Enable Timed action support.

When your application fetches resources from another origin during a user action, Dynatrace can't link your XHR user actions to the corresponding PurePaths. This happens due to the same-origin policy, which restricts how your page interacts with resources from another origin.

There are two ways to get around this restriction:

  • Use the withCredentials property
  • Use the x-dtc header

Use withCredentials property

If the two domains involved allow the specification of a common cookie domain, add the cookies necessary for RUM correlation using the withCredentials property. For more information, see Monitor CORS requests.

Use x-dtc header

When you explicitly allow cross-origin XHR calls, Dynatrace automatically adds a custom HTTP header, x-dtc, that includes a reference to the respective endpoints for each such call. This reference enables Dynatrace RUM to correlate the initial user action, the cross-origin XHR call, and the endpoint's processing activities in a single PurePath.

As a result, such cross-origin XHR calls are visible in the waterfall chart and top web requests.

To monitor cross-origin XHR calls

  1. Configure your endpoint on the different origin to accept the custom x-dtc header (CORS). Otherwise, the request fails and your application may break.
  2. Add the cross-origin XHR call you want to monitor in your application settings.

To add cross-origin XHR calls in your application settings

Caution

If not configured correctly, cross-origin XHR calls can break your web application.

Do not enable monitoring of cross-origin XHR calls unless you acknowledge the following:

  • Monitoring cross-origin XHR calls is optional.
  • You understand all the steps required to correctly enable monitoring of cross-origin XHR calls for your endpoints.
  • If not configured correctly, your web application may break.
  • You fully accept that Dynatrace is neither responsible nor liable for any malfunctioning of your application caused by any misconfiguration.
  • You should always enable monitoring of cross-origin XHR calls in a test environment first.
  1. Acknowledge the caution above.
  2. Configure your endpoint on the other origin to return the Access-Control-Allow-Headers CORS header, including the x-dtc value, in its response.
  3. Confirm that the endpoint on the other origin accepts this Access-Control-Allow-Headers: x-dtc header, as Dynatrace can't validate the correctness on your endpoint automatically.
  4. In the Dynatrace menu, go to Web.
  5. Select the application you're interested in.
  6. On the application overview page, select Browse () > Edit.
  7. From the application settings, go to Capturing > Advanced setup.
  8. Under Enable Real User Monitoring for cross-origin XHR calls, specify a regular expression that matches the XHR calls.

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 you're interested in.
  3. On the application overview page, select Browse () > Edit.
  4. From the application settings, go to Capturing > Advanced setup.
  5. Under Exclude XHR requests from monitoring, specify a regular expression that matches the URLs that should be excluded.

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