Manually instrument React Native applications 🔗

You can manually instrument React Native applications for Splunk RUM to collect additional telemetry, sanitize Personal Identifiable Information (PII), add global attributes, and more.

Manage global attributes 🔗

Global attributes are key-value pairs added to all reported data. Global attributes are useful for reporting app or user-specific values as tags.

The following example shows how to define global attributes in your code:

SplunkRum.setGlobalAttributes({
   'enduser.id': 'Test User',
});

Add user metadata using global attributes 🔗

By default, the React Native RUM agent doesn’t automatically link traces to users of your site. However, you might need to collect user metadata to filter or debug traces.

You can identify users by adding global attributes from the OpenTelemetry specification, such as enduser.id and enduser.role, to your spans.

The following examples show how to add identification metadata as global attributes when initializing the agent or after you’ve initialized it, depending on whether user data is accessible at initialization:

Add identification metadata during initialization 🔗

const RumConfig: ReactNativeConfiguration = {
   realm: '<realm>',
   rumAccessToken: '<rum-access-token>',
   applicationName: '<your-app-name>',
   environment: '<your-environment>',
   globalAttributes: {
      enduser.id: 'user-id-123456',
      enduser.role: 'premium'
   },
}

Add identification metadata after initialization 🔗

SplunkRum.setGlobalAttributes({
   'enduser.id': 'user-id-123456',
   'enduser.role': 'premium'
});

Report custom events 🔗

You can use the OpenTelemetry Swift APIs to report custom events happening in your React Native application.

The following example shows how to use the OTel Swift API to report on a function you want to time:

func calculateTax() {
   let tracer = OpenTelemetrySDK.instance.tracerProvider.get(instrumentationName: "MyApp")
   let span = tracer.spanBuilder(spanName: "calculateTax").startSpan()
   span.setAttribute(key: "numClaims", value: claims.count)
   span.setAttribute(key: "workflow.name", value: "<your_workflow>") // This allows the event to appear in the UI
 //...
 //...
   span.end() // You can also use defer for this
}

Configure error reporting 🔗

You can report handled errors, exceptions, and messages using the reportError function.

The following example shows how to report a custom error:

reportError: (err: any, isFatal?: boolean)

Update location data 🔗

The RUM library includes a method for setting latitude ang longitde as global attributes. For example:

updateLocation: (latitude: number, longitude: number)

Add server trace context from Splunk APM 🔗

The React Native RUM agent collects server trace context using back-end data provided by APM instrumentation through the Server-Timing header. In some cases, you might want to generate the header manually.

To create the Server-Timing header manually, provide a Server-Timing header with the name traceparent, where the desc field holds the version, the trace ID, the parent ID, and the trace flag.

Consider the following HTTP header:

Server-Timing: traceparent;desc="00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01"

The example resolves to a context containing the following data:

version=00 trace-id=4bf92f3577b34da6a3ce929d0e0e4736
parent-id=00f067aa0ba902b7 trace-flags=01

When generating a value for the traceparent header, make sure that it matches the following regular expression:

00-([0-9a-f]{32})-([0-9a-f]{16})-01

Server timing headers with values that don’t match the pattern are automatically discarded. For more information, see the Server-Timing and traceparent documentation on the W3C website.

This page was last updated on May 31, 2023.

Related Topics