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
- Getting started
- Install in iOS
- Install in android
- Usage in react native app
- APIs to capture other parameters
- 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
-
To install using NPM, run the command below.
$ npm install react-native-site24x7-rn --save
-
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
-
Add a source to the top of the podfile in your project directory/ios/.
source 'https://github.com/site24x7/MobileAPM-IOS-SDK.git' -
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
-
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' }
...
}} -
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
- Import the s247r module into the initial .js file (App.js) or wherever it is required.
import {s247r} from 'react-native-site24x7-rn';
-
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
- Initialize Network Monitoring
- Initialize Error Monitoring
- Start & Stop Transactions
- Group operations within a transaction using components
- Capture Exception
- Bread Crumbs
- Error Boundary
- User Tracking
- Screen Tracking
- Flush Data
- 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:
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:
"trackUnhandledErrors" : true,
"trackConsoleErrors" : false,
"trackUnhandledRejections" : true,
"trackNativeErrors": false
}
3. Start & Stop Transactions
Use the following functions to start and stop the transactions.
Syntax:
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:
//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:
6. Bread Crumbs
Use the function below to add breadcrumbs manually.
Syntax:
Example:
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:
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:
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:
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:
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:
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:
11. Crash Application
You can force your application to crash and display an error message saying "Site24x7 RN error."
Syntax:
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.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.
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.