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
We offer special support for Angular. For other JavaScript frameworks, try activating generic support.
Activate support for Angular
To enable support for Angular
- 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, select Capturing > Async web requests and SPAs.
-
Under JavaScript framework support, select Angular.
-
Angular 12+ Enter the Angular package name.
Activate generic JavaScript frameworks support
If your application uses a JavaScript framework other than Angular, 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, select 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, select 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, select 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