Try it free

Web request performance

  • Latest Dynatrace
  • Explanation
  • 1-min read

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).

W3C Trace Context for frontend-backend linking

The SDK supports the addition of the W3C trace context, which lets you link mobile requests with backend services. For details, see Frontend-backend linking using the W3C trace context.

Deactivate automatic trace context propagation

If you don't want the W3C trace context headers to be added automatically to outgoing requests, you can turn off this behavior.

  1. Go to Experience Vitals Experience Vitals > Overview.
  2. Select Mobile to view all mobile frontends.
  3. Select the frontend you want to configure.
  4. On the Settings tab, select Frontend-backend linking.
  5. Turn off Enable frontend-backend linking via W3C trace context.

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 topics

  • Custom events—event properties and modifiers.
  • Configuration—agent configuration.
Related tags
Digital Experience