Mobile RUM - React Native SDK

The Mobile RUM SDK provides a customizable suite of tools to analyze and optimize the performance of React Native applications. Seamlessly track user sessions and auto-instrument HTTP monitoring, JS errors, navigation tracking for react-navigation, and native crash errors.

Prerequisites

React Native version 0.68 or above. Check your React Native version with the following command:

npx npm view react-native version

Install & Instrument Your React Application

Step 1: Install Middleware React Native SDK

yarn add @middleware.io/middleware-react-native

Step 2: Initialize Middleware React Native SDK

import { MiddlewareWrapper, type ReactNativeConfiguration } from '@middleware.io/middleware-react-native';
        
const MiddlewareConfig: ReactNativeConfiguration = {
    serviceName: 'Mobile-SDK-ReactNative',
    projectName: 'Mobile-SDK-ReactNative',
    accountKey: "<MW_API_KEY>",
    target: '<target-url>',
    deploymentEnvironment: 'PROD',
    globalAttributes: {
        name: '<your-name>',

Custom Configurations

Logs

Create custom logs using the Middleware API:

MiddlewareRum.debug("I am debug");
MiddlewareRum.error("I am error");
MiddlewareRum.info("I am info");
MiddlewareRum.warn("I am warn");

Global Attributes

Set global attributes with the setGlobalAttributes function:

MiddlewareRum.setGlobalAttributes({
    "name": "Middleware",
    "custom_key": "some value"
});

Custom Errors

Report Custom errors with the following try and catch statment:

try{
    throw new Error("I am error")
} catch (err) {
    MiddlewareRum.reportError(err);
}

Updating Location Information

Set the latitude and longitude as global attributes:

MiddlewareRum.updateLocation(latitude: number, longitude: number)

Session Recordings

The maximum session recording duration is four hours. If users are inactive for more than 15 minutes at a time, session recordings will be stopped. If users exceed more than four hours in a single session or become active again after the 15-minute inactivity timeout, a new session will be automatically created.

Session recording is enabled by default. Disable this feature by passing sessionRecording: false in the following configuration:

const MiddlewareConfig: ReactNativeConfiguration = {
    serviceName: 'Mobile-SDK-ReactNative',
    projectName: '$Mobile-SDK-ReactNative',
    accountKey: 'your-account-token',
    target: '<target-url>',
    sessionRecording: false,
    deploymentEnvironment: 'PROD',
    globalAttributes: {
        name: '<your-name>',
        'app.version': '1.0.0'

Privacy

Blur sensitive information in session recordings by embedding the following JSX component:

<MiddlewareSanitizedView>
  <Component/>
</MiddlewareSanitizedView>