Mobile RUM - React Native SDK

The React Native SDK helps you analyse real user experience across iOS and Android from a single JavaScript codebase. It automatically tracks sessions, instruments HTTP calls, captures JS errors, observes navigation changes, and records native crashes. Use the guides below to install, initialise, and tune the SDK with privacy‑first defaults.

Prerequisites

Use React Native 0.68+. Confirm your version:

1npx npm view react-native version

Install & Instrument Your React Application

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

1import React from 'react';
2import { MiddlewareWrapper, type ReactNativeConfiguration } from '@middleware.io/middleware-react-native';
3import App from './App';
4
5const MiddlewareConfig: ReactNativeConfiguration = {
6  serviceName: 'Mobile-SDK-ReactNative',
7  projectName: 'Mobile-SDK-ReactNative',
8  accountKey: '<MW_API_KEY>',
9  target: '<target-url>',
10  deploymentEnvironment: 'PROD',
11  // Optional: default attributes used for filtering and release correlation
12  globalAttributes: {
13    name: '<your-name>',
14    'app.version': '1.0.0',
15  },
16  // sessionRecording: true // default; see Session Recordings
17};
18
19export default function Root() {
20  return (
21    <MiddlewareWrapper config={MiddlewareConfig}>
22      <App />
23    </MiddlewareWrapper>
24  );
25}

Custom Configurations

Network Instrumentations

Network instrumentation captures request method, URL, response status, content length, and select headers by default. Use the following options to scope or redact what’s collected.

Ignore specific URLs — pass Array<string | RegExp> in ignoreUrls:

1const MiddlewareConfig: ReactNativeConfiguration = {
2  // ...
3  ignoreUrls: [/^\/api\/facts/, /^\/api\/v1\/users\/.*/],
4};

Captured content types (default): application/json, application/text, text/x-component.

Redact headers: pass a Set<string> in ignoreHeaders:

1const MiddlewareConfig: ReactNativeConfiguration = {
2  // ...
3  ignoreHeaders: new Set(['x-ignored-header']),
4};

By default, x-access-token is redacted automatically.

Disable network instrumentation (if needed):

1const MiddlewareConfig: ReactNativeConfiguration = {
2  // ...
3  networkInstrumentation: false,
4};

Tip: If some calls aren’t appearing, check whether they’re performed by libraries that bypass the global fetch/XHR stack, or whether they match an ignoreUrls rule.

Logs

Client logs are lightweight signals correlated with sessions and replays. Use levels to reflect severity; avoid secrets.

1MiddlewareRum.debug('I am debug');
2MiddlewareRum.error('I am error');
3MiddlewareRum.info('I am info');
4MiddlewareRum.warn('I am warn');

Global Attributes

Attach stable keys you’ll filter and chart by (release, tenant, plan). You can set them at init (globalAttributes) and update later with setGlobalAttributes.

1MiddlewareRum.setGlobalAttributes({
2  name: 'Middleware',
3  custom_key: 'some value',
4});

Custom Errors

Crashes are captured automatically. Use reportError for handled exceptions that you still want on the dashboard and tied to the session/replay.

1try {
2  throw new Error('I am error');
3} catch (err) {
4  MiddlewareRum.reportError(err as Error);
5}

Updating Location Information

If your experience depends on user location, you can enrich sessions with latitude and longitude. Only collect what you need for business logic.

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

Session Recordings

Replay helps you see what users saw, which is ideal for diagnosing regressions and validating fixes. Recordings are chunked and uploaded efficiently.

• Max duration: 4 hours per session
• Idle timeout: 15 minutes of inactivity ends a recording; activity creates a new session
• Default: Recording is enabled; disable with sessionRecording: false

Disable recording example:

1const MiddlewareConfig: ReactNativeConfiguration = {
2  serviceName: 'Mobile-SDK-ReactNative',
3  projectName: 'Mobile-SDK-ReactNative',
4  accountKey: 'your-account-token',
5  target: '<target-url>',
6  sessionRecording: false,
7  deploymentEnvironment: 'PROD',
8  globalAttributes: {
9    name: '<your-name>',
10    'app.version': '1.0.0',
11  },
12};

Privacy

Masking happens on device before upload. Wrap any component tree that may contain sensitive content (payments, OTPs, tokens) so it’s blurred in all recordings.

1<MiddlewareSanitizedView>
2  <Component />
3</MiddlewareSanitizedView>

Password fields are masked automatically by default. Review high‑risk screens regularly and expand masking as needed.

Platform Notes (iOS & Android)

• HTTPS required: iOS ATS blocks non‑TLS by default; Android blocks cleartext HTTP on API 28+ unless explicitly allowed. Use HTTPS for APIs and your Middleware target.
• App start coverage: Initialise in your app entry point and keep the wrapper at the top of the tree for complete navigation visibility.
• Performance: Sanitising large trees is safe but may add overhead; prefer wrapping only the regions that actually contain sensitive content.

Troubleshooting

Start here if data isn’t appearing or specific signals are missing.

• No data at all: Verify accountKey and target, ensure the wrapper renders once at app start, and check device connectivity.
• No network events: Confirm networkInstrumentation is enabled and requests aren’t excluded by ignoreUrls. Some low‑level clients may bypass the global stack.
• Nothing in Session Replay: Ensure sessionRecording isn’t set to false, and that the app stayed active (idle timeout is 15 minutes).
• Privacy not applied: Make sure sensitive components are actually wrapped in MiddlewareSanitizedView.
• Navigation not tracked: Keep NavigationContainer under the MiddlewareWrapper and avoid memory‑only routers in production.