Help APM Mobile App Monitoring React Native APM

Mobile APM for React Native Applications

Site24x7's React Native SDK allows users to optimize app performance by tracking HTTP calls, crashes, screen load time, and custom data in their mobile applications by adding transactions and grouping them with components, individual users, and their sessions.

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. Getting started
  2. Install in iOS
  3. Install in android
  4. Usage in react native app
  5. APIs to capture other parameters 
  6. Release Notes

1. Getting started

Follow the below steps to complete the installation of react-native-site24x7-rn in your React Native app.

Getting started

  1. To install using NPM, run the command below.

    $ npm install react-native-site24x7-rn --save

  2. Link the module with the React Native app (installation is mostly automatic).

    `$ react-native link react-native-site24x7-rn`

2. Installation steps for iOS

Navigate to the iOS folder and execute the following commands.

Installation steps for iOS

  1. Add a source to the top of the podfile in your project directory/ios/.

    source 'https://github.com/site24x7/MobileAPM-IOS-SDK.git'

  2. Run the command below in the same directory.

    pod repo update
    pod install

3. Installation steps for Android

Navigate to the Android folder within the project directory using Android Studio or any other Android development platform of your choice. 

Installation steps for Android 

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

    buildscript{
           repositories{
                       jcenter()
                       maven { url 'https://maven.zohodl.com' }
           }
    }
    allprojects {
            repositories {
                ...
                maven { url 'https://maven.zohodl.com' }
                ...
    }}

  2. Click Sync Now from the toolbar in the integrated development environment. 

4. Usage in the React Native app

Use the below commands to start monitoring.

Usage in the React Native app

  1. Import the s247r module into the initial .js file (App.js) or wherever it is required.
    import {s247r} from 'react-native-site24x7-rn';

  2. 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" : "your_app_key",
    "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

  1. Initialize Network Monitoring
  2. Initialize Error Monitoring
  3. Start & Stop Transactions
  4. Group operations within a transaction using components
  5. Capture Exception
  6. Bread Crumbs
  7. Error Boundary
  8. User Tracking
  9. Screen Tracking
  10. Flush Data
  11. 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:

s247r.initializeNetworkMonitoring(["/symbolicate","/ping"]);
 

2. Initialize Error Monitoring

You can track crashes using the API below, which includes the ability to enable and disable tracking error types (trackUnhandledErrors, trackConsoleErrors, trackUnhandledRejections, trackNativeErrors).

Syntax:

const errorConfig = {
  "trackUnhandledErrors" : true,
  "trackConsoleErrors" : false,
  "trackUnhandledRejections" : true,
  "trackNativeErrors": false
}
 

3. Start & Stop Transactions

Use the following functions to start and stop the transactions.

Syntax:

s247r.startTransaction("listing_blogs");
s247r.stopTransaction("listing_blogs");
 

4. Group operations within a transaction using components

You can start and stop a unique component within a transaction. In a single transaction, you can begin more than one component.

Syntax:

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");
 

5. Capture Exception

You can manually capture exceptions that occur in catch blocks by using the API mentioned below.

Before using this API, initialize error monitoring.

Syntax:

s247r.captureException(error);
 

6. Bread Crumbs

Use the function below to add breadcrumbs manually.

Syntax:

s247r.addBreadCrumb(event, message)

Example:

s247r.addBreadCrumb("Info", "download completed")
 

7. Error Boundary

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree. Error boundaries catch errors during rendering, life cycle methods, and constructors of the entire tree below them. Use the code snippet below to add a custom fallback component.

Use only Function components as fallback props.

Syntax:

const FallbackComponent = () => {
    return (
       <View>
            <Text> wrong in the component </Text>
       </View>
)}
<s247r.ErrorBoundary fallback={FallbackComponent}>
<userDefinedComponent />
</s247r.ErrorBoundary>
 

8. User Tracking

You can track a specific user by setting up a unique user identifier. If a unique ID is not specified, Site24x7 generates a random GUID and assigns it as the user ID.

Syntax:

s247r.setUserId("user@example.com");
 

9. 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 for session tracking and crash reporting.

Syntax:

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 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 & its load time to site24x7
   s247.addScreen(route.name, loadTime);
...
},[]]);
}


For 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 & 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 first render .
   componentDidUpdate(prevProps, prevState, snapshot){
     const currentTime = Date.now();
    //sends screen name & its load time to site24x7
s247r.addScreen(this.props.route.name, currentTime - this.startTime);
this.startTime = currentTime;
     ...
}
render() {
   return ();
}
}
 

10. 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();
 

11. Crash Application

You can force your application to crash and display an error message saying "Site24x7 RN error."

Syntax:

s247r.crashApplication();

6. Release Notes

Get to know the major and minor fixes done in each release and keep your React Native platform upgraded for the best performance.

Release Notes

Version 1.0.3

2 April 2024

Enhancements:

  • Upgraded to the latest versions of Gradle and the corresponding Android Gradle plugin.
  • Support for React versions 16.8.1 and higher.
  • Declaration files have been introduced to support TypeScript applications in React Native.

Issue fix:

  • The NullPointerException originating from a dependent Android SDK has been resolved.

Version 1.0.2

17 May 2023

Enhancements:

  • User-collected breadcrumbs are flushed once  data is sent through the captureException API, so the same breadcrumbs are not sent multiple times.
  • The error data from the captureException API and the application crash are handled separately.
  • Native bridge API enhancements.

Issue Fix:

  • The NullpointerException has been fixed (when the application switches from background to foreground).

Version 1.0.1

05 August 2022

New Features:

Issue Fixes:

  • Minor fixes.

Version 1.0.0

03 August 2021

Enhancements:

  • Support for tracking HTTP calls with the request method, response time, throughput, status codes, platform, and screens.
  • Support for tracking screens based on the response time, throughput, and count.
  • Support for automatic tracking of views and navigations.
  • Support for manually tracking views.
  • Enabled user sessions tracking with a session timeout of 60 minutes.
  • Support for manually adding user IDs.
  • Support for tracking javascript errors/crashes for the unhandled errors:
    • Console Errors
    • Unhandled Promise Rejections
  • Support for manually adding any other HTTP calls.
Was this document helpful?
Thanks for taking the time to share your feedback. We’ll use your feedback to improve our online help resources.

Help APM Mobile App Monitoring React Native APM