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

背景

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

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

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

录制方案

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

方案一：WebRTC

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

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

js 复制代码

 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 的使用！

页面结构

安装插件：

js 复制代码

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

js 复制代码

<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>
    <!-- 展示回放的DOM -->
    <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：

js 复制代码

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>(); // 回放DOM
  const showReplay = ref(false); // 显示回放区域
  const eventList = ref<eventWithTime[]>([]); // events集合
  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;
    // 加个延时确保回放DOM渲染完成
    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,
  };
};