介绍如何使用 rrweb 库实现 Web 会话录制与回放，解决线上 Bug 难以复现的问题。rrweb 通过记录 DOM 变更和交互事件生成轻量级 JSON 数据，支持隐私配置与回放。文章涵盖核心原理、架构设计、代码实现 Demo 以及性能、隐私等局限性的解决方案。结合错误监控 SDK，可实现从‘哪里错’到‘怎么错’的全链路排查，提升开发效率与用户体验。
开发者最害怕的时刻莫过于：测试环境一切正常，一上线用户就报错。
更糟糕的是，用户反馈往往只有一句：'页面打不开了'或者'点击没反应'。当我们试图复现时，却发现自己无论怎么操作都无法触发 Bug。用户不愿意提供详细步骤，客服也传达不清楚，最后只能对着日志干瞪眼。
如果有这样一种技术，能像'时光倒流'一样，完整还原用户出错前的每一步操作，那该多好？
在产品运营中， 绝大多数用户遇到体验问题或 Bug 时，选择是直接关闭页面，卸载应用，然后永远不再回来。我们失去了挽留他们的机会，甚至不知道他们为什么离开。
前端开发的口头禅：'我没复现这个问题啊，用户怎么操作的'。因为线上环境太复杂：
传统的日志监控（如 Sentry）只能告诉我们哪里错了（Error Stack），但很难告诉我们用户是怎么操作才导致错的。 会话回放技术填补了这个空白。
rrweb (record and replay web) 是一个开源的 Web 会话录制与回放库。
很多人以为 rrweb 是像 OBS 一样录制视频流。这么想你就错了
rrweb 的工作原理可以概括为：'把页面上的状态变成 JSON 数据，然后拿着这个 JSON 数据再转换成页面'。
rrweb 在用户浏览器中运行，主要依赖以下技术：
数据流示例：
// 初始快照 { "type": 2, "data": { "node": { "tagName": "html", ... } } }
// 增量操作：用户点击了按钮 { "type": 3, "data": { "source": 1, "positions": [{ "x": 100, "y": 200 }] } }
// 增量操作：DOM 发生变化 { "type": 3, "data": { "source": 2, "adds": [...], "removes": [...] } }
要实现一套完整的回放系统，我们需要三部分组成：客户端 SDK、数据存储服务、回放管理平台。
安装 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 里面的代码。'
rrweb 记录的是'现象'，不是'病因'。如果页面白屏了，回放可能只看到页面加载了一半然后不动了，但不知道是哪个变量 undefined 导致的。
解决方案
sessionId 附带在错误日志中一起上报。sessionId 拉起 rrweb 回放。这样你就既知道了为什么错（堆栈），又知道了怎么错的（操作路径）。全量录制所有 DOM 变化和鼠标移动，可能会占用用户主线程，导致页面卡顿。
解决方案：
如果不小心录下了用户的密码、身份证号或聊天记录，会引发严重的法律合规问题（GDPR/个人信息保护法）。
解决方案：
blockClass： 强制将敏感输入框标记为不录制（rrweb 默认会隐藏 input[type="password"]，但其他敏感信息需手动配置）。高频操作会产生大量 JSON 数据。
解决方案：
pako (gzip) 压缩后再上传。前端监控体系的建设，是衡量一个团队工程化成熟度的重要标志。
将 rrweb 集成到我们的监控体系中，它能极大地缩短 Bug 排查时间，减少开发与测试的沟通成本，更重要的是，它能让我们真正站在用户的视角去理解产品体验。
最后提醒： 技术虽好，隐私先行。在上线回放功能前，请务必更新隐私协议，并获得用户的同意。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online