无法复现生产BUG？rrweb录制用户行为助你排忧解难！

#背景

对于一些比较重要的项目，我们可能需要对这些项目中的某些网页进行特殊处理，比如记录的用户行为，这样做是有好处的，通过分析用户的行为从而对项目的流程进行优化；采集用户遇到的 bug 的操作路径，尤其是当我们无法复现生产环境的 BUG 时，录制用户行为对开发人员有很大的帮助，那么该如何实现录制用户行为的功能呢？

关于录制用户行为需要注意两点：

• 必须要做到用户无感知才行，如果让用户决定是否录制，那其实就无法记录用户行为了，一般来说用户是会拒绝录制的。
• 要支持回放，不然录制就没意义了，后续也无法分析用户的行为

#录制方案

提到录制，我们都会想到两个解决方案：WebRTC 和 rrweb，如果还有其他更好的实现方案以及第三方库，可以推荐给我。

#方案一：WebRTC

WebRTC（Web Real-Time Communications）是 Google 公司开源的一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点的连接，实现视频流、音频流或者其他任意数据的传输。

使用 navigator 的一个 API 来访问流媒体设备（如摄像机或麦克风），它允许网页访问摄像头或麦克风，并捕获实时流视频/音频。

复制 function getUserMedia() {
        navigator.mediaDevices.getUserMedia({
            video: {facingMode: facingMode},
            audio: true
        }).then(stream => {
            localStream = stream
            const localVideo = document.getElementById('localVideo');
            localVideo.srcObject = stream;
        });
    }

使用 WebRTC 一个很大的问题就是，它无法做到无感知录制，浏览器会询问用户是否同意，所以使用 WebRTC 肯定无法满足我们的需求，那就只能采用 rrweb 了。

#方案二：rrweb

rrweb 是 record and replay the web 的简写，旨在利用现代浏览器所提供的强大 API 录制并回放任意 web 界面中的用户操作，rrweb 的官网：www.rrweb.io/ ，废话不多说，开始实践，通过一个例子来学习 rrweb 的使用！

#页面结构

安装插件：

复制pnpm i rrweb rrweb-player
pnpm i @rrweb/types -D

记得引入 rrweb-player 的样式：import 'rrweb-player/dist/style.css';

#核心逻辑

我这里是将录制的全部逻辑封装成 hooks 使用：use-record.ts，完整代码放到最后

核心代码不多，十几行搞定，录制和回放时调用下第三方插件即可。

#效果展示

随便写了个 Demo，来看下录制与回放的效果：

#rrweb原理浅析

#DOM快照

什么是 DOM 快照：⻚⾯中的视图状态可以通过 DOM 树的形式描述，所以当我们尝试录制⼀个⻚⾯时，我们可以记录 DOM 树在各个时间点上的状态。 记录每一时刻页面的DOM状态，回放的时候根据时间点显示即可。

其实 rrweb 录制的并不是视频，而是一系列的 DOM 结构，我们打印下 event 参数：

录制完成后可以得到 DOM 快照集合：eventList，回放时 rrwebPlayer 再将 eventList 渲染出来。

#优化DOM的记录

如果将每时每刻的 DOM 状态都记录下来，对于 DOM 数据庞大的情况，就有可能出现性能问题，rrweb 内部其实是对记录 DOM 的过程进行了优化。

• 记录初始页面的 DOM 状态，后续收集某时刻某个 DOM 的变化作为一个增量快照，在原先快照的基础上，不断加入根据行为解析的 DOM 数据，构建了后续的快照。
• 对于鼠标移动，页面滚动等事件进行了节流
• 压缩数据

#组成部分

rrweb 主要包含下面三个部分：

• rrweb-snapshot，包含 snapshot 和 rebuild 两个功能。 snapshot 用于将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识； rebuild 则是将 snapshot 记录的数据结构重建为对应的 DOM，并插入文档中
• rrweb，包含 record 和 replay 两个功能。 record 用于记录 DOM 中的所有变更； replay 则是将记录的变更按照对应的时间一一重放
• rrweb-player，为 rrweb 提供一套 UI 控件，提供基于图形用户界面的暂停、快进、拖拽至任意时间点播放等功能

#后续优化

录制完成之后，需要将数据传给后台，便于在后台管理系统中查看，这就会涉及到传输数据量过大的情况，简单录制 7s，传给后台的数据量为 300 多 KB，如果是用户的操作时间过长，传输的数据量过多，会增加服务器的压力，所以这里需要进行优化。

#压缩数据

rrweb 有提供压缩的功能，压缩后为 100KB 左右：

开启压缩：

后台展示回放时需要解码操作：

#非全量录制

除了压缩数据量，还可以考虑只在重要的页面/核心功能中去录制用户的行为，而不是全量录制，尽量减少数据量，这样也有助于后台管理人员的查看，毕竟谁没事会去看这么长的回放。

#上传时机优化

可以考虑每隔一段时间向服务器上传录制的数据，以减轻浏览器和服务器的压力，或者是在浏览器空闲的时候，进行数据的上传。

#只上传报错

传输数据量过大会影响页面的性能，所以要尽可能减少数据量。

如果是只想录制报错的回放，便于复现排查生产环境的 BUG 的话，在上传 eventList 的前，判断下录制的内容里是否有报错，如果有报错再上传；如果是想分析用户行为，用于优化页面逻辑，那就只能都上传了。

关于 eventList 中是否有报错的记录，需要研究下能不能实现，我感觉是比较有难度的，毕竟报错的定义很广泛，这就要涉及到各种类型报错的处理。

当然录制用户行为会涉及到用户的隐私问题，所以还是得慎重考虑才行。

#完整Demo代码

rrweb-demo.vue

复制<template>
  <main>
    <header>
      <el-button @click="onRecord" type="primary">录制</el-button>
      <el-button @click="onReplay" type="success">回放</el-button>
      <el-button @click="goBack">返回</el-button>
    </header>
    
    <section v-if="showReplay" ref="replayer"></section>
    
    <section v-else>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        status-icon
        label-width="auto"
      >
        <el-form-item label="用户名">
          <el-input v-model="ruleForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="ruleForm.pass"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model.number="ruleForm.age" />
        </el-form-item>
        <el-form-item style="margin-left: 55px">
          <el-button type="primary"> 提交 </el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </section>
  </main>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { useRecord } from '@/hooks/use-record';
import 'rrweb-player/dist/style.css';

const { replayer, showReplay, onRecord, onReplay, goBack } = useRecord();

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  pass: '',
  name: '',
  age: '',
});
</script>

<style scoped lang="less">
main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 50px;
  header {
    margin-bottom: 20px;
  }
  section {
    border: 1px solid rgb(198, 194, 194);
    padding: 20px;
    border-radius: 4px;
  }
}
</style>

use-record.ts：

复制import { ref } from 'vue';
import * as rrweb from 'rrweb';
import rrwebPlayer from 'rrweb-player';
import { eventWithTime } from '@rrweb/types';

export const useRecord = () => {
  const replayer = ref<HTMLElement>(); 
  const showReplay = ref(false); 
  const eventList = ref<eventWithTime[]>([]); 
  const stopFn = ref(); 

  
  const onRecord = () => {
    stopFn.value = rrweb.record({
      emit: event => {
        eventList.value.push(event);
      },
      recordCanvas: true,
      collectFonts: true,
    });
  };
  
  const onReplay = () => {
    stopFn.value();
    showReplay.value = true;
    
    setTimeout(() => {
      new rrwebPlayer({
        target: replayer.value as HTMLElement,
        props: {
          events: eventList.value,
        },
      });
    }, 500);
  };
  
  const goBack = () => {
    showReplay.value = false;
    eventList.value = [];
  };

  return {
    replayer,
    showReplay,
    onRecord,
    onReplay,
    goBack,
  };
};