Try it free

Web request performance

  • Latest Dynatrace
  • Explanation
  • 1-min read

The OneAgent for React Native provides comprehensive web request monitoring capabilities

  • Automatic instrumentation—automatically captures all web requests made via fetch, XMLHttpRequest, or supported native HTTP clients.
  • W3C Trace Context—activates frontend-backend linking by propagating trace context headers.
  • Manual reporting—report web requests from custom networking implementations.
  • Event enrichment—add custom properties to web request events.

Automatic web request instrumentation

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

The OneAgent for React Native automatically instrument web requests.

Each event consists of well-defined key-value fields as specified in the Semantic Dictionary for user events.

This data can be queried directly in Grail using DQL.

What is captured automatically

An exact overview of the reported data and its structure can be found in the Semantic Dictionary. The following list provides an overview of data that is automatically monitored by OneAgent:

  • Request URL
  • HTTP method (GET, POST, PUT, DELETE, etc.)
  • Response status code
  • Request and response size (bytes sent/received)
  • Request duration
  • Errors (if the request fails)

Supported APIs

Automatic instrumentation works with:

  • fetch
  • XMLHttpRequest

Additionally, all native HTTP clients that the OneAgent For Android or the OneAgent for iOS supports are supported.

Limitations

  • Non-HTTP protocols are not supported.
  • Requests from unsupported frameworks must be manually instrumented.
  • Using several monitoring tools simultaneously with web request instrumentation functionality enabled isn't recommended. This can lead to compatibility problems, incorrect or invalid data reporting, and loss of monitoring information. If you choose to do so, thoroughly test to ensure the tools work together correctly.

Disable automatic instrumentation

To disable automatic web request instrumentation for Android, set the webRequests.enabled flag to false in the android.config block in your dynatrace.config.js:

dynatrace {
    configurations {
        defaultConfig {
            webRequests.enabled false
        }
    }
}

To disable automatic web request instrumentation for iOS, set the DTXInstrumentWebRequestTiming configuration key to false in the ios.config block in your dynatrace.config.js:

<key>DTXInstrumentWebRequestTiming</key>
<false/>

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.

Automatic trace context header propagation

In most cases, you don't need to set W3C Trace Context headers yourself. When automatic web request instrumentation is active, OneAgent inspects each outgoing request and generates trace context headers.

If the request has no trace headers, OneAgent generates a new valid traceparent and adds a corresponding tracestate entry with Dynatrace specific context. This enables correlation between the mobile request and the service side trace. See Frontend-backend linking.

If the combined tracestate grows too large, OneAgent may trim entries to stay within W3C limits. Dynatrace data is preserved whenever possible.

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.

Manually propagate trace context headers

Only propagate trace context headers manually when automatic trace context header propagation is turned off or is not supported for the request. Propagating headers manually while automatic propagation is also active might result in duplicate trace context entries.

If you use a custom networking stack, you can propagate W3C Trace Context headers yourself and still correlate the request with Dynatrace distributed traces.

Use Dynatrace.generateTraceContext(traceparent, tracestate) to create or enrich trace context according to the official W3C Trace Context specification:

  • If traceparent is null or invalid, OneAgent generates a new traceparent and a corresponding tracestate (including Dynatrace vendor specific information)
  • If traceparent is present and valid, OneAgent keeps it and enriches tracestate with Dynatrace vendor specific information (without overwriting existing vendor entries)
  • If the trace context can't be created (for example, because capture/tagging is not allowed), the API returns null and you must not change the request headers

You can then reuse the resulting traceContext to correlate a manually reported web request event.

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


const url = 'https://api.example.com/data';


// Read existing trace context headers (if any)
const existingTraceparent = existingHeaders['traceparent'];
const existingTracestate = existingHeaders['tracestate'];


// Generate/enrich trace context
const traceContext = Dynatrace.generateTraceContext(existingHeaders.traceparent, existingHeaders.tracestate);


const headers = { ...existingHeaders, ...traceContext };


// ...execute your HTTP request here...


const requestEvent = new HttpRequestEventData(url, 'GET')
  .withDuration(duration)
  .withStatusCode(statusCode)
  .withTraceparentHeader(traceContext.traceparent);


Dynatrace.sendHttpRequestEvent(requestEvent);

Report web requests manually

Only report web requests manually when automatic web request instrumentation is disabled or is not supported for the request. Manually reporting a request that is also captured automatically might result in double reporting.

For networking libraries not covered by automatic instrumentation, you can manually report web requests using HttpRequestEventData.

Basic usage

Report a completed HTTP request with detailed information:

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


// Create the request data with the URL and HTTP method
const requestEvent = new HttpRequestEventData('https://api.example.com/data', 'GET')
  .withDuration(250)          // Duration in milliseconds
  .withStatusCode(200)        // HTTP status code
  .withBytesSent(128)         // Bytes sent
  .withBytesReceived(4096);   // Bytes received


// Send the web request event
Dynatrace.sendHttpRequestEvent(requestEvent);

Report errors

When a request fails, include the error information:

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


const requestEvent = new HttpRequestEventData('https://api.example.com/data', 'POST')
  .withDuration(1500)
  .withError(error);


Dynatrace.sendHttpRequestEvent(requestEvent);

Include trace context

To correlate manually reported requests with distributed traces, include the traceparent header:

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


// Report the event with the traceparent
const requestEvent = new HttpRequestEventData(url, 'GET')
  .withDuration(duration)
  .withStatusCode(statusCode)
  .withTraceparentHeader(traceparent);


Dynatrace.sendHttpRequestEvent(requestEvent);

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