无缝实现移动端 WGT 小程序与 WebView 的全链路会话重放

移动端 Session Replay 工作原理简介

移动端 Session Replay 通过逐帧控件扫描的方式，对页面组件以及用户手势操作进行记录。为了节约开销会在新页面录制全量数据，随后同一页面会根据算法仅录制前后帧数的差量数据。录制的数据最终在观测云后端重绘，按照时间轴播放，从而达到回放的效果。

移动端原生页面的会话重放采集可以参考官方文档；此最佳实践主要介绍移动端嵌入了 WebView 页面和 WGT 小程序时，如何采集这些页面的会话重放数据。

WGT 小程序接入实践

WGT 小程序是指用 uni-app 框架写好的小程序前端代码、页面、样式、脚本等打包成一个压缩文件，扩展名 .wgt，相当于小程序的“安装包”，原生 App 集成 uni 小程序 SDK 后，可动态加载并运行 .wgt 包，实现“在自家 App 里跑小程序”的效果。

前置条件

Android APP：

• 确保您已设置并初始化 FTSdk RUM 配置，并开启 View 的监控采集
• Android Session Replay 目前为 alpha 功能，需要使用 ft-sdk:1.7.0 以上的版本
• 建议使用文档最上方 badge 显示的版本，另外通过下面命令可找到发布的可用 alpha 版本, alpha 版本更新日志分别在 ft-sdk、ft-ft-session-replay、ft-session-replay-material

IOS APP：

• 确保您已设置并初始化 FTMobileSDK RUM 配置，并开启 View 的监控采集
• iOS Session Replay 目前为 alpha 功能，版本支持：SDK.Version >= 1.6.0
• 建议使用文档最上方 badge 显示的版本，另外通过下面命令可找到发布的可用 alpha 版本，alpha 版本更新日志在这里

pod trunk info FTMobileSDK | grep alpha 

具体步骤

1、引入原生插件

将附件解压后，复制【nativePlugins】文件夹到项目的根路径，再选中 manifest.json 中的【安卓/IOS 原生插件配置】点击【选择本地插件】，选中【Guance UniPlugin】点击确定。

2、配置数据池信息

在 App.vue 中，引入【GCUniPlugin-MobileAgent】插件，并借助初始化数据池配置，参考如下：

// #ifdef APP-PLUS
const ftModule = uni.requireNativePlugin("GCUniPlugin-MobileAgent");
// #endif

export default {
  onLaunch: () => {

    // #ifdef APP-PLUS
    ftModule.appendBridgeContext({
      'wgt_id': '', // 可自定义wgt_id，方便后续区分是原生app数据还是某wgt小程序
      'wgt_name': 'xxxxx', // 可自定义wgt_name，如wgt应用名称
    });
    // #endif

  }
}

3、错误信息采集

在 main.js 引入【gcErrorTracking】插件，并借助插件，上报错误日志信息。

// #ifdef APP-PLUS
import {gcErrorTracking} from '@/mixins/GCErrorTracking.js';

gcErrorTracking?.startTracking();
// #endif

4、接口请求监控

在系统引入 gcAgent-2.x.x 插件，并配置 requestOb:true，在执行接口请求的地方，使用 gcAgent.request 调用接口，即可完成 API 请求监控任务。

// 引入gcAgent插件【⚠️超级重要】
import gcAgent from './plugins/gcAgent-2.0.0.esm.js';

// 开启API请求监控【⚠️超级重要】
gcAgent.requestOb = true;


// 配置请求的目标服务器地址信息，也可以在url内写完整的服务器地址信息
gcAgent.baseURL = 'http://xxx.xxx.xxx/xxx';

// Vue2挂载到全局配置示例
Vue.prototype.$gcAgent = gcAgent;

// Vue3挂载到全局配置示例
app.config.globalProperties.$gcAgent = gcAgent;

// API接口调用示例
const res = await this.$gcAgent.request({
  url: 'xxx/xxx/xx',
  method: "get",
  data: {
    code: "xxxxx"
  }
});

5、页面信息采集

在 main.js 引入【gcErrorTracking】插件，并借助插件，上报页面错误日志信息。

// #ifdef APP-PLUS
import {gcViewTracking} from '@/mixins/GCViewTracking.js'
// 开启 View ⾃动采集
gcViewTracking.startTracking();
// 注⼊ web js 示例
const jsCode = `
  // Dynamically create and load external script
  var script = document.createElement('script');
  script.src = 'https://static.guance.com/browser-sdk/v3/dataflux-rum.js';
  script.onload = function() {
  // 这里需要业务侧修改自定义wgt_name、自定义wgt_id
  DATAFLUX_RUM.setGlobalContextProperty('wgt_id', <wgtID>);
  DATAFLUX_RUM.setGlobalContextProperty('wgt_name', <wgt名称>);
  
  DATAFLUX_RUM.init({
  applicationId: 'appid',// 登录观测云获取
  site: 'https://xxx/dataway/',// 登录观测云获取
  clientToken: '80xxxxxxxxxxxxxxxxxxxde', // 登录观测云获取
  env: "test",
  version: "1.0.0",
  service: "browser",
  sessionSampleRate: 0,
  sessionReplaySampleRate: 0,
  compressIntakeRequests: true,
  trackInteractions: true,
  traceType: "ddtrace"
  });
  window.DATAFLUX_RUM.startSessionReplayRecording();
};
document.head.appendChild(script);
`;
gcViewTracking.evalSessionReplayJS(jsCode);
// #endif

结果展示

正常将原生 APP 和 wgt 小程序的数据采集，并通过视频的方式回放用户操作情况。

也可以通过 wgt_id 筛选具体某个 wgt 小程序的数据进行分析。

WebView 接入实践

WebView 是操作系统或运行时环境提供的“内嵌浏览器”组件，允许原生 App 在自己的窗口里直接渲染并运行 HTML/CSS/JavaScript 网页内容，而无需跳转到外部浏览器。它既是“网页容器”，也是“JS-原生桥梁”。

此实践，也是以 uni-app 框架打包的H5为例，通过设置 wgt_id、wgt_name 作为标签化处理。

具体步骤

1、创建 web 应用

登录观测云，在「用户访问监测」中新建一个 Web 应用，获取 js 配置信息。

2、初始化 webview 配置

在 index.html 中添加如下示例代码，标红的数据，参考上一步对应的数据值。

<script>
  ;(function (h, o, u, n, d) {
  h = h[d] = h[d] || {
    q: [],
    onReady: function (c) {
      h.q.push(c)
    },
  }
  d = o.createElement(u)
  d.async = 1
  d.src = n
  n = o.getElementsByTagName(u)[0]
  n.parentNode.insertBefore(d, n)
})(window, document, "script", "https://static.guance.com/browser-sdk/v3/dataflux-rum.js", "DATAFLUX_RUM")
  DATAFLUX_RUM.onReady(function () {
  DATAFLUX_RUM.init({
    applicationId: "<应用ID>",  // 上面步骤中的应用ID值
    datakitOrigin: "https://xxx.com/datakit",
    env: "test", // 建议测试环境：test、本地开发环境：dev、生产环境：prod
    version: "1.0.0",
    service: "browser",
    sessionSampleRate: 100,
    sessionReplaySampleRate: 100,
    compressIntakeRequests: true,
    trackInteractions: true,
    traceType: "ddtrace",
    allowedTracingOrigins: [/.*/],
  });
  DATAFLUX_RUM.setGlobalContextProperty('wgt_id', '<自定义wgt_id>'); // 自定义wgt_id
  DATAFLUX_RUM.setGlobalContextProperty('wgt_name', '<自定义wgt_name>'); // 自定义wgt_name
})
  window.addEventListener(
  "DOMContentLoaded",
  function () {
  window.DATAFLUX_RUM.onReady(function () {
    window.DATAFLUX_RUM && window.DATAFLUX_RUM.startSessionReplayRecording()
  })
},
  {once: true}
  )
</script>

结果展示

正常将 webview 的数据采集和回放。

也支持按 wgt_id 筛选对应 webview 数据进行分析。