录屏

概览

借助rrweb对 DOM 的数据进行连续记录形成“视频”，当项目线上报错时，将录屏上传以辅助排查错误。

为什么要录屏 & 有什么风险

可以记录用户的操作，更好的复现线上的错误，帮助开发者排除错误。但是设计到隐私问题以及数据大小问题，录屏会设计到用户的敏感信息，比如输入账号密码等信息，这些信息需要抹去再录屏。并且录屏数据庞大，需要有良好的录制策略。rrweb 支持对相关设计到敏感信息的元素的“遮罩”处理，可以指定相关的类名，拥有这些类名的元素的内容将不会被录制，取而代之的是一个尺寸等大的空白块。

如何实现

rrweb 的原理是记录 DOM 的信息将其转换成 JSON 数据，然后用这些 JSON 数据再渲染出一个 DOM 出来。

开始录制后，收集每次 record 事件的 DOM 快照信息。当发生错误时上传录屏信息。

const record = () => {
  stop = rrwebRecord({
    emit(event, isNew) {
      if (isNew) {
        events.newEvent(event);
      } else {
        events.add(event);
      }
      console.log('recording');
    },
    checkoutEveryNms: 10 * 1000,
  });
  window.stopRecord = stop;
};

目前的录屏策略是每 10 秒重新录屏，到错误发生时发送当前录屏 JSON 信息。

回放

将记录的 DOM 数据传入 events 字段，然后自动回放容器元素。

const player = new rrwebPlayer({
  target: el, // 可以自定义 DOM 元素
  props: {
    events,
    width: 550,
    height: 350,
  },
});