APM for React Native Applications

Monitor the performance of your mobile apps built on React Native using Site24x7 Real User Monitoring (RUM) SDK. Analyze your app's performance on various devices and geographies, detect errors, and inspect crashes.

This document explains how to install RUM SDK in your ReactJS application and how to initiate monitoring processes.

Prerequisites:

  • iOS: Minimum deployment target should be set to iOS 10
  • Android: Android API level 16 and above
  • React Native: Version 0.60 and above

Contents:

  1. Install RUM SDK
  2. Install RUM SDK in your iOS project
  3. Install RUM SDK in your Android project
  4. Initialize monitoring
  5. APIs to capture other parameters 

1. Install RUM SDK

Install the RUM SDK in react-native project using the below command. 

Install RUM SDK

Install the package using the below commands. Open your React Native application and run the below command in the terminal:

npm install --save react-native-site24x7-rn # OR yarn add react-native-site24x7-rn

Link the module with react native app using the below command

react-native link react-native-site24x7-rn

This step installs the RUM SDK to your React Native project.

2.Install in iOS

Use the below commands to install the SDK in iOS project.  

Install in iOS

  1. Navigate to the iOS folder and execute the following command:
    Add the source at the top of the podfile located at your project directory/ios/
    1.require_relative
    '../node_modules/react-native/scripts/react_native_pods'
    2.require_relative
    '../node_modules/@react-native-community/cli-platform-ios/native_modules'
    3.source'https://github.com/site24x7/MobileAPM-IOS-SDK.git'
  2. Run the below command in the same directory:
    pod repo update
    pod install
  3. To install the SDK manually for iOS:
    • Download the zip file using the below links:
      https://raw.githubusercontent.com/site24x7/MobileAPM-IOS-SDK/v1.0.0/APM.framework.zip
      https://github.com/site24x7/MobileAPM-IOS-SDK/raw/master/ZAnalytics.framework.zip
    • Navigate to the project settings: ioS project > General Tab > Frameworks, Libraries, and Embedded Content (or Embedded Binaries in older Xcode versions). Click + to add a new framework/xcframework.
  4. After installing via commands or manually, click Choose Frameworks > Add Other > Add Files.
  5. Select the APM.framework and ZAnalytics.framework files to include the Site24x7 Mobile RUM SDK in your project.
  6. Once included, select Embed & Sign for the framework.
  7. Select Copy Items if needed and if prompted in Destination.
  8. Download dysm_upload here:
    https://github.com/site24x7/MobileAPM-IOS-SDK/releases/download/v1.0.0/dsym_upload And the run script from here:
    https://github.com/site24x7/MobileAPM-IOS-SDK/releases/download/v1.0.0/run Go to Build Phase and add a new run.
  9. In Run Script, enter the below command:
    eval"./{path to above downloaded run script}" --api-key={apikey that you got from site24x7} --upload-symbols={true or false}
  10. After running the run script, make sure the API tokens are present in the info.plist file under Z_APP_CONFIG key.

3.Install in Android

Navigate to the android folder within the project directory using Android Studio or any other platform of choice for Android development. Use the below commands to install. 

Install in Android

Add the following maven repository to the app level build.gradle file.

    • Add zanalytics-plugin to app level build.gradleto upload the proguard mapping files to Site24x7 servers during buildtime to unobfuscate the errors.
      buildscript{
      repositories{
      jcenter()
      maven { url 'https://maven.zohodl.com' }
      }
      dependencies{
      classpath 'com.zoho.site24x7:mobileapm-analytics-plugin:1.1.1'
      }
      }

      apply plugin: 'zanalytics-plugin'
      repositories{
      jcenter()
      maven { url 'https://maven.zohodl.com' }
    • Add the APIToken to the Zanalytics plugin
      zanalytics{
      debug{
      apiToken="412xxxx2131_US_3afdaxxxxxxd"
      }
      release{
      apiToken="412xxxx2131_US_3afdaxxxxxxd"
      }
      }
APItoken should be defined in Zanalytics{} for all build variants in camel case {productflavor}{buildtype}, for instance, if you've configured productflavor like below flavorDimensions "version",
productFlavors {
develop {
dimension 'version'
}
}
then, you need to assign the API Token for the buildTypes debug and release as follows:
zanalytics{
developDebug{
apiToken="412xxxx2131_US_3afdaxxxxxxd"
}
developRelease{
apiToken="412xxxx2131_US_3afdaxxxxxxd"
}
debug{
apiToken="412xxxx2131_US_3afdaxxxxxxd"
}
release{
apiToken="412xxxx2131_US_3afdaxxxxxxd"
}
}
  • Click Sync Now from the toolbar on the Integrated Development Environment.

4. Initialize the SDK

Use the below commands to initialize the SDK and to start monitoring.

Initialize the SDK

  • Use the below code to initialize the SDK:
    import {s247r} from 'react-native-site24x7-rn';
  • Start monitoring by executing the following command:
    s247r.startMonitoring()
  • To start monitoring with custom configuration, use the below command: You can use this command to customize endpoints and upload intervals. By default, the upload interval is 60 seconds.
    const config = {
    "apiKey" : "58de19c3cc53deccdccc96faf719f74c",
    "endPoint" : "http://localhost:6060/",
    "uploadInterval" : 20
    }
    s247r.startMonitoringWithConfig(config);

5. APIs to capture other parameters

The above commands will initiate the monitoring process. However, to track individual parameters like HTTP calls, errors, and app crashes, we recommend you initiate the respective commands as given below:

Other recommended APIs

  • Start network monitoring:
    s247r.initializeNetworkMonitoring();
  • Start error reporting:
    const errorConfig = {
    "trackUnhandledErrors" : true,
    "trackConsoleErrors" : false,
    "trackUnhandledRejections" : true,
    "trackNativeErrors": false
    }
    s247r.initializeErrorMonitoring(errorConfig);
  • Start or stop transactions and components:

    Use the following commands to track individual transactions and the components involved in the transactions. You can also group transactions by components.

    To start a transaction with a custom unique transaction name:

    s247r.startTransaction("testTxn");

    To stop a transaction with a custom unique transaction name:

    s247r.stopTransaction("testTxn");

    To start a transaction with a custom unique transaction name and unique component name:

    s247r.startComponent("testTxn","testComponent");

    To stop a transaction with the same custom unique transaction name and unique component name:

    s247r.stopComponent("testTxn","testComponent");
  • To set unique IDs, monitor user sessions and track individual user behavior.
    s247r.setUserId("test user");
  • To add screen manually with load time of the screen.
    s247r.addScreen("screen name", loadTime);
  • You can use this command to simulate app crashes and identify performance bottlenecks.
    s247r.crashApplication();
  • Flush the data to Site24x7 servers.
    s247r.flush();
Was this document helpful?
Thanks for taking the time to share your feedback. We’ll use your feedback to improve our online help resources.