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 を両方インストールし、バージョンを合わせてください。
ドキュメント上部のバッジに表示されている正式な安定バージョンを優先して使用し、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
# または
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 のコード呼び出し