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 prioritize using the official stable version displayed by the badge at the top of the document. Pre-release versions like alpha, beta are not recommended.
If you wish to experience new capabilities early, follow the latest features, or track changes not yet officially released, you can visit GitHub to follow the React Native SDK repository 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 input fields. `SessionReplayPrivacy.MASK_USER_INPUT`: Masks user-input data, including text in input fields, Switch, etc. `SessionReplayPrivacy.MASK`: Masks privacy data, including text, Switch, etc. Will be deprecated soon, compatible for now, recommend using `touchPrivacy`, `textAndInputPrivacy`, `imagePrivacy` for privacy settings
touchPrivacy	TouchPrivacyLevel	No	Sets the privacy level for touch behaviors in SESSION REPLAY. `TouchPrivacyLevel.SHOW`: Shows touch behaviors; `TouchPrivacyLevel.HIDE`: Hides touch behaviors. Overrides the configuration of `privacy` when set, 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 configuration of `privacy` when set, 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 configuration of `privacy` when set, 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 directly replace existing View components. Privacy overrides apply to its child views; when multiple layers of overrides exist, child views use 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 privacy levels for text, input, images, and touch within child views, or hides the entire child view.	`textAndInputPrivacy?: TextAndInputPrivacyLevel` `imagePrivacy?: ImagePrivacyLevel` `touchPrivacy?: TouchPrivacyLevel` `hide?: boolean`
`FTSessionReplayView.MaskAll`	Applies the strictest masking policy to child views, masking text, input, and images.	`showTouch?: boolean`, set to `true` to show touch behaviors.
`FTSessionReplayView.MaskNone`	Applies a lower masking policy 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 React Native View, and 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 Policies¶

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}>
      {/* Normal 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, child views will be hidden in SESSION REPLAY.

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

Code and Configuration Reference¶

ReactNative Demo Code Sample