React Native 会话重放¶

前置条件¶

确保您已设置并初始化 @cloudcare/react-native-mobile RUM 配置，并开启 View 的监控采集。
React Native 会话重放需要使用 @cloudcare/react-native-mobile@0.4.0 及以上版本。
从 @cloudcare/react-native-mobile@0.4.1 起，会话重放能力由 @cloudcare/react-native-session-replay 提供。请同时安装 @cloudcare/react-native-mobile 和 @cloudcare/react-native-session-replay，并保持两个库的版本号一致。
建议优先使用文档顶部 badge 显示的正式稳定版本，不建议使用 alpha、beta 等预发布版本。
如果您希望提前体验新能力、关注最新特性或跟进未正式发布的变更，可以前往 GitHub 关注 React Native SDK 仓库及相关更新日志：GuanceCloud/datakit-react-native。

配置¶

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

代码调用¶

以下示例适用于 0.4.1 及以上版本。会话重放相关 API 从 @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);

属性	类型	必须	含义
sampleRate	number	否	采样率，取值范围 [0,1]，0 表示不采集，1 表示全采集，默认值为 1。此采样率是 RUM 采样基础上的采样率。
sessionReplayOnErrorSampleRate	number	否	错误场景下的 Session Replay 采样率，取值范围 [0,1]，0 表示不采集，1 表示全采集。
privacy	SessionReplayPrivacy	否	设置 Session Replay 中内容屏蔽的隐私级别。该参数已废弃，保留用于兼容旧版本，建议优先使用 `touchPrivacy`、`textAndInputPrivacy`、`imagePrivacy` 进行细粒度隐私配置。 `SessionReplayPrivacy.ALLOW`：除了敏感输入控件外不遮蔽隐私数据，例如密码输入框。 `SessionReplayPrivacy.MASK_USER_INPUT`：遮蔽用户输入的部分数据，包括输入框中文字、Switch 等。 `SessionReplayPrivacy.MASK`：遮蔽隐私数据，包括文字、Switch 等。即将废弃，可兼容使用，建议优先使用 `touchPrivacy`、`textAndInputPrivacy`、`imagePrivacy` 进行隐私设置
touchPrivacy	TouchPrivacyLevel	否	设置 Session Replay 中触摸行为的隐私级别。 `TouchPrivacyLevel.SHOW`：显示触摸行为； `TouchPrivacyLevel.HIDE`：隐藏触摸行为。设置后覆盖 `privacy` 的配置，SDK 0.4.1 及以上版本支持。
textAndInputPrivacy	TextAndInputPrivacyLevel	否	设置 Session Replay 中文本和输入内容的隐私级别。 `TextAndInputPrivacyLevel.MASK_SENSITIVE_INPUTS`：只遮蔽敏感输入； `TextAndInputPrivacyLevel.MASK_ALL_INPUTS`：遮蔽所有输入内容； `TextAndInputPrivacyLevel.MASK_ALL`：遮蔽所有文本和输入内容。设置后覆盖 `privacy` 的配置，SDK 0.4.1 及以上版本支持。
imagePrivacy	ImagePrivacyLevel	否	设置 Session Replay 中图片内容的隐私级别。 `ImagePrivacyLevel.MASK_NON_BUNDLED_ONLY`：遮蔽非内置图片； `ImagePrivacyLevel.MASK_ALL`：遮蔽所有图片； `ImagePrivacyLevel.MASK_NONE`：不遮蔽图片。设置后覆盖 `privacy` 的配置，SDK 0.4.1 及以上版本支持。

视图隐私覆盖¶

SDK 0.4.1 及以上版本支持。

FTSessionReplayView 用于对局部视图树设置 Session Replay 隐私覆盖。该组件表现与 React Native View 一致，可用于包裹需要单独设置隐私策略的组件，也可以直接替换已有的 View。隐私覆盖会作用于其子视图；当存在多层覆盖时，子视图会使用距离最近的父级隐私配置。

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

组件	作用	属性
`FTSessionReplayView.Privacy`	自定义子视图中的文本、输入、图片、触摸隐私级别，也可隐藏整个子视图。	`textAndInputPrivacy?: TextAndInputPrivacyLevel` `imagePrivacy?: ImagePrivacyLevel` `touchPrivacy?: TouchPrivacyLevel` `hide?: boolean`
`FTSessionReplayView.MaskAll`	对子视图应用最严格的遮蔽策略，遮蔽文本、输入和图片。	`showTouch?: boolean`，设置为 `true` 时显示触摸行为。
`FTSessionReplayView.MaskNone`	对子视图应用较低的遮蔽策略，非敏感内容和图片会尽量按原样展示。	无额外属性。
`FTSessionReplayView.Hide`	在 Session Replay 中完全隐藏子视图内容。	无额外属性。

包裹局部组件¶

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>
  );
}

替换已有 View¶

FTSessionReplayView 继承 React Native View 的属性，原有 View 上的 style 可以直接传入。

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',
  },
});

组合不同隐私策略¶

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}>
      {/* 普通内容 */}
      <FTSessionReplayView.MaskAll showTouch={true}>
        {/* 需要强遮蔽的表单内容 */}
      </FTSessionReplayView.MaskAll>
      <FTSessionReplayView.Hide>
        {/* 不希望在回放中展示的内容 */}
      </FTSessionReplayView.Hide>
    </FTSessionReplayView.Privacy>
  );
}

使用 FTSessionReplayView.Hide 时，子视图会在 Session Replay 中被隐藏。

对于 WebView，建议优先使用 Web 端 SDK 的隐私配置管理页面内内容；React Native 侧的视图隐私覆盖主要作用在原生视图树上。

代码和配置参考¶

ReactNative Demo 代码调用