HUA

背景

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

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

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

录制方案

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

方案一：WebRTC

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

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

 1 function getUserMedia() {
 2        navigator.mediaDevices.getUserMedia({
 3            video: {facingMode: facingMode},
 4            audio: true
 5        }).then(stream => {
 6            localStream = stream
 7            const localVideo = document.getElementById('localVideo');
 8            localVideo.srcObject = stream;
 9        });
10    }

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

方案二：rrweb

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

页面结构

安装插件：

 1pnpm i rrweb rrweb-player
 2pnpm 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

 1<template>
 2  <main>
 3    <header>
 4      <el-button @click="onRecord" type="primary">录制</el-button>
 5      <el-button @click="onReplay" type="success">回放</el-button>
 6      <el-button @click="goBack">返回</el-button>
 7    </header>
 8    
 9    <section v-if="showReplay" ref="replayer"></section>
10    
11    <section v-else>
12      <el-form
13        ref="ruleFormRef"
14        style="max-width: 600px"
15        :model="ruleForm"
16        status-icon
17        label-width="auto"
18      >
19        <el-form-item label="用户名">
20          <el-input v-model="ruleForm.name" autocomplete="off" />
21        </el-form-item>
22        <el-form-item label="密码">
23          <el-input
24            v-model="ruleForm.pass"
25            type="password"
26            autocomplete="off"
27          />
28        </el-form-item>
29        <el-form-item label="年龄">
30          <el-input v-model.number="ruleForm.age" />
31        </el-form-item>
32        <el-form-item style="margin-left: 55px">
33          <el-button type="primary"> 提交 </el-button>
34          <el-button>重置</el-button>
35        </el-form-item>
36      </el-form>
37    </section>
38  </main>
39</template>
40
41<script lang="ts" setup>
42import { reactive, ref } from 'vue';
43import type { FormInstance } from 'element-plus';
44import { useRecord } from '@/hooks/use-record';
45import 'rrweb-player/dist/style.css';
46
47const { replayer, showReplay, onRecord, onReplay, goBack } = useRecord();
48
49const ruleFormRef = ref<FormInstance>();
50const ruleForm = reactive({
51  pass: '',
52  name: '',
53  age: '',
54});
55</script>
56
57<style scoped lang="less">
58main {
59  display: flex;
60  flex-direction: column;
61  justify-content: center;
62  align-items: center;
63  width: 100%;
64  height: 100%;
65  margin-top: 50px;
66  header {
67    margin-bottom: 20px;
68  }
69  section {
70    border: 1px solid rgb(198, 194, 194);
71    padding: 20px;
72    border-radius: 4px;
73  }
74}
75</style>
76

use-record.ts：

 1import { ref } from 'vue';
 2import * as rrweb from 'rrweb';
 3import rrwebPlayer from 'rrweb-player';
 4import { eventWithTime } from '@rrweb/types';
 5
 6export const useRecord = () => {
 7  const replayer = ref<HTMLElement>(); 
 8  const showReplay = ref(false); 
 9  const eventList = ref<eventWithTime[]>([]); 
10  const stopFn = ref(); 
11
12  
13  const onRecord = () => {
14    stopFn.value = rrweb.record({
15      emit: event => {
16        eventList.value.push(event);
17      },
18      recordCanvas: true,
19      collectFonts: true,
20    });
21  };
22  
23  const onReplay = () => {
24    stopFn.value();
25    showReplay.value = true;
26    
27    setTimeout(() => {
28      new rrwebPlayer({
29        target: replayer.value as HTMLElement,
30        props: {
31          events: eventList.value,
32        },
33      });
34    }, 500);
35  };
36  
37  const goBack = () => {
38    showReplay.value = false;
39    eventList.value = [];
40  };
41
42  return {
43    replayer,
44    showReplay,
45    onRecord,
46    onReplay,
47    goBack,
48  };
49};
个人笔记记录 2021 ~ 2025