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 XHRs 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 various JavaScript frameworks.

Supported JavaScript frameworks

We offer special support for Angular 2–16. For Angular 17+, additional configuration is required. If another JavaScript framework is used for your application, try activating generic support.

Activate support for Angular 2–16

To enable support for Angular 2–16

Activate support for Angular 17+

As Angular 17 uses esbuild instead of Webpack by default, the RUM JavaScript can no longer automatically instrument Angular. For this reason, if Angular 17+ is used for your application, note that additional configuration is required.

To enable support for Angular 17+, perform the following actions.

Activate generic JavaScript framework support

Implement exception capture

Set up page group detection

Activate generic JavaScript framework support

Implement exception capture

Angular has a default exception handler (ErrorHandler) that catches exceptions and logs them to the console using console.error. However, a custom exception handler is sometimes used to intercept error handling.

Default exception handler

If the default exception handler is used, enable console error capture so that the RUM JavaScript can capture exceptions for your Angular 17+ applications.

Custom exception handler

If you have a custom exception handler and exceptions aren't logged to the console, you need to report exceptions manually.

export class CustomErrorHandler implements ErrorHandler {
   handleError(error: any): void {
      // Report the error
      window.dtrum?.reportError(error);
      // custom error handling
   }
}

@NgModule({
   ...,
   providers: [{provide: ErrorHandler, useClass: CustomErrorHandler}]
})

Set up page group detection

The default page and page group detection is based on URLs—namely, on the paths and IDs that Dynatrace automatically detects. If the out-of-the-box page grouping is incorrect or you want to modify it, you can manually report page groups using the Angular Router. The sample code below can be used to retrieve the page group from the routeConfig where placeholder names are still available (for example, /journey/:id instead of /journey/1235).

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
    constructor(private router: Router) {
        window.dtrum?.enableManualPageDetection();
        this.router.events.subscribe((value: Event) => {
            if (value.type === EventType.ActivationEnd) {
                const snapshot = value.snapshot;
                if (snapshot.routeConfig) {
                    const group = snapshot.routeConfig.path;
                    const name = snapshot.url.join("/");
                    window.dtrum?.setPage({
                        name,
                        group
                    });
                }
            }
        });
    }
}

See also Define your own page grouping.

dT_.initAngularNg()

Don't call dT_.initAngularNg(), as it no longer works with Angular 17. Doing it doesn't break anything, but it also has no effect.

Activate generic JavaScript framework support

If your application uses a JavaScript framework other than Angular, enable generic support for XHR and fetch() web requests.

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.

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

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:

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