UniApp Session Replay¶

UniApp Session Replay currently supports Android and iOS, but not HarmonyOS. Regular uni-app initializes through the optional GC-UniSessionReplay module; uni mini-programs are initialized by the host app using the corresponding platform's Native SDK.

Prerequisites¶

• Complete UniApp Application Integration and initialize the Mobile SDK, RUM, and View collection.
• Use GC-UniPlugin, GC-JSPlugin, and GC-UniSessionReplay version 0.3.0 or higher; all three modules must share the same version.
• HBuilderX version must be 4.25.0 or higher.
• Android minimum API level: 24; iOS minimum version: 12.0.

Installation¶

From the Hbuilder_Example/uni_modules directory of the corresponding version in the SDK source repository, copy GC-UniSessionReplay to the uni_modules directory of the business project:

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

Initialization¶

Initialize the Mobile SDK and RUM first, then initialize Session Replay. It is recommended to call GCUniSessionReplay.setConfig() once before starting automatic View collection:

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

Recommended initialization order:

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

Collecting UniApp Page Content¶

On Android and iOS, uni-app pages run in a WebView embedded within the app. After initializing GC-UniSessionReplay, you also need to inject the Web monitoring SDK into the uni-app rendering WebView via gcViewTracking.evalSessionReplayJS() and enable Web Session Replay. This step is required to display uni-app page content and user interactions in Session Replay.

Configure the injection script before calling gcViewTracking.startTracking():

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

// #ifdef APP-PLUS
const jsCode = `
    // Load the Web monitoring SDK in the uni-app rendering WebView
    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({
                // The data receiver URL is still validated in bridge mode,
                // but RUM data is sent via FTWebViewJavascriptBridge
                // instead of being sent to this URL
                datakitOrigin: window.location.origin,
            });
        window.DATAFLUX_RUM.startSessionReplayRecording();
    };
    document.head.appendChild(script);
`;
gcViewTracking.evalSessionReplayJS(jsCode);
// #endif

wgt_id and wgt_name are optional custom fields used to identify data generated by the uni-app rendering layer. To associate these fields with Session Replay data, declare the field names in enableLinkRUMKeys of GCUniSessionReplay.setConfig() and set the actual values for the same field names using DATAFLUX_RUM.setGlobalContextProperty(). If you do not need to distinguish data using these fields, you can omit enableLinkRUMKeys and remove the two setGlobalContextProperty() calls from the injection script.

evalSessionReplayJS() executes the script in the rendering WebView of the corresponding uni-app page; there is no need to call it repeatedly for each page.

This collects the content of uni-app's own rendered pages. To collect external web pages loaded via the <web-view> component, refer to WebView Data Monitoring.

Parameter Reference¶

Viewing Session Replay¶

The method for viewing mobile Session Replay is the same as for the web. For details, refer to Web Session Replay Access.