react-native-site24x7-rn

Site24x7 React Native SDK allows users to track their mobile applications' http calls, crashes, screen load time and custom data by adding transactions and grouping them with components, individual user and their sessions for optimizing the app performance.

Getting Started

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

To install with NPM, run:

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

Link the module with the react native app ( Mostly automatic installation )

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

Installation steps for Android

1.Navigate to the android folder within the project directory using Android Studio or any other platform of choice for Android development. Add the following to 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 on the IDE.

Installation steps for iOS

Navigate to the iOS folder and execute the following command.Add source in top of the podfile located at your project directory/ios/

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

Run the below command in the same directory

pod repo update
pod install

Usage in React Native App :

Import the s247r module in initial js file(App.js) or wherever needed :

import {s247r} from 'react-native-site24x7-rn';

Add the following 3 steps for application code in App.js after import statements ( make changes accordingly)

1. Start Monitoring With Config :

const config = {
  "apiKey" : "your_app_key",
  "uploadInterval" : 20
}

Starts Tracking with basic configuration (apiKey, uploadInterval)

s247r.startMonitoringWithConfig(config);

1. initializeNetworkMonitoring :

Start tracking network http calls with the option to configure http calls that should be ignored

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

3. initializeErrorMonitoring :

Start tracking crashes with options to enable, disable tracking error types (trackUnhandledErrors,trackConsoleErrors,trackUnhandledRejections,trackNativeErrors)

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

s247r.initializeErrorMonitoring(errorConfig);

4. Screen Tracking :

To calculate screens along with their load times. Screen data is useful for session tracking and crash reporting . So it is highly recommended to push the screens data to site24x7 .

s247r.addScreen("home_screen", 55);

We've a sample code snippet of how screen data with load time can be captured and pushed to site24x7 servers .

For Function Component :

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 :

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

5. User Tracking :

You can track the particular user by setting a unique user identifier . If unique id is not set , Site24x7 generates a random guid and sets it as user id.

s247r.setUserId("[email protected]");

6. Start & Stop Transactions :

To start and stop the transactions, use the following functions.

s247r.startTransaction("listing_blogs");

s247r.stopTransaction("listing_blogs");

7. Group operations within a transaction using components :

Within a transaction you can start and stop unique component. You can start more than one component in one transaction.

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

8. Flush Data :

Flushes the data to site24x7 immediately instead of the configured upload poll interval ( the default value is 60 seconds ) .

s247r.flush();

9. Crash Application :

Crashes your application with error message "Site24x7 RN error" .

s247r.crashApplication();

Version 1.0.1 :

10.Capture Exception :

Manually capture exceptions, occuring in catch blocks. ( Initialize error monitoring before using this api )

s247r.captureException(error)

11.Bread Crumbs :

Use the below function to manually add breadcrumbs.

s247r.addBreadCrumb(event, message)
ex : s247r.addBreadCrumb("Info", "download completed")

12. Error Boundary :

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. Add the custom fallback component using the below code snippet.

Note : Use only function component for fallback prop.

const FallbackComponent = () => { 
  return (
    <View>
      <Text> wrong in the component </Text> 
    </View>
)}

<s247r.ErrorBoundary fallback={FallbackComponent}>
<userDefinedComponent />
</s247r.ErrorBoundary>