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:

Shell

npx npm view react-native version

React Navigation 5 & 6 and Expo are both supported by the Middleware React Native SDK

Install & Instrument Your React Application

Step 1: Install Middleware React Native SDK

Shell

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

Step 2: Initialize Middleware React Native SDK

JavaScript

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

export default function App() { 
    return (
      <MiddlewareWrapper configuration={MiddlewareConfig}>
        // Application Components
      </MiddlewareWrapper>
    );
  }

Custom Configurations

Logs

Create custom logs using the Middleware API:

JavaScript

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:

JavaScript

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

Custom Errors

Report Custom errors with the following try and catch statment:

JavaScript

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

Updating Location Information

Set the latitude and longitude as global attributes:

JavaScript

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:

JavaScript

const MiddlewareConfig: ReactNativeConfiguration = {
    serviceName: 'Mobile-SDK-ReactNative',
    projectName: '$Mobile-SDK-ReactNative',
    accountKey: '<middleware-account-key>',
    target: '<target-url>',
    sessionRecording: false,
    deploymentEnvironment: 'PROD',
    globalAttributes: {
        name: '<your-name>',
    },
};

Privacy

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

User passwords are automatically masked by default. Other sensitive information like credit card data and API keys must be masked manually.

JSX

<MiddlewareSanitizedView>
  <Component/>
</MiddlewareSanitizedView>

Middleware Docs

Mobile RUM - React Native SDK

Prerequisites

Install & Instrument Your React Application

Step 1: Install Middleware React Native SDK

Step 2: Initialize Middleware React Native SDK

Custom Configurations

Logs

Global Attributes

Custom Errors

Updating Location Information

Session Recordings

Privacy

​Prerequisites

​Install & Instrument Your React Application

​Step 1: Install Middleware React Native SDK

​Step 2: Initialize Middleware React Native SDK

​Custom Configurations

​Logs

​Global Attributes

​Custom Errors

​Updating Location Information

​Session Recordings

​Privacy

Prerequisites

Install & Instrument Your React Application

Step 1: Install Middleware React Native SDK

Step 2: Initialize Middleware React Native SDK

Custom Configurations

Logs

Global Attributes

Custom Errors

Updating Location Information

Session Recordings

Privacy