Web request performance

  • Latest Dynatrace
  • Explanation
  • 1-min read
  • Published Jan 12, 2025

Dynatrace provides comprehensive web request monitoring for React Native applications. HTTP requests are automatically tracked by the native agents (Android and iOS). You can also manually report requests from unsupported libraries and enrich request data with custom properties.

Automatic web request instrumentation

The Dynatrace native agents automatically capture web requests made by your React Native application. This includes requests from popular libraries like:

  • fetch API
  • XMLHttpRequest
  • Native HTTP clients

No additional configuration is required. Once the Dynatrace plugin is configured, web requests are automatically tracked and timed.

What is captured

For each web request, Dynatrace captures:

  • URL and HTTP method.
  • Response status code.
  • Request and response timing.
  • Request and response sizes.
  • Error information (if the request fails).

Manual HTTP request reporting

For HTTP libraries not supported by automatic instrumentation, or when you need more control, you can manually report HTTP requests using the New RUM Experience API.

Use sendHttpRequestEvent

Report a completed HTTP request with detailed information:

import { Dynatrace, HttpRequestEventData } from '@dynatrace/react-native-plugin';


// Basic HTTP request event
const requestEventData = new HttpRequestEventData('https://api.example.com/users', 'GET');
Dynatrace.sendHttpRequestEvent(requestEventData);


// HTTP request with additional details
const detailedRequestEventData = new HttpRequestEventData('https://api.example.com/data', 'POST')
  .withStatusCode(200)
  .addEventProperty('event_properties.headers.content_type', 'application/json');
Dynatrace.sendHttpRequestEvent(detailedRequestEventData);

Parameters:

  • url—the URL of the HTTP request (required).
  • method—the HTTP method (e.g., 'GET', 'POST', 'PUT', 'DELETE') (required).

Adding custom properties

Enrich HTTP request events with custom properties:

import { Dynatrace, HttpRequestEventData } from '@dynatrace/react-native-plugin';


async function fetchUserData(userId) {
  const url = `https://api.example.com/users/${userId}`;


  try {
    const response = await fetch(url);


    const requestEventData = new HttpRequestEventData(url, 'GET')
      .withStatusCode(response.status)
      .addEventProperty('event_properties.user_id', userId)
      .addEventProperty('event_properties.cache_hit', response.headers.get('X-Cache-Hit') === 'true')
      .addEventProperty('event_properties.api_version', 'v2');


    Dynatrace.sendHttpRequestEvent(requestEventData);
  } catch (error) {
    const requestEventData = new HttpRequestEventData(url, 'GET')
      .withStatusCode(-1)
      .addEventProperty('event_properties.error', error.message);


    Dynatrace.sendHttpRequestEvent(requestEventData);
  }
}

Event enrichment

HTTP request events can be enriched using event modifiers. This allows you to add custom properties, redact sensitive information, or filter requests before they are sent to Dynatrace.

import { Dynatrace, IEventModifier } from '@dynatrace/react-native-plugin';


const httpModifier: IEventModifier = {
  modifyEvent(event) {
    // Add API version to all HTTP events
    if (event['http.request.method']) {
      event['event_properties.api_version'] = 'v2';
    }


    // Redact user IDs from URLs
    if (event['url.full']) {
      event['url.full'] = event['url.full']
        .replace(/\/users\/\w+\//, '/users/{id}/');
    }


    // Filter out health check requests
    if (event['url.full'] && event['url.full'].includes('/health')) {
      return null; // Discard this event
    }


    return event;
  }
};


Dynatrace.addEventModifier(httpModifier);

Modifiable fields

For HTTP request events, the following fields can be modified:

  • url.full—the complete request URL.
  • event_properties.*—custom properties with this prefix.

Event modifiers apply to all event types, including HTTP requests sent via sendHttpRequestEvent(). For more details on event modifiers, see Event modifiers.

Related tags
Digital Experience