Record React Native sessions

Use the sessionReplay module in React Native hybrid applications.

Prerequisites

Module configuration

The session replay module is included in the Splunk RUM React Native agent and is enabled by default. This module captures user interactions and visual changes within your application, allowing you to replay sessions step by step.

Session replay being enabled allows recording, but does not start it automatically. To begin recording, call start().

PYTHON 
import { SplunkRum, SessionReplayModuleConfiguration } from '@splunk/otel-react-native';

await SplunkRum.install(config, [
  new SessionReplayModuleConfiguration(true, 0.2),
]);

isEnabled: Enables or disables session replay. When disabled, recording cannot be started.

samplingRate: Defines the sampling rate for session replay recordings. Accepts any value between 0 and 1. For example, 0 captures no recordings, 0.2 captures 20% of sessions, and 1 captures all sessions. The default value is 0.2 (20%).

Session replay instance

To access session replay APIs, obtain the session replay instance from the SplunkSessionReplay class.
JAVASCRIPT 
import { SplunkSessionReplay } from '@splunk/otel-session-replay-react-native';

const sessionReplay = SplunkSessionReplay.instance;

Start or stop recording

Start or stop session replay recording at any time using start() and stop(). Subsequent calls to start() or stop() have no effect if the recording state is unchanged.
PYTHON 
import { SplunkSessionReplay } from '@splunk/otel-session-replay-react-native';

// Start recording
await SplunkSessionReplay.instance.start();

// Stop recording
await SplunkSessionReplay.instance.stop();

Check recording status

To determine whether session replay is currently recording, use the following API:
JAVASCRIPT 
import { SplunkSessionReplay } from '@splunk/otel-session-replay-react-native';

const state = await SplunkSessionReplay.instance.getState();

Set the recording mask

To protect user privacy, configure session replay to mask sensitive areas of the application UI.

Use RecordingMask to define regions that should not be recorded.
PYTHON 
import { SplunkSessionReplay, MaskType } from '@splunk/otel-session-replay-react-native';

// Mask a region of the screen
await SplunkSessionReplay.instance.setRecordingMask({
  elements: [
    {
      rect: { x: 0, y: 100, width: 400, height: 200 },
      type: MaskType.COVERING,
    },
  ],
});

// Mask a region with an erasing hole to reveal part of the covered area
await SplunkSessionReplay.instance.setRecordingMask({
  elements: [
    {
      rect: { x: 0, y: 100, width: 400, height: 200 },
      type: MaskType.COVERING,
    },
    {
      rect: { x: 50, y: 130, width: 100, height: 40 },
      type: MaskType.ERASING,
    },
  ],
});

// Remove the mask
await SplunkSessionReplay.instance.setRecordingMask(null);
Only one RecordingMask can be active at a time. A mask can include multiple MaskElement instances to cover multiple areas.
MaskElement can be one of two types:
Mask type How it works
MaskType.COVERING The area defined by the element MaskRect is not recorded.
MaskType.ERASING The area defined by the element MaskRect is recorded even if a previous MaskElement inside a list was covering the area.

Recording mask example

The following example describes a RecordingMask use case.

The blue box in this first example represents a video_item element. The red box represents a video_item_image element.

The video_item element in this second example has a .covering value. The .covering value masks the element in the session recording.