Skip to content

React Native Session Replay

Prerequisites

  • Ensure you have set up and initialized the @cloudcare/react-native-mobile RUM configuration and enabled View monitoring collection.
  • React Native Session Replay requires @cloudcare/react-native-mobile@0.4.0 or higher.
  • Starting from @cloudcare/react-native-mobile@0.4.1, the Session Replay capability is provided by @cloudcare/react-native-session-replay. Please install both @cloudcare/react-native-mobile and @cloudcare/react-native-session-replay, and keep their version numbers consistent.
  • It is recommended to use the official stable version displayed by the badge at the top of the document. Pre-release versions such as alpha and beta are not recommended.
  • If you wish to preview new capabilities early, follow the latest features, or track changes not yet officially released, you can visit the GitHub repository for the React Native SDK and related changelogs: GuanceCloud/datakit-react-native.

Configuration

npm install @cloudcare/react-native-mobile@last_version @cloudcare/react-native-session-replay@last_version
# or
yarn add @cloudcare/react-native-mobile@last_version @cloudcare/react-native-session-replay@last_version

Code Sample

The following example applies to version 0.4.1 and above. Session Replay related APIs are imported from @cloudcare/react-native-session-replay.

import {
  FTReactNativeSessionReplay,
  FTSessionReplayConfig,
  TextAndInputPrivacyLevel,
} from '@cloudcare/react-native-session-replay';

let sessionReplayConfig: FTSessionReplayConfig = {
  sampleRate: 1,
  textAndInputPrivacy: TextAndInputPrivacyLevel.MASK_SENSITIVE_INPUTS,
};
await FTReactNativeSessionReplay.sessionReplayConfig(sessionReplayConfig);
Property Type Required Description
sampleRate number No Sampling rate, value range [0,1], 0 means no collection, 1 means full collection, default is 1. This sampling rate is applied on top of the RUM sampling rate.
sessionReplayOnErrorSampleRate number No Session Replay sampling rate for error scenarios, value range [0,1], 0 means no collection, 1 means full collection.
privacy SessionReplayPrivacy No Sets the privacy level for content masking in Session Replay. This parameter is deprecated, retained for backward compatibility. It is recommended to use touchPrivacy, textAndInputPrivacy, imagePrivacy for fine-grained privacy configuration.
SessionReplayPrivacy.ALLOW: Does not mask privacy data except for sensitive input controls, such as password fields.
SessionReplayPrivacy.MASK_USER_INPUT: Masks some user input data, including text in input fields, Switch, etc.
SessionReplayPrivacy.MASK: Masks privacy data, including text, Switch, etc. Will be deprecated soon, can be used for compatibility. It is recommended to use touchPrivacy, textAndInputPrivacy, imagePrivacy for privacy settings.
touchPrivacy TouchPrivacyLevel No Sets the privacy level for touch behavior in Session Replay.
TouchPrivacyLevel.SHOW: Shows touch behavior;
TouchPrivacyLevel.HIDE: Hides touch behavior. Overrides the privacy configuration after setting, supported in SDK version 0.4.1 and above.
textAndInputPrivacy TextAndInputPrivacyLevel No Sets the privacy level for text and input content in Session Replay.
TextAndInputPrivacyLevel.MASK_SENSITIVE_INPUTS: Masks only sensitive inputs;
TextAndInputPrivacyLevel.MASK_ALL_INPUTS: Masks all input content;
TextAndInputPrivacyLevel.MASK_ALL: Masks all text and input content. Overrides the privacy configuration after setting, supported in SDK version 0.4.1 and above.
imagePrivacy ImagePrivacyLevel No Sets the privacy level for image content in Session Replay.
ImagePrivacyLevel.MASK_NON_BUNDLED_ONLY: Masks non-bundled images only;
ImagePrivacyLevel.MASK_ALL: Masks all images;
ImagePrivacyLevel.MASK_NONE: Does not mask images. Overrides the privacy configuration after setting, supported in SDK version 0.4.1 and above.

View Privacy Overrides

Supported in SDK version 0.4.1 and above.

FTSessionReplayView is used to set Session Replay privacy overrides for a local view tree. This component behaves the same as the React Native View and can be used to wrap components that require separate privacy policies, or it can directly replace an existing View. The privacy override applies to its child views; when multiple layers of overrides exist, the child view uses the privacy configuration of the nearest parent.

import {
  FTSessionReplayView,
  ImagePrivacyLevel,
  TextAndInputPrivacyLevel,
  TouchPrivacyLevel,
} from '@cloudcare/react-native-session-replay';
Component Purpose Properties
FTSessionReplayView.Privacy Customizes the text, input, image, and touch privacy levels within child views, or hides the entire child view. textAndInputPrivacy?: TextAndInputPrivacyLevel
imagePrivacy?: ImagePrivacyLevel
touchPrivacy?: TouchPrivacyLevel
hide?: boolean
FTSessionReplayView.MaskAll Applies the strictest masking strategy to child views, masking text, inputs, and images. showTouch?: boolean, when set to true, shows touch behavior.
FTSessionReplayView.MaskNone Applies a lower masking strategy to child views; non-sensitive content and images are displayed as much as possible. No additional properties.
FTSessionReplayView.Hide Completely hides child view content in Session Replay. No additional properties.

Wrapping Local Components

import { TextInput, View } from 'react-native';
import { FTSessionReplayView } from '@cloudcare/react-native-session-replay';

export function UserForm() {
  return (
    <View>
      <FTSessionReplayView.MaskAll showTouch={true}>
        <TextInput placeholder="First Name" value="Data" />
        <TextInput placeholder="Last Name" value="Flux" />
      </FTSessionReplayView.MaskAll>
    </View>
  );
}

Replacing Existing View

FTSessionReplayView inherits the properties of the React Native View. The style from the original View can be passed directly.

import { StyleSheet, Text, TextInput } from 'react-native';
import { FTSessionReplayView } from '@cloudcare/react-native-session-replay';

export function ProfileCard() {
  return (
    <FTSessionReplayView.MaskNone style={styles.card}>
      <Text>Public display name</Text>
      <TextInput placeholder="Email" value="user@example.com" />
    </FTSessionReplayView.MaskNone>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 12,
    borderRadius: 8,
    backgroundColor: '#FFFFFF',
  },
});

Combining Different Privacy Strategies

import {
  FTSessionReplayView,
  ImagePrivacyLevel,
  TextAndInputPrivacyLevel,
  TouchPrivacyLevel,
} from '@cloudcare/react-native-session-replay';

export function Checkout() {
  return (
    <FTSessionReplayView.Privacy
      textAndInputPrivacy={TextAndInputPrivacyLevel.MASK_SENSITIVE_INPUTS}
      imagePrivacy={ImagePrivacyLevel.MASK_NONE}
      touchPrivacy={TouchPrivacyLevel.SHOW}>
      {/* General content */}
      <FTSessionReplayView.MaskAll showTouch={true}>
        {/* Form content requiring strong masking */}
      </FTSessionReplayView.MaskAll>
      <FTSessionReplayView.Hide>
        {/* Content not intended to be shown in replay */}
      </FTSessionReplayView.Hide>
    </FTSessionReplayView.Privacy>
  );
}

When using FTSessionReplayView.Hide, the child view will be hidden in Session Replay.

For WebViews, it is recommended to prioritize using the Web SDK's privacy configuration to manage content within the page; the view privacy overrides on the React Native side primarily affect the native view tree.

Code and Configuration Reference