UniApp 세션 리플레이¶

UniApp 세션 리플레이는 현재 Android 및 iOS를 지원하며, HarmonyOS는 아직 지원하지 않습니다. 일반 uni-app은 선택적 GC-UniSessionReplay 모듈을 통해 초기화하고, uni 미니프로그램은 호스트 App이 해당 플랫폼의 Native SDK를 통해 초기화합니다.

전제 조건¶

UniApp 애플리케이션 연동을 완료하고 Mobile SDK, RUM 및 View 수집을 초기화해야 합니다.
GC-UniPlugin, GC-JSPlugin 및 GC-UniSessionReplay의 0.3.0 이상 버전을 사용하며, 세 모듈의 버전 번호가 일치해야 합니다.
HBuilderX 버전이 4.25.0 이상이어야 합니다.
Android 최소 API 24 지원, iOS 최소 12.0 지원.

설치¶

SDK 소스 코드 저장소의 해당 버전 Hbuilder_Example/uni_modules에서 GC-UniSessionReplay를 비즈니스 프로젝트의 uni_modules로 복사합니다:

uni_modules/
├── GC-JSPlugin
├── GC-UniPlugin
└── GC-UniSessionReplay

초기화¶

Mobile SDK와 RUM 초기화를 먼저 완료한 후 Session Replay를 초기화합니다. View 자동 수집을 시작하기 전에 GCUniSessionReplay.setConfig()를 한 번 호출하는 것이 좋습니다:

import {
    GCUniSessionReplay,
    GCSessionReplayTouchPrivacy,
    GCSessionReplayTextAndInputPrivacy,
    GCSessionReplayImagePrivacy
} from '@/uni_modules/GC-UniSessionReplay';

GCUniSessionReplay.setConfig({
    sampleRate: 100,
    sessionReplayOnErrorSampleRate: 0,
    touchPrivacy: GCSessionReplayTouchPrivacy.SHOW,
    textAndInputPrivacy:
        GCSessionReplayTextAndInputPrivacy.MASK_SENSITIVE_INPUTS,
    imagePrivacy: GCSessionReplayImagePrivacy.MASK_NON_BUNDLED_ONLY,
    enableLinkRUMKeys: ['wgt_id', 'wgt_name']
});

권장 초기화 순서:

mobileAgent.sdkConfig()
  -> rum.setConfig()
  -> GCUniSessionReplay.setConfig()
  -> gcViewTracking.startTracking()

uni-app 페이지 콘텐츠 수집¶

Android 및 iOS 플랫폼의 uni-app 페이지는 애플리케이션에 내장된 WebView에서 실행됩니다. GC-UniSessionReplay를 초기화한 후, gcViewTracking.evalSessionReplayJS()를 통해 Web 모니터링 SDK를 uni-app의 렌더링 WebView에 주입하고 Web Session Replay를 활성화해야 합니다. 이 작업을 완료해야 세션 리플레이에서 uni-app 페이지 콘텐츠와 사용자의 페이지 내 조작을 표시할 수 있습니다.

gcViewTracking.startTracking()을 호출하기 전에 다음 주입 스크립트를 구성하세요:

import { gcViewTracking } from '@/uni_modules/GC-JSPlugin';

// #ifdef APP-PLUS
const jsCode = `
    // uni-app의 렌더링 WebView에 Web 모니터링 SDK 로드
    var script = document.createElement('script');
    script.src = 'https://static.guance.com/browser-sdk/v3/dataflux-rum.js';
    script.onload = function() {
        DATAFLUX_RUM.setGlobalContextProperty('wgt_id', 'wgt_id_1');
        DATAFLUX_RUM.setGlobalContextProperty('wgt_name', 'wgt_name_1');
        window.DATAFLUX_RUM &&
            window.DATAFLUX_RUM.init({
                // 브리지 모드에서도 데이터 수신 주소를 확인해야 하지만,
                // RUM 데이터는 FTWebViewJavascriptBridge를 통해 전송되며
                // 이 주소로 요청하지 않습니다.
                datakitOrigin: window.location.origin,
            });
        window.DATAFLUX_RUM.startSessionReplayRecording();
    };
    document.head.appendChild(script);
`;
gcViewTracking.evalSessionReplayJS(jsCode);
// #endif

wgt_id와 wgt_name은 선택적 사용자 정의 필드로, uni-app 렌더링 레이어에서 생성된 데이터를 식별하는 데 사용됩니다. 이러한 필드를 세션 리플레이 데이터에 연결해야 하는 경우 GCUniSessionReplay.setConfig()의 enableLinkRUMKeys에서 필드 이름을 선언하고 DATAFLUX_RUM.setGlobalContextProperty()를 통해 동일한 이름의 필드에 실제 값을 설정하세요. 이러한 필드로 데이터를 구분할 필요가 없는 경우 enableLinkRUMKeys를 구성하지 않고 주입 스크립트에서 두 줄의 setGlobalContextProperty() 호출을 삭제할 수 있습니다.

evalSessionReplayJS()는 uni-app 페이지에 해당하는 렌더링 WebView에서 해당 스크립트를 실행하므로 각 페이지에서 반복적으로 호출할 필요가 없습니다.

여기서 수집하는 것은 uni-app 자체의 렌더링 페이지입니다. <web-view> 컴포넌트로 로드된 외부 웹 페이지를 수집해야 하는 경우 WebView 데이터 모니터링을 참조하세요.

매개변수 설명¶

매개변수명	매개변수 타입	필수	매개변수 설명
sampleRate	number	아니요	샘플링 비율, 범위 `[0,100]`, `0`은 수집 안 함, `100`은 전체 수집, 기본값 `100`
sessionReplayOnErrorSampleRate	number	아니요	오류 수집 비율, 범위 `[0,100]`; `sampleRate` 샘플링에 포함되지 않은 세션에서 오류 발생 시 이 비율로 오류 발생 전 1분 데이터 수집, 기본값 `0`
touchPrivacy	string	아니요	터치 개인정보 보호 수준: `show`, `hide`, 기본값 `hide`
textAndInputPrivacy	string	아니요	텍스트 및 입력 개인정보 보호 수준: `maskSensitiveInputs`, `maskAllInputs`, `maskAll`, 기본값 `maskAll`
imagePrivacy	string	아니요	이미지 개인정보 보호 수준: `maskNonBundledOnly`, `maskAll`, `maskNone`, 기본값 `maskAll`; Android는 `maskNonBundledOnly`를 큰 이미지만 마스킹으로 매핑
enableSwiftUI	boolean	아니요	iOS 전용; SwiftUI 페이지 녹화 여부, 기본값 `false`
enableLinkRUMKeys	array	아니요	지정된 RUM Context 필드를 Session Replay 데이터에 연결

세션 리플레이 보기¶

모바일 세션 리플레이의 보기 방식은 Web과 동일합니다. 자세한 내용은 Web 세션 리플레이 접근 방식을 참조하세요.