> ## Documentation Index
> Fetch the complete documentation index at: https://mw-docs.middleware.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

```shell Shell theme={null}
npx npm view react-native version
```

<Note>[React Navigation 5 & 6](https://reactnavigation.org/docs/getting-started#installation) and [Expo](https://docs.expo.dev/) are both supported by the Middleware React Native SDK </Note>

# Install & Instrument Your React Application

### Step 1: Install Middleware React Native SDK

```Shell Shell theme={null}
yarn add @middleware.io/middleware-react-native
```

### Step 2: Initialize Middleware React Native SDK

```javascript JavaScript theme={null}
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 JavaScript theme={null}
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 JavaScript theme={null}
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 JavaScript theme={null}
try{
    throw new Error("I am error")
} catch (err) {
    MiddlewareRum.reportError(err);
}
```

### Updating Location Information

Set the latitude and longitude as global attributes:

```javascript JavaScript theme={null}
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 JavaScript theme={null}
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:

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

```JSX JSX theme={null}
<MiddlewareSanitizedView>
  <Component/>
</MiddlewareSanitizedView>
```