--- theme: github --- ## 背景对于一些比较重要的项目，我们可能需要对这些项目中的某些网页进行特殊处理，比如记录的用户行为，这样做是有好处的，通过分析用户的行为从而对项目的流程进行优化；采集用户遇到的 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 的官网：https://www.rrweb.io/ ，废话不多说，开始实践，通过一个例子来学习 rrweb 的使用！ #### 页面结构 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0438b4f7ddf440daf9360bc1f80b061~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=949&h=543&s=80683&e=png&b=292d35) 安装插件： ```js pnpm i rrweb rrweb-player pnpm i @rrweb/types -D ``` 记得引入 rrweb-player 的样式：import 'rrweb-player/dist/style.css'; #### 核心逻辑我这里是将录制的全部逻辑封装成 hooks 使用：`use-record.ts`，完整代码放到最后 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec40d6010621478fac0a65fef7b7f252~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=692&h=436&s=59999&e=png&b=282c34) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/03345fc69d744017816c498724808f97~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=710&h=617&s=54103&e=png&b=282c34) 核心代码不多，十几行搞定，录制和回放时调用下第三方插件即可。 #### 效果展示随便写了个 Demo，来看下录制与回放的效果： ![QQ录屏20240524171440.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42fbd6f775ae47f18ab2f4c9d885e1a4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1862&h=844&s=576010&e=gif&f=367&b=fdfcff) ## rrweb原理浅析 ### DOM快照什么是 DOM 快照：⻚⾯中的视图状态可以通过 DOM 树的形式描述，所以当我们尝试录制⼀个⻚⾯时，我们可以记录 DOM 树在各个时间点上的状态。记录每一时刻页面的DOM状态，回放的时候根据时间点显示即可。其实 rrweb 录制的并不是视频，而是一系列的 DOM 结构，我们打印下 `event` 参数： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9aa4262c9dc34b5caef097cd2891bd49~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=760&h=328&s=19852&e=png&b=ffffff) 录制完成后可以得到 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，如果是用户的操作时间过长，传输的数据量过多，会增加服务器的压力，所以这里需要进行优化。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d6260f7ad5354248bd06ab53e486b216~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1398&h=818&s=156864&e=png&b=ffffff) ### 压缩数据 rrweb 有提供压缩的功能，压缩后为 100KB 左右： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7447fdbc146e4d00b8e7987ab26c1f35~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1384&h=838&s=180851&e=png&b=fffefe) 开启压缩： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fabacc6b19c54cd8b67752149bfebfdd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=641&h=242&s=24963&e=png&b=282c34) 后台展示回放时需要解码操作： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c840d515ccc049c3ba9672549d5b8aca~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=736&h=401&s=43852&e=png&b=282c34) ### 非全量录制除了压缩数据量，还可以考虑只在重要的页面/核心功能中去录制用户的行为，而不是全量录制，尽量减少数据量，这样也有助于后台管理人员的查看，毕竟谁没事会去看这么长的回放。 ### 上传时机优化可以考虑每隔一段时间向服务器上传录制的数据，以减轻浏览器和服务器的压力，或者是在浏览器空闲的时候，进行数据的上传。 ### 只上传报错传输数据量过大会影响页面的性能，所以要尽可能减少数据量。如果是只想录制报错的回放，便于复现排查生产环境的 BUG 的话，在上传 `eventList` 的前，判断下录制的内容里是否有报错，如果有报错再上传；如果是想分析用户行为，用于优化页面逻辑，那就只能都上传了。关于 `eventList` 中是否有报错的记录，需要研究下能不能实现，我感觉是比较有难度的，毕竟报错的定义很广泛，这就要涉及到各种类型报错的处理。当然录制用户行为会涉及到用户的隐私问题，所以还是得慎重考虑才行。 ## 完整Demo代码 rrweb-demo.vue ```js ``` 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(); // 回放DOM const showReplay = ref(false); // 显示回放区域 const eventList = ref([]); // 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, }; }; ```