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 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 Content capture.
  5. Enable the Timed action support option.

Exclude specific XHR requests from monitoring

You can exclude specific XHR requests from monitoring, for example, if your application sends frequent status-based XHR requests 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 requests from monitoring

  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 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.