Mobile RUM - React Native SDK
React Native RUM - Setup & Installation Docs | Middleware
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: '<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:
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",
"app.version": "1.0.0",
"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: '<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:
<MiddlewareSanitizedView>
<Component/>
</MiddlewareSanitizedView>
Was this page helpful?