Docs » Supported integrations in Splunk Observability Cloud » Instrument mobile and web applications for Splunk RUM » Instrument React Native applications for Splunk RUM » Install the React Native RUM agent for Splunk RUM

Note

This library instruments React Native applications for Android and iOS devices. For React web instrumentation, see Instrument browser-based web applications for Splunk RUM.

Install the React Native RUM agent for Splunk RUM πŸ”—

You can instrument your React Native and Expo applications using the Splunk Distribution of OpenTelemetry for React Native. Splunk APM is not required to instrument Splunk RUM for React Native.

To instrument your React Native or Expo application and get data into Splunk RUM, follow the instructions on this page.

Caution

This distribution is currently in beta. Don’t use it in production environments without extensive prior testing. Some features might not be supported or might have constrained capabilities.

Check compatibility and requirements πŸ”—

Splunk RUM for Mobile supports React Native 0.68 and higher.

The library is also compatible with the following frameworks and libraries:

  • Expo framework

  • React Navigation 5 and 6

Note

To instrument applications using React Native 0.67 and lower, see Additional step for apps using React Native 0.67 and lower.

Instrument your React Native application for Splunk RUM πŸ”—

Before you instrument and configure Splunk RUM for your React Native application, understand which data RUM collects about your application and determine the scope of what you want to monitor. See Data collected by Splunk RUM.

Tip: To generate all the basic installation commands for your environment and application, use the React Native Instrumentation guided setup. To access the React Native Instrumentation guided setup, follow these steps:

  1. Log in to Splunk Observability Cloud.

  2. In the navigation menu, select Data Management.

  3. Go to the Available integrations tab, or select Add Integration in the Deployed integrations tab.

  4. In the integration filter menu, select By Use Case.

  5. Select the Monitor user experience use case.

  6. Select the React Native Instrumentation tile to open the React Native Instrumentation guided setup.

Import and initialize the React Native RUM package πŸ”—

Follow these steps to import and initialize the React Native RUM package.

  1. Install the React Native RUM library using npm or yarn:

    # npm
    npm install @splunk/otel-react-native
    
    # yarn
    yarn add @splunk/otel-react-native
    

    For iOS, also install the pod:

    (cd ios && pod install)
    
  2. Edit the initialization parameters to set the Splunk Observability Cloud realm, RUM access token, and basic attributes:

    const RumConfig: ReactNativeConfiguration = {
       realm: '<realm>',
       rumAccessToken: '<rum-access-token>',
       applicationName: '<your-app-name>',
       environment: '<your-environment>'
    }
    
  3. Wrap your entire App component using the OtelWrapper component:

    import { OtelWrapper, startNavigationTracking } from '@splunk/otel-react-native';
    import type { ReactNativeConfiguration } from '@splunk/otel-react-native';
    
    const AppWithOtelWrapper = () => (
    <OtelWrapper configuration={RumConfig}>
       <App />
    </OtelWrapper>
    );
    
    export default AppWithOtelWrapper;
    

    Alternatively, you can initialize the library early in your code. See Alternative initialization method.

  4. (Optional) To instrument React Navigation, adapt your code as in the following example:

    import { startNavigationTracking } from '@splunk/otel-react-native';
    
    export default function App() {
       const navigationRef = useNavigationContainerRef();
       return (
          <NavigationContainer
             ref={navigationRef}
             onReady={() => {
                startNavigationTracking(navigationRef);
             }}
          >
             <Stack.Navigator>
             // ...
             </Stack.Navigator>
          </NavigationContainer>
       );
    }
    

    For more information, see React Navigation on GitHub.

Additional step for apps using React Native 0.67 and lower πŸ”—

To instrument applications running on React Native version 0.67 and lower, edit your metro.config.js file to force Metro to use browser specific packages. For example:

const defaultResolver = require('metro-resolver');
module.exports = {
resolver: {
   resolveRequest: (context, realModuleName, platform, moduleName) => {
      const resolved = defaultResolver.resolve(
      {
         ...context,
         resolveRequest: null,
      },
      moduleName,
      platform,
      );
      if (
      resolved.type === 'sourceFile' &&
      resolved.filePath.includes('@opentelemetry')
      ) {
      resolved.filePath = resolved.filePath.replace(
         'platform\\node',
         'platform\\browser',
      );
      return resolved;
      }
      return resolved;
   },
},
transformer: {
   getTransformOptions: async () => ({
      transform: {
      experimentalImportSupport: false,
      inlineRequires: true,
      },
   }),
},
};

Alternative initialization method πŸ”—

As an alternative to wrapping the App component, you can initialize the React Native RUM library as early in your app lifecycle as possible. For example:

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

const Rum = SplunkRum.init({
   realm: '<realm>',
   applicationName: '<name-of-app>',
   rumAccessToken: '<access-token>',
});

How to contribute πŸ”—

The Splunk Distribution of OpenTelemetry for React Native is open-source software. You can contribute to its improvement by creating pull requests in GitHub. To learn more, see the contributing guidelines in GitHub.

This page was last updated on May 08, 2024.