Implement Session Replay (React Native)

npm install @mixpanel/react-native-session-replay

yarn add @mixpanel/react-native-session-replay

cd ios && pod install

import {
  MPSessionReplay,
  MPSessionReplayConfig,
  MPSessionReplayMask,
} from "@mixpanel/react-native-session-replay";

// Initialize session replay
const config = new MPSessionReplayConfig({
  wifiOnly: false,
  recordingSessionsPercent: 100,
  autoStartRecording: true,
  autoMaskedViews: [MPSessionReplayMask.Image, MPSessionReplayMask.Text],
  flushInterval: 5,
  enableLogging: true,
});

await MPSessionReplay.initialize(token, distinctId, config).catch((error) => {
  console.error("Initialization error:", error);
});

// Control recording
await MPSessionReplay.startRecording();
await MPSessionReplay.stopRecording();

// Check recording status
const recording = await MPSessionReplay.isRecording();

import {
  MPSessionReplay,
  MPSessionReplayConfig,
  MPDataResidency,
} from "@mixpanel/react-native-session-replay";

const config = new MPSessionReplayConfig({
  recordingSessionsPercent: 100,
  serverURL: MPDataResidency.EU,
});

await MPSessionReplay.initialize(token, distinctId, config);

const config = new MPSessionReplayConfig({
  serverURL: "https://mixpanel-proxy.yourcompany.com",
});

const config = new MPSessionReplayConfig({
  wifiOnly: boolean,                // Default: true
  autoStartRecording: boolean,      // Default: true
  recordingSessionsPercent: number, // Default: 100 (range: 0-100)
  autoMaskedViews: MPSessionReplayMask[], // Default: all types
  flushInterval: number,            // Default: 10 (seconds)
  enableLogging: boolean,           // Default: false
});

enum MPSessionReplayMask {
  Text = "text", // Text inputs and labels
  Web = "web", // WebView content
  Map = "map", // Map views (iOS only)
  Image = "image", // Image components
}

import {
  MPSessionReplayConfig,
  MPSessionReplayMask,
} from "mixpanel-react-native-session-replay";

// Only mask text inputs and images
const config = new MPSessionReplayConfig({
  autoMaskedViews: [MPSessionReplayMask.Text, MPSessionReplayMask.Image],
});

initialize(
  token: string,
  distinctId: string,
  config: MPSessionReplayConfig
): Promise<void>

const config = new MPSessionReplayConfig({
  autoStartRecording: true,
  enableLogging: __DEV__, // Enable logging in development
});

try {
  await MPSessionReplay.initialize("YOUR_TOKEN", "user-123", config);
  console.log("Session Replay initialized");
} catch (error) {
  console.error("Failed to initialize:", error);
}

startRecording(): Promise<void>

await MPSessionReplay.startRecording();

stopRecording(): Promise<void>

await MPSessionReplay.stopRecording();

isRecording(): Promise<boolean>

const recording = await MPSessionReplay.isRecording();
if (recording) {
  console.log("Session is being recorded");
}

identify(distinctId: string): Promise<void>

// Update user ID after authentication
await MPSessionReplay.identify("authenticated-user-456");

const config = new MPSessionReplayConfig({
  autoMaskedViews: [
    MPSessionReplayMask.Text, // Masks all text inputs
    MPSessionReplayMask.Image, // Masks all images
    MPSessionReplayMask.Web, // Masks all WebViews
    MPSessionReplayMask.Map, // Masks map views (iOS only)
  ],
});

import { MPSessionReplayView } from 'mixpanel-react-native-session-replay';

// Mask sensitive content
<MPSessionReplayView sensitive={true}>
  <TextInput
    value={password}
    onChangeText={setPassword}
    secureTextEntry
  />
  <Text>Social Security Number: {ssn}</Text>
</MPSessionReplayView>

// Explicitly mark content as safe (not masked)
<MPSessionReplayView sensitive={false}>
  <Text>Public information that should always be visible</Text>
</MPSessionReplayView>

import React, { useState } from "react";
import { View, TextInput, Image, Text } from "react-native";
import { MPSessionReplayView } from "mixpanel-react-native-session-replay";
import { WebView } from "react-native-webview";

function ProfileScreen() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <View>
      {/* Public information - not masked */}
      <Text>Welcome to Your Profile</Text>

      {/* Sensitive user data - masked */}
      <MPSessionReplayView sensitive={true}>
        <View>
          <Text>Email: {email}</Text>
          <TextInput
            value={email}
            onChangeText={setEmail}
            placeholder="email@example.com"
          />

          <Text>Password:</Text>
          <TextInput
            value={password}
            onChangeText={setPassword}
            secureTextEntry
          />

          <Image source={{ uri: profilePhotoUrl }} />
        </View>
      </MPSessionReplayView>

      {/* WebView masked by default if Web type is in autoMaskedViews */}
      <WebView source={{ uri: "https://example.com/terms" }} />
    </View>
  );
}

import {
  MPSessionReplay,
  MPSessionReplayConfig,
  MPWireframesOptions,
} from "@mixpanel/react-native-session-replay";

const config = new MPSessionReplayConfig({
  wireframesOptions: new MPWireframesOptions(),
});

await MPSessionReplay.initialize(token, distinctId, config);

<MPSessionReplayView sensitive wireframeText="Card number">
  <TextInput value={cardNumber} onChangeText={setCardNumber} />
</MPSessionReplayView>

import {
  MPSensitiveRule,
  MPWireframesOptions,
} from "@mixpanel/react-native-session-replay";

new MPWireframesOptions({
  sensitiveRules: [
    MPSensitiveRule.redactRegex(/\d{3}-\d{2}-\d{4}/, "[SSN]"),
    MPSensitiveRule.strip("Bearer "),
  ],
});

import {
  MPDebugOptions,
  MPSessionReplayConfig,
  MPWireframesOptions,
} from "@mixpanel/react-native-session-replay";

const config = new MPSessionReplayConfig({
  wireframesOptions: new MPWireframesOptions(),
  debugOptions: new MPDebugOptions({
    overlayColors: null,
    wireframeEmitter: (snapshot) => console.log(JSON.stringify(snapshot)),
  }),
});