错误录屏回放

rrweb原理

在展示代码前我先讲解讲解rrweb的原理。

1. 生成快照：在页面开始时rrweb会先生成一份页面的快照，用于记录网页初始状态

   1. 快照的原理：使用深度优先遍历对 DOM 树进行序列化，记录每个节点的属性（如 tagName、id、className）、子节点、样式、位置信息等。
   2. 生成的快照数据结构是一个 JSON 格式对象，包含页面的完整初始状态。

2. 捕获用户的操作：监听用户在页面上的所有操作事件，包括鼠标事件、键盘事件、滚动事件、窗口大小改变、视图变化等。这些事件被序列化成一系列“增量快照”。

   事件序列化格式：

   时间戳：事件发生的时间。

   事件类型：例如 mousemove、click 等。

   位置或内容变化：例如鼠标的位置、输入框的新值。

   目标元素：事件发生的目标元素的引用。

3. 增量快照

   1. 增量快照的作用：记录用户操作导致的页面变化，例如，用户点击一个按钮后，按钮的 className 发生变化，这种局部变化会被记录为增量快照
   2. 增量快照的实现：使用 MutationObserver 监听 DOM 的变化，记录新增、删除、修改的节点和属性

4. 事件轴管理

   rrweb 会为每个事件分配一个时间戳，用于记录事件的发生时间。时间戳有助于在回放时正确地还原事件的顺序和间隔

5. 回放

   1. 根据初始快照重建 DOM 树，初始化回放页面。
   2. 依次读取事件流，根据时间戳和事件类型触发相应的操作
   3. rrweb 会根据事件流的时间戳计算事件之间的间隔，确保回放时的操作流畅且符合真实用户操作