AgentConfiguration

You can configure the Splunk RUM React Native agent to add custom attributes, adapt the instrumentation to your environment and application, customize sampling, and more.

To configure the React Native RUM agent, pass the settings to the agent in an AgentConfiguration object. The following example shows how to configure this object with your Splunk RUM token, Splunk realm, application name, and deployment environment:

await SplunkRum.install({
  endpoint: {
    realm: 'your-splunk-realm',
    rumAccessToken: 'your-splunk-rum-access-token',
  },
  appName: 'your-application-name',
  deploymentEnvironment: 'your-environment-name',
});

General settings

Use the following settings to configure the AgentConfiguration object:

HTTP instrumentation module (Android only)

The Splunk RUM React Native agent supports automatic instrumentation for the OkHttp and HttpURLConnection HTTP clients for Android.

Okhttp3 (Android only)

This instrumentation automatically modifies the code at build time and adds the necessary hooks for tracing network requests made through the OkHttp3 APIs. To activate this, add the following plugin to android/build.gradle and android/app/build.gradle:

// android/build.gradle
buildscript {
  repositories {
    google()
    mavenCentral()
    maven { url "https://splunk.jfrog.io/splunk/splunk-rum-android-releases" }
  }
  dependencies {
    classpath("com.splunk:rum-okhttp3-auto-plugin:splunk-rum-version")
  }
}

Add these lines to android/app/build.gradle:

// android/app/build.gradle
apply plugin: "com.splunk.rum-okhttp3-auto-plugin"

Enable the module in TypeScript and capture request and response headers:

You can opt-in to capture certain request and response headers using the HTTP instrumentation modules. If those headers are available, the resulting span will contain http.request.header.key and http.response.header.key attributes with the header value(s).

import {
  HttpURLModuleConfiguration,
  OkHttp3AutoModuleConfiguration,
} from '@splunk/otel-react-native';

const modules = [
  new HttpURLModuleConfiguration(
    true,
    ['content-type', 'user-agent'],
    ['content-type', 'cache-control']
  ),
  new OkHttp3AutoModuleConfiguration(
    true,
    ['content-type', 'accept'],
    ['content-type', 'content-length']
  ),
];

await SplunkRum.install(agentConfiguration, modules);

Note: If you don't add the plugin to the application at build time, the runtime OkHttp3AutoModuleConfiguration will have no effect

HttpUrlConnection (Android only)

This instrumentation automatically modifies the code at build time and adds the necessary hooks for tracing network requests made via the URLConnection , HttpURLConnection, or HttpsURLConnection APIs. To enable this, add the following plugin to android/build.gradle and android/app/build.gradle.

// android/build.gradle
buildscript {
  repositories {
    google()
    mavenCentral()
    maven { url "https://splunk.jfrog.io/splunk/splunk-rum-android-releases" }
  }
  dependencies {
    classpath("com.splunk:rum-httpurlconnection-auto-plugin:splunk-rum-version")
  }
}

// android/app/build.gradle
apply plugin: "com.splunk.rum-httpurlconnection-auto-plugin"

Note: If you don't add the plugin to the application at build time, the runtime HttpUrlModuleConfiguration will have no effect.

Note: There is currently an open issue with Google that may result in a build failure when an application is built with these plugins. It's related to the Jetifier. The issue is tracked in the Google Issue Tracker and can be resolved by setting the enableJetifier flag to false in your gradle.properties file. For example, android.enableJetifier=false

If you see ByteBuddy resolution errors, enforce the ByteBuddy version:

configurations.matching { it.name.toLowerCase().contains("bytebuddyclasspath") }.all {
  resolutionStrategy {
    force("net.bytebuddy:byte-buddy:1.14.12")
  }
}

Manual OkHttp instrumentation (Android only)

Not available in the alpha release.

Capture request and response headers (Android only)

You can opt-in to capture certain request and response headers using the HTTP instrumentation module. If those headers are available, the resulting span will contain http.request.header.key and http.response.header.key attributes with the header value(s).

placeholder

Automatic URLSession instrumentation (iOS only)

Configure automatic instrumentation for URLSession clients to make HTTP network requests.

Specify patterns for NSRegularExpression to exclude requests from instrumentation as in the example below.

Tip: See what attributes are included when this module is activated.

import { NetworkInstrumentationModuleConfiguration } from '@splunk/otel-react-native';

const modules = [
  new NetworkInstrumentationModuleConfiguration(true, [
    'https://example.com/health',
    '.*\\.png$',
  ]),
];

await SplunkRum.install(agentConfiguration, modules);

Navigation detection module (detection of screen names)

Track navigation events automatically

Automatic detection of screen names is deactivated by default. You can activate it through the isAutomatedTrackingEnabled setting as shown in the examples below.

import { NavigationModuleConfiguration } from '@splunk/otel-react-native';

const modules = [new NavigationModuleConfiguration(true, true)];

await SplunkRum.install(agentConfiguration, modules);

Track navigation events manually

See Manually track navigation events.

Crash reporting module

Automatically captures crashes on the native platform. The crash reporting module is activated by default. To deactivate it, see the codeblock below.

import { CrashReportsModuleConfiguration } from '@splunk/otel-react-native';

const modules = [new CrashReportsModuleConfiguration(false)];

await SplunkRum.install(agentConfiguration, modules);

Application not responding module (Android only)

Application not responding (ANR) occurs when an Android application's main thread is blocked for more than five seconds, preventing it from processing user input. The detection of ANRs is activated by default. To deactivate it, see the codeblock below.

import { AnrModuleConfiguration } from '@splunk/otel-react-native';

const modules = [new AnrModuleConfiguration(false)];

await SplunkRum.install(agentConfiguration, modules);

Slow rendering module

Monitors rendering performance at the native platform level. Activated by default. Configure as follows.

Android

import { SlowRenderingModuleConfiguration } from '@splunk/otel-react-native';

const modules = [new SlowRenderingModuleConfiguration(true, 1000)];

await SplunkRum.install(agentConfiguration, modules);

iOS

import { SlowRenderingModuleConfiguration } from '@splunk/otel-react-native';

const modules = [new SlowRenderingModuleConfiguration(true)];

await SplunkRum.install(agentConfiguration, modules);

Interaction detection module

Captures user interaction coordinates and timing at the native platform level. Interaction detection is enabled by default. To deactivate it, see the codeblock below.

import { InteractionsModuleConfiguration } from '@splunk/otel-react-native';

const modules = [new InteractionsModuleConfiguration(false)];

await SplunkRum.install(agentConfiguration, modules);

Application lifecycle monitoring module

The application lifecycle monitoring module is included in the Splunk RUM React Native agent and is activated by default. This module monitors application lifecycle events (foreground, background, termination) at the native platform level. To deactivate it, see the codeblock below.

import { ApplicationLifecycleModuleConfiguration } from '@splunk/otel-react-native';

const modules = [new ApplicationLifecycleModuleConfiguration(false)];

await SplunkRum.install(agentConfiguration, modules);