Session Replay

Open in ChatGPTOpen in Claude

Session Replay

Session Replay allows you to record and replay user sessions to understand user behavior and debug issues.

Initialize Session Replay

To initialize Session Replay, call SessionReplay.init(options) with the desired configuration options.

import { SessionReplay } from '@coralogix/react-native-plugin';

await SessionReplay.init({
  captureScale: 0.5,                    // Scale factor for screenshots (0.0 to 1.0)
  captureCompressQuality: 0.8,         // Compression quality for screenshots (0.0 to 1.0)
  sessionRecordingSampleRate: 100,      // Percentage of sessions to record (0 to 100)
  autoStartSessionRecording: true,      // Automatically start recording when initialized
  maskAllTexts: true,                   // Mask all text content by default (optional, default: true)
  textsToMask: ['password', '^card.*'], // Array of strings/regex patterns for specific text masking (optional)
  maskAllImages: false,                 // Mask all images (optional, default: false)
});

Options:

• captureScale (required): Scale factor for screenshots. Must be between 0.0 and 1.0. Lower values reduce file size but may decrease quality.
• captureCompressQuality (required): Compression quality for screenshots. Must be between 0.0 and 1.0. Higher values improve quality but increase file size.
• sessionRecordingSampleRate (required): Percentage of sessions to record. Must be between 0 and 100. Use 100 to record all sessions.
• autoStartSessionRecording (required): If true, recording starts automatically after initialization. If false, you must manually call startSessionRecording().
• maskAllTexts (optional): If true, all text content is masked by default. Defaults to true.
• textsToMask (optional): Array of strings or regex patterns to mask specific text content. Only used when maskAllTexts is false.
• maskAllImages (optional): If true, all images are masked. Defaults to false.

Check Initialization Status

Check if Session Replay has been initialized:

const isInited = await SessionReplay.isInited();
console.log('Session Replay initialized:', isInited);

Check Recording Status

Check if Session Replay is currently recording:

const isRecording = await SessionReplay.isRecording();
console.log('Session Replay recording:', isRecording);

Start Recording

Manually start session recording:

SessionReplay.startSessionRecording();

Note: If autoStartSessionRecording is set to true in the init options, recording starts automatically and you don't need to call this method.

Stop Recording

Manually stop session recording:

SessionReplay.stopSessionRecording();

Capture Screenshot

Manually capture a screenshot during a session:

SessionReplay.captureScreenshot();

This is useful for capturing specific moments in the user journey that you want to highlight.

Shutdown Session Replay

Shutdown Session Replay to clean up resources:

await SessionReplay.shutdown();

Masking Sensitive Content

To mask sensitive content in your app, use the onLayout prop with SessionReplay.maskView on any View component that should be masked:

import { SessionReplay } from '@coralogix/react-native-plugin';

<View onLayout={SessionReplay.maskView}>
  <Text>This text will be masked in session replay</Text>
  <TextInput placeholder="Password" />
</View>

The SessionReplay.maskView function accepts a LayoutChangeEvent and will mask the view in session replay recordings. It works on both the legacy and the New Architecture (Fabric).