Merge pull request #9 from EzStars/docs/Zero

docs: 📝 增加行为监控相关文档

Author: Eomnational

docs/使用文档/行为监控/用户行为收集.md

@@ -0,0 +1,10 @@
+## 用户行为收集
+
+用户在页面中可能有如下行为：
+
+-   鼠标行为
+-   键盘行为
+-   页面跳转行为
+-   点击行为
+
+通过收集这些用户行为数据，我们可以分析用户的行为模式、偏好和需求，从而优化网站或应用的设计和功能，提高用户体验和业务指标。亦或是页面发生错误时，我们可以根据这些行为来还原错误。

docs/使用文档/行为监控/错误录屏回放.md

@@ -0,0 +1,37 @@
+## 错误录屏回放
+
+### 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` 会根据事件流的时间戳计算事件之间的间隔，确保回放时的操作流畅且符合真实用户操作