Header background

Real user monitoring: Support for Fetch API is now available

During the dawn of the web 2.0 era, back when web sites first began to evolve into the dynamic web applications that we know today, asynchronous web requests were sent via the XMLHttpRequest (XHR) API (commonly known as Ajax). Within the past two years, a new API type called Fetch API was introduced into all modern browsers to support such asynchronous requests. Beginning with OneAgent installations version 119 or higher, Dynatrace real user monitoring now supports the detection of Fetch-based requests.

XHR actions

Dynatrace real user monitoring for web applications distinguishes between 3 different user action types:

  • Load actions are the most common user actions. These occur when a user opens a website or navigates from one web page to another.
  • Custom user actions are triggered via the Dynatrace JavaScript API and are entirely customizable.
  • XHR actions (also known as Ajax requests) are used in modern web applications. Dynatrace supports the detection and monitoring of the XHR API based on XMLHttpRequests and the Fetch API. Within Dynatrace, such user-triggered browser calls are identified as type XHR actions.

Fetch API

User actions based on the Fetch API appear in Dynatrace as XHR actions. With this in mind, we’ve renamed the Dynatrace XHR (Ajax) detection setting to Async requests and single page apps.detection settings. The settings page has also been restructured slightly (see below).

To enable Fetch/XHR(AJAX) detection settings

  1. Select Applications from the navigation menu.
  2. Select the application you want to configure.
  3. Click the Browse [] button.
  4. Select Edit.
  5. Select Async requests and single page apps.
  6. Set the Capture fetch() requests switch to the On position.
  7. Optionally, enable detection of requests that are generated by the XmlHttpRequest API by setting the Support for XmlHttpRequests to the On position.
  8. Optionally, enable support for specific JavaScript frameworks by enabling the respective switches further down the page.