Configure Real User Monitoring to capture XHR actions

Modern web applications don't rely on page loads to change the UI following a user interaction. Each user interaction instead triggers one or multiple XHR requests to get the necessary data, changing only parts of the UI. When activating XHR-action support, you add visibility into each kind of user interaction, besides just the regular page loads that are captured by default. Specifically, in Single-Page Application environments that are built on top of AngularJS, React, or other JavaScript frameworks, this option extends the visibility significantly.

Which JavaScript frameworks does Dynatrace support?

As there are a lot of different JavaScript frameworks out there, we focus our support on the most popular frameworks. This doesn't mean however 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; all other frameworks are supported through the general settings of Support for XmlHttpRequest (XHR) and Capture fetch() requests (if your framework uses the Fetch API). The general settings cover popular frameworks like React, Ember.js, Google Web Toolkit and vanilla JavaScript implementations. The reason that Dynatrace lists some frameworks specifically relates to the input capture of user action names, like Click on ‘Search’. To figure out the “Search” caption from the example and the corresponding XHR-request, Dynatrace requires special support for frameworks like AngularJS, JQuery, Dojo, ExtJS, Sencha Touch, Backbone.js, MooTools, and Prototype.

How to configure Real User Monitoring for XHR (AJAX) actions

To activate support for specific JavaScript frameworks

  1. Select Applications from the navigation menu.
  2. Select the application you're interested in to access the application's overview page.
  3. Click the Browse () button in the upper right corner and choose Edit to access the settings for the specific application.
  4. Select Async requests and single page app.
  5. Activate the suitable options, based on your environment. Do not activate all of them, as this will have a negative impact on the Dynatrace JavaScript tag size and ultimately on the performance of your web application.
    • Select Capture fetch() requests to capture user actions data for requests that are based on the Fetch API.
    • Select Support for XmlHttpRequest if your application uses a framework that isn't explicitly supported. This setting uses a generic approach to capture XHR (AJAX) calls. Enabling this setting means that any interaction that leads to an XmlHttpRequest call will result in an XHR action.
    • Select the special JavaScript framework relevant for your web application: Angular, Dojo, EXTJS, Sencha Touch, ICEfaces, jQuery, Backbone.js MooTools, Prototype, and ActiveXObject detection.

Enable the timed action support setting

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 in situations where an application doesn't trigger XHR (AJAX) calls directly in event handlers of HTML elements but rather defers them via SetTimeout calls.

  1. Select Applications from the navigation menu.
  2. Select the application you're interested in.
  3. From the application's overview page, select the browse () button in the upper-right corner and choose Edit to access the settings for the application.
  4. Select Content capture.
  5. Enable the Timed action support option.

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

There are two ways to go about this restriction:

Use withCredentials property

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

Usex-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 among the 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 will fail 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

Caution

Only allow cross-origin XHR calls if you acknowledge the following:

  • monitoring cross-origin XHR calls is optional
  • you understand all steps required to correctly enable 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 cross-origin XHR calls in a test environment first
  1. Acknowledge the cautions detailed above.
  2. Configure your endpoint on the other origin to return the CORS header Access-Control-Allow-Headers, 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. Select Applications from the navigation menu.
  5. Select the application you're interested in.
  6. On the application's overview page, select the Browse () button in the upper-right corner and choose Edit to access the settings for the application.
  7. Select Capturing > Advanced setup tab.
  8. In the Enable Real User Monitoring for cross-origin XHR calls section, specify a regular expression that matches the URLs that should be excluded from becoming XHR actions.

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. You can exclude such visits to your web site from the local network by adding a network mask for your local network to the list of excluded addresses.

To exclude XHR calls from monitoring

  1. Select Applications from the navigation menu.
  2. Select the application you're interested in.
  3. From the application's overview page, select the browse () button in the upper-right corner and choose Edit to access the settings for the application.
  4. Select Capturing > Advanced setup
  5. In the Exclude XHR requests from monitoring section, specify a regular expression that matches the URLs that should be excluded from becoming XHR actions.

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