Mobile 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, Custom APIs are used to set dynamic values for user IDs, track custom events, calculate screen loading time, and more. This document will explain the various types of custom APIs available in Site24x7 and the syntax to use them.

Custom APIs

Available APIs:

  1. Initialize Network Monitoring
  2. Transactions
  3. User Tracking
  4. Screen Tracking
  5. Flush
  6. Crash Application

1. Initialize Network Monitoring

You can use the API below to initiate network monitoring and track the required HTTP calls. You can also specify which HTTP calls should be ignored when tracking is enabled.

Syntax:

/**
   *Initializes network monitoring.
   *@param {List<String>} listOfUrlsToIgnore
   */
s247r.initializeNetworkMonitoring(["/symbolicate","/ping"]);


2. Transactions

You can track custom events with application-specific timing.

To do so, use the API given below:

Syntax:

/**
   *Transaction ( can contain multiple components )
   *@param {String} transactionName
   *Component
   *@param {String} transactionName
   *@param {String} componentName
   */
s247r.startTransaction("listing_blogs");
     //Grouping various operations using components.
s247r.startComponent("listing_blogs","http_request");
     //your code
s247r.stopComponent("listing_blogs", "http_request");
s247r.startComponent("listing_blogs","view_data_onto_screen");
     //your code
s247r.stopComponent("listing_blogs","view_data_onto_screen");
s247r.stopTransaction("listing_blogs");


3. User Tracking

You can use the API below to track a specific user by providing a unique user identifier. If a unique ID is not specified, Site24x7 generates a random globally unique identifier and assigns it to the user.

Syntax:

/**
   *@param {String} userId
   */
s247r.setUserId("[email protected]");


4. Screen Tracking

You can use the API below to calculate how long it takes for a screen to load. This data is pushed to the Site24x7 servers and can be used to track sessions and report crashes.

Syntax:

/**
   *@param {String} screenName
   *@param {int} loadTime measured in millis
   */
s247r.addScreen("home_screen", 55);


Check out the code snippet below to see how the screen's data and its load time can be captured and pushed to the Site24x7 servers.

For the function component:

Syntax
:

import { useRoute } from '@react-navigation/native';export default FunctionComponent = () => {
    const [startTime, setTime] = useState(Date.now());
    const route = useRoute();useEffect(()=>{
       var loadTime = (Date.now())-startTime;
         //Sends screen name and its load time to Site24x7.
       s247.addScreen(route.name, loadTime);       ...
},[]]);
}


For the class component
:

Syntax
:

export default class ExampleClass extends React.Component{    constructor(props)   {
    super(props);
    this.startTime = Date.now();
   }
//This code block is for capturing the screen metrics when it loads for the first time.
   componentDidMount()
   {//Sends screen name and its load time to Site24x7.
     s247r.addScreen(this.props.route.name,Date.now()-this.startTime);
     this.startTime = Date.now();...    }
//This code block is for capturing the screen metrics when it loads for every render after the first render.
     componentDidUpdate(prevProps, prevState, snapshot)
    {
      const currentTime = Date.now();
//Sends screen name and its load time to Site24x7.
      s247r.addScreen(this.props.route.name, currentTime - this.startTime);
      this.startTime = currentTime;...    }
     render()
      {
        return ();
       }
}


5. Flush

 You can use the API below to immediately flush data to the Site24x7 servers instead of waiting for the next upload interval. By default, the flush interval is set to 60 seconds.

Syntax:

s247r.flush();


6. Crash Application

You can manually crash your application and display an error message that says "Site24x7 RN error."

To do so, use the API given below:

Syntax:

s247r.crashApplication();
Was this document helpful?
Thanks for taking the time to share your feedback. We’ll use your feedback to improve our online help resources.