Mobile APM for React Native Applications

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`

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

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. 

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

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
12. Exclude native screens

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
}
s247r.initializeErrorMonitoring(errorConfig);

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.

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.

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("[email protected]");

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

12. Exclude native screens

You can exclude native screens from tracking by using the below custom API.

Syntax:

s247r.excludeNativeScreens(["RNSContainerNavigationController", "RNSScreen"]);

Version 1.0.4

10 June 2024

Enhancement:

• The custom API excludeNativeScreens is introduced to exclude/ignore the screens automatically collected by native agents.

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.

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.

Version 1.0.1

05 August 2022

New Features:

• Support for error boundaries.
• Support for manually adding breadcrumbs.
• Support for manually capturing exceptions that occur in catch blocks.

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.