[Alpha] Upgrade the Splunk RUM React Native agent

Migrate existing deployments to the new Splunk RUM React Native agent.

Attention:

Alpha features described in this document are provided by Splunk to you "as is" without any warranties, maintenance and support, or service-level commitments. Splunk makes this alpha feature available in its sole discretion and may discontinue it at any time. These documents are not yet publicly available and we ask that you keep such information confidential. Use of alpha features is subject to the Splunk Pre-Release Agreement for Hosted Services.

Tip:

Use these links to navigate through the documentation for this alpha release. These links aren't visible in the left nav.

Note: If you don't have existing React Native instrumentation, skip this page. Go directly to [Alpha] Install the Splunk RUM React Native agent.

If you're using the old Splunk RUM React Native agent in your React Native applications, follow these steps to migrate your applications to the new Splunk RUM React Native agent.

  1. Update platform requirements:

    • React Native must be 0.75.0+ and React 18.2.0+.

    • iOS must target 15.0+ and use dynamic frameworks for Pod dependencies linking: 

      # ios/Podfile
ENV['USE_FRAMEWORKS'] = 'dynamic'

    • Android must target minSdkVersion 24+ and have core library desugaring enabled:

      android {
  compileOptions {
    isCoreLibraryDesugaringEnabled = true
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }
  kotlinOptions {
    // Optional
    jvmTarget = "1.8"
  }
}
dependencies {
  coreLibraryDesugaring "com.android.tools:desugar_jdk_libs:2.1.5"
}
  2. Update the initialization functions.

    Replace the legacy SplunkRum.init() and OtelWrapper with SplunkRum.install() or SplunkRumProvider.

    • Before (legacy):

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

SplunkRum.init({
  realm: 'your-splunk-realm',
  applicationName: 'your-application-name',
  rumAccessToken: 'your-splunk-rum-access-token',
});

    • After (new):

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

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

    • Recommended (provider):

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

<SplunkRumProvider
  agentConfiguration={{
    endpoint: { realm: 'your-splunk-realm', rumAccessToken: 'your-splunk-rum-access-token' },
    appName: 'your-application-name',
    deploymentEnvironment: 'your-environment-name',
  }}
>
  <App />
</SplunkRumProvider>;
  3. Update your configuration object to match AgentConfiguration and EndpointConfiguration:
    LegacyNew

    applicationName

    appName (required)

    deploymentEnvironment (now required)

    realm , rumAccessToken

    endpoint: { realm, rumAccessToken }

    beaconEndpoint

    endpoint: { trace: "<https://...>" } (optional sessionReplay)

    debug

    enableDebugLogging

    globalAttributes

    No change needed but can be updated at runtime through SplunkRum.instance.globalAttributes

    ignoreUrls

    new NetworkInstrumentationModuleConfiguration(true, patterns) (iOS only)

    appStartEnabled

    new StartupModuleConfiguration(true|false)

    allowInsecureBeacon, enableDiskBuffering, limitDiskUsageMegabytes,truncationCheckpoint, bufferTimeout, bufferSize

    Removed these

  4. Remove or replace these legacy APIs:
    LegacyNew

    OtelWrapper

    SplunkRumProvider

    SplunkRum.setGlobalAttributes()

    SplunkRum.instance.globalAttributes.setAll()

    startNavigationTracking()

    NavigationModuleConfiguration and/or manual tracking

    SplunkRum.finishAppStart()

    Use StartupModuleConfiguration (no manual finish API)

    SplunkRum.reportError()

    No direct replacement (use automatic error capture)

    SplunkRum.updateLocation()

    No direct replacement (set custom attributes if needed)

    Manual navigation example:

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

await SplunkRum.install(config, [
  new NavigationModuleConfiguration(true, true),
]);

await SplunkRum.instance.navigation.track('Home');
  5. Configure modules explicitly:

    Features are now controlled via module configurations. Add only what you need:

    import {
  CrashReportsModuleConfiguration,
  InteractionsModuleConfiguration,
  NetworkMonitorModuleConfiguration,
  StartupModuleConfiguration,
} from '@splunk/otel-react-native';

await SplunkRum.install(config, [
  new CrashReportsModuleConfiguration(true),
  new InteractionsModuleConfiguration(true),
  new NetworkMonitorModuleConfiguration(true),
  new StartupModuleConfiguration(true),
]);