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>

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>