Application Real-Time Monitoring Service:Integrate a React Native app

Supported versions

• React Native: RUM only supports collecting error information from React Native versions earlier than 0.70.49.

• Android and iOS: Use the default SDK version.

Step 1: Integrate the OpenRUM SDK into the Android or iOS SDK

You can integrate the OpenRUM SDK into the Android or iOS SDK through Android Studio or Xcode. You can also use a third-party tool, such as CocoaPods or Maven, to implement the integration.

• iOS app

  • Integrate an iOS app into RUM through CocoaPods

  • Integrate an iOS app into RUM through Xcode

• Android app

  • Integrate an Android app through Maven

  • Integrate an Android app into RUM through Android Studio

Step 2: Integrate the OpenRUM plug-in through Android Studio or Xcode

1. Download the installation package of the OpenRUM SDK and decompress the package.

2. Load the dependency libraries in the @OpenRUM directory.

   In the @OpenRUM directory, run the npm i or yarn install command.

3. Move the @OpenRUM directory to the node_modules directory of the React Native project.

   

4. Optional. Monitoring an iOS app requires updating the pod environment. If you monitor an Android app, proceed to the next step.

   • If the app uses an iOS project under the React Native project, run the pod install command to configure the pod environment as required by data collection in the directory of the iOS project.

   • If the app is embedded with a mobile SDK, move the OpenRUMRNBridge.h and OpenRUMRNBridge.m files in the react-native-plugin/ios directory to the project, and correct the references of the SDK header file in the .m file.

     

Step 3: Configure the OpenRUM plug-in

Configure transformer settings in the system files

• If the React Native version is 0.59 or later, add babelTransformerPath to the transformer parameter of the metro.config.js file in the root directory.

• If the React Native version is 0.57 or 0.58, add babelTransformerPath to the transformer parameter of the rn-cli.config.js file in the root directory.

  Example:

  module.exports = {
    transformer: {
      babelTransformerPath: require.resolve(
        '@OpenRUM/react-native-plugin/lib/OpenRUM-transformer',
      ),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
  };

• If the React Native version is earlier than 0.57, add getTransformModulePath to the transformer parameter of the rn-cli.config.js file in the root directory. If no such file exists, create one.

  Example:

  module.exports = {
    getTransformModulePath() {
      return require.resolve('@OpenRUM/react-native-plugin/lib/OpenRUM-transformer');
    },
    getSourceExts() {
      return ['js'];
    }
  }

  Note

  If the project uses a React Native bundle with the -config parameter configured, add getTransformModulePath or transformer.babelTransformerPath to the config.js file.

Create the OpenRUM.config.js file

The React Native plug-in supports custom configuration information. You can create a file named OpenRUM.config.js in the root directory of the project. Sample file:

module.exports = {
    react: {
        /**
         * Debug Logs
         */
        debug: false,

        /**
         * Allows you to filter the instrumentation for touch events, refresh events and picker events in certain files
         * True = Will be instrumented
         */
        instrument: (filename) => {
            return true;
        },


        lifecycle: {
            /**
             * Monitor the navigation service switch. The default value is false
             */
            listenNavigation: true,

            /**
             * The data collection rules of component life cycle can be set to specify the fuzzy matching of component name
             */
            componentName: null,
        },
    }
};

onReady={() => {OpenRUM.reportRouterData(navigationRef) }}
onStateChange={() => {OpenRUM.reportRouterData(navigationRef)}}

···
import { NavigationContainer ,useNavigationContainerRef } from '@react-navigation/native';
import { OpenRUM } from "@OpenRUM/react-native-plugin";
··· 
···
export default function App(){
    let navigationRef = useNavigationContainerRef()
    return (
        <NavigationContainer ref={navigationRef}
            onReady={() => {OpenRUM.reportRouterData(navigationRef) }}
            onStateChange={() => {OpenRUM.reportRouterData(navigationRef)}}
        >
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen name="Home" component={HomeScreen} />
                <Stack.Screen name="About" component={AboutScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

useEffect(()=>{
    OpenRUM.reportRouterDataV5(navigationRef)
},[]);

import { OpenRUM } from "@OpenRUM/react-native-plugin";

export default function App(){
  const navigationRef = React.useRef(null);
  // Modify the following code to obtain navigation event data.
  useEffect(()=>{
      OpenRUM.reportRouterDataV5(navigationRef)
  },[]);
  return (<NavigationContainer ref={navigationRef}>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>)
}

import {OpenRUM} from "@OpenRUM/react-native-plugin";
<AppContainer
    onNavigationStateChange={OpenRUM.reportRouterDataV2}
/>

// Configure default properties.
AppContainer.defaultProps={
    onNavigationStateChange:OpenRUM.reportRouterDataV2
}

References

• View the monitoring data of apps

• React Native