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
- In the Dynatrace menu, go to Web.
- Select the application that you want to configure.
- In the upper-right corner of the application overview page, select More (…) > Edit.
-
From the application settings, go to Capturing > Async web requests and SPAs.
-
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.
- In the Dynatrace menu, go to Web.
- Select the application that you want to configure.
- In the upper-right corner of the application overview page, select More (…) > Edit.
- From the application settings, go to Capturing > Async web requests and SPAs.
- 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.
- In the Dynatrace menu, go to Web.
- Select the application that you want to configure.
- In the upper-right corner of the application overview page, select More (…) > Edit.
- From the application settings, go to Capturing > Content capture.
- 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
- In the Dynatrace menu, go to Web.
- Select the application that you want to configure.
- In the upper-right corner of the application overview page, select More (…) > Edit.
- From the application settings, go to Capturing > XHR exclusions.
- 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:
- A user interaction with a page—for example, a click, keypress, or scroll event—is registered.
- 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.
The 30-ms timeframe is extended indefinitely for an ongoing synchronous execution, for example, when a long calculation in the application code takes more than 30 ms and an XHR request starts only after the calculation is completed. However, this only applies when the execution is done directly in the event handler and setTimeout
, setInterval
, or promises are not used.
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