前端录制与回放

1. 背景

  1.1 selenium等自动化测试工具

  1.2 webRTC屏幕录制

  1.3 rrweb+rrwebplayer

2. 对比

  selenium适用于自动化测试、自动运行脚本;webRTC适用于录制视频与上传分析;rrweb适用于后台录制与行为分析。都可用来排查问题、指导用户操作等场景。

3. rrweb使用

  3.1 引入

  npm i来安装rrweb和rrwebplayer

  3.2 api

  rrweb.record,可接收多个参数,第一个参数为响应,其他为配置;

  rrwebPlayer,target回放元素,props配置项;

  3.3 示例

// HTML


// JS
const rrweb = require("rrweb");
import rrwebPlayer from "rrweb-player";

const events = ref([]);
const stopFn = ref(null);
const showReplay = ref(false);
const replayer = ref(null)

const record = () => {
  console.log("开始录制");
  stopFn.value = rrweb.record({
    emit: (event) => {
      events.value.push(event);
    },
    // 支持录制canvas
    recordCanvas: true,
    collectFonts: true,
  });
};
const replay = () => {
  stopFn.value();
  showReplay.value = true;
  new rrwebPlayer({
    // 可以自定义 DOM 元素
    target: replayer.value,
    // 配置项
    props: {
      // 传入events
      events: events.value,
    },
  });
};
const reset = () => {
  showReplay.value = false;
  events.value = []
};

4. 分析

  4.1. 记录内容

  记录的是DOM结构

  4.2 可记录行为

  • 节点创建、销毁
  • 节点属性变化
  • 文本变化
  • 鼠标移动
  • 鼠标交互
  • 页面或元素滚动
  • 视窗大小改变
  • 输入

5. 优化

  数据采集来是进行分析的,那就自然有客户端分析和服务端分析两种。

  5.1 客户端分析

  将采集数据和分析算法一并放在前端,讲分析结果传给服务端。好处是节省服务端资源,坏处是可能影响用户体验如卡顿、存储设计、网络问题等。

  5.2 服务端分析

  将采集数据实时上传,可结合前边的schedule.yeild等,避免影响用户体验。且由于采集的是界面dom,所以界面内容较多时数据自然就很大,所以需要进行相应的优化,如:

  ① 采集页面不应有太多无关dom,所以尽可能在简洁单独的界面进行采集分析;

  ② 虽然小于视频录制的大小,但是内容还是很大的,可以使用压缩配置,如下

 1 const record = () => {
 2   console.log("开始录制");
 3   stopFn.value = rrweb.record({
 4     emit: (event) => {
 5       events.value.push(event);
 6     },
 7     recordCanvas: true,
 8     collectFonts: true,
 9 +    packFn: rrweb.pack
10   });
11 };
12 
13 const replay = () => {
14   stopFn.value();
15   showReplay.value = true;
16   new rrwebPlayer({
17     // 可以自定义 DOM 元素
18     target: replayer.value,
19     // 配置项
20     props: {
21       // 传入events
22       events: events.value,
23 +      unpackFn: rrweb.unpack,
24     },
25   });
26 };

你可能感兴趣的:(前端)