콘텐츠로 이동

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
# 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 아니요 오류 발생 시 세션 리플레이 샘플링 비율, 범위 [0,1], 0은 수집 안 함, 1은 전체 수집입니다.
privacy SessionReplayPrivacy 아니요 세션 리플레이에서 콘텐츠 마스킹의 프라이버시 수준을 설정합니다. 이 매개변수는 폐기되었으며 이전 버전과의 호환성을 위해 유지됩니다. touchPrivacy, textAndInputPrivacy, imagePrivacy를 사용한 세부적인 프라이버시 설정을 권장합니다.
SessionReplayPrivacy.ALLOW: 비밀번호 입력 필드와 같은 민감한 입력 컨트롤을 제외한 프라이버시 데이터를 마스킹하지 않습니다.
SessionReplayPrivacy.MASK_USER_INPUT: 입력 필드의 텍스트, Switch 등 사용자 입력 데이터의 일부를 마스킹합니다.
SessionReplayPrivacy.MASK: 텍스트, Switch 등 프라이버시 데이터를 마스킹합니다. 곧 폐기 예정이며, 호환되어 사용 가능합니다. touchPrivacy, textAndInputPrivacy, imagePrivacy를 사용한 프라이버시 설정을 권장합니다.
touchPrivacy TouchPrivacyLevel 아니요 세션 리플레이에서 터치 동작의 프라이버시 수준을 설정합니다.
TouchPrivacyLevel.SHOW: 터치 동작을 표시합니다.
TouchPrivacyLevel.HIDE: 터치 동작을 숨깁니다. 설정 시 privacy 구성을 덮어씁니다. SDK 0.4.1 이상 버전에서 지원됩니다.
textAndInputPrivacy TextAndInputPrivacyLevel 아니요 세션 리플레이에서 텍스트 및 입력 콘텐츠의 프라이버시 수준을 설정합니다.
TextAndInputPrivacyLevel.MASK_SENSITIVE_INPUTS: 민감한 입력만 마스킹합니다.
TextAndInputPrivacyLevel.MASK_ALL_INPUTS: 모든 입력 콘텐츠를 마스킹합니다.
TextAndInputPrivacyLevel.MASK_ALL: 모든 텍스트 및 입력 콘텐츠를 마스킹합니다. 설정 시 privacy 구성을 덮어씁니다. SDK 0.4.1 이상 버전에서 지원됩니다.
imagePrivacy ImagePrivacyLevel 아니요 세션 리플레이에서 이미지 콘텐츠의 프라이버시 수준을 설정합니다.
ImagePrivacyLevel.MASK_NON_BUNDLED_ONLY: 번들에 포함되지 않은 이미지만 마스킹합니다.
ImagePrivacyLevel.MASK_ALL: 모든 이미지를 마스킹합니다.
ImagePrivacyLevel.MASK_NONE: 이미지를 마스킹하지 않습니다. 설정 시 privacy 구성을 덮어씁니다. SDK 0.4.1 이상 버전에서 지원됩니다.

뷰 프라이버시 오버라이드

SDK 0.4.1 이상 버전에서 지원됩니다.

FTSessionReplayView는 로컬 뷰 트리에 대한 세션 리플레이 프라이버시 오버라이드를 설정하는 데 사용됩니다. 이 컴포넌트는 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 세션 리플레이에서 하위 뷰 콘텐츠를 완전히 숨깁니다. 추가 속성 없음.

로컬 컴포넌트 감싸기

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를 사용하면 하위 뷰가 세션 리플레이에서 숨겨집니다.

WebView의 경우 웹 SDK의 프라이버시 설정을 사용하여 페이지 내 콘텐츠를 관리하는 것을 권장합니다. React Native 측의 뷰 프라이버시 오버라이드는 기본 네이티브 뷰 트리에 주로 적용됩니다.

코드 및 설정 참고

문서 평가

이 페이지가 도움이 되었나요?