使用 rrweb 还原用户操作，排查线上 Bug

3.2 回放阶段（Replay）

1. 创建一个干净的 iframe 或容器。
2. 读取初始快照，重建 DOM 树。
3. 按照时间戳顺序，依次重放增量事件（模拟鼠标移动、触发 DOM 变更）。
4. 我们排查问题的时候看到的就像是在看视频一样。

四、架构设计与实施步骤

要实现一套完整的回放系统，我们需要三部分组成：客户端 SDK、数据存储服务、回放管理平台。

4.1 基本流程

1. 用户端： 用户访问页面 -> SDK 自动录制 -> 触发异常或会话结束 -> 数据上报。
2. 服务端： 接收数据 -> 压缩存储（如 MongoDB 或 OSS）。
3. 管理端： 开发人员登录后台 -> 查看错误列表 -> 点击'查看回放' -> 加载数据播放。

4.2 代码实现 Demo

安装 rrweb：npm install rrweb

1. 前端录制与上报

import rrweb from 'rrweb';

// 开始录制
rrweb.record({
  emit(event) {
    // 将事件数据发送到你的服务器
    // 建议：不要每个事件都发，要在本地缓存，攒够一定数量或时间后批量发送
    fetch('/api/record', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ events: [event], sessionId: getSessionId() })
    });
  },
  // 隐私保护：忽略包含 .sensitive 类的元素
  blockClass: 'sensitive',
  // 忽略脚本标签
  ignoreClass: 'ignore',
});

// 模拟获取会话 ID，用于关联错误日志
function getSessionId() {
  return localStorage.getItem('session_id') || generateUUID();
}

2. 后端接收（Node.js 示例）

app.post('/api/record', (req, res) => {
  const { events, sessionId } = req.body;
  // 将 events 存入数据库，key 为 sessionId
  db.save(sessionId, events);
  res.send({ success: true });
});

3. 管理端回放

import rrweb from 'rrweb';

// 从服务器获取录制数据
const events = await fetch(`/api/replay?sessionId=${id}`).then(r => r.json());
new rrweb.Player({
  target: document.getElementById('replay-container'),
  data: events,
});

五、关键局限与解决方案（避坑指南）

虽然 rrweb 很强大，但它不是万能的。'它只记录了用户的界面操作，没法监控到具体出了什么问题，它无法录制 js 里面的代码。'

5.1 局限一：无法直接捕获 JS 错误堆栈

rrweb 记录的是'现象'，不是'病因'。如果页面白屏了，回放可能只看到页面加载了一半然后不动了，但不知道是哪个变量 undefined 导致的。

解决方案

• rrweb + 错误监控 （把报错信息一起传到日志中）：
  1. 当 JS 报错时，错误监控 SDK 捕获错误堆栈。
  2. 将当前的 sessionId 附带在错误日志中一起上报。
  3. 在查看错误详情时，提供一个'查看回放'的按钮，通过 sessionId 拉起 rrweb 回放。这样你就既知道了为什么错（堆栈），又知道了怎么错的（操作路径）。

5.2 局限二：性能开销

全量录制所有 DOM 变化和鼠标移动，可能会占用用户主线程，导致页面卡顿。

解决方案：

1. 采样录制： 只对 10% 的用户开启录制，或者仅在检测到错误时开启（需配合预加载）。
2. 节流（Throttle）： 限制鼠标移动事件的录制频率（如每 500ms 记录一次）。
3. 暂停录制： 当页面切到后台（visibilitychange）时暂停录制。

5.3 局限三：隐私安全

如果不小心录下了用户的密码、身份证号或聊天记录，会引发严重的法律合规问题（GDPR/个人信息保护法）。

解决方案：

1. 配置 blockClass： 强制将敏感输入框标记为不录制（rrweb 默认会隐藏 input[type="password"]，但其他敏感信息需手动配置）。
2. 数据脱敏： 在上传前，对 JSON 数据中的特定字段进行清洗。
3. 访问控制： 回放平台必须权限严格，只有授权人员可查看，且查看日志需留痕。

5.4 局限四：数据量与存储

高频操作会产生大量 JSON 数据。

解决方案：

1. 压缩： 前端使用 pako (gzip) 压缩后再上传。
2. 生命周期： 设置数据保留期限（如只保留 7 天），过期自动删除。
3. 触发式上传： 平时只存在本地 IndexedDB，只有发生 Error 或用户主动反馈时，才上传之前的录制数据。

六、总结

前端监控体系的建设，是衡量一个团队工程化成熟度的重要标志。

• 错误监控（Sentry 等） 告诉我们 What（出了什么错）。
• 会话回放（rrweb） 告诉我们 How（用户怎么操作的）。
• 性能监控 告诉我们 Where（哪里慢）。

将 rrweb 集成到我们的监控体系中，它能极大地缩短 Bug 排查时间，减少开发与测试的沟通成本，更重要的是，它能让我们真正站在用户的视角去理解产品体验。

最后提醒： 技术虽好，隐私先行。在上线回放功能前，请务必更新隐私协议，并获得用户的同意。