🗺️ 总体架构概览
🛠️ 前端录制 SDK 封装
1. 安装依赖
npm install rrweb lz-string
2. 封装录制逻辑（rrweb-recorder.ts）
import { record } from 'rrweb';
import { compressToUTF16 } from 'lz-string';
let events: any[] = [];
export function startRecording(sessionId: string) {
record({
emit(event) {
events.push(event);
if (events.length >= 50) {
flush(sessionId);
}
},
checkoutEveryNms: 15_000,
checkoutEveryNth: 100,
});
}
function flush(sessionId: string) {
const compressed = compressToUTF16(JSON.stringify(events));
fetch('/api/rrweb/upload', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ sessionId, data: compressed }),
});
events = [];
}
3. 集成入口（示例）
import { startRecording } from './rrweb-recorder';
const sessionId = generateSessionId(); // UUID or traceId from error tracker
startRecording(sessionId);
📥 服务端存储与处理（Node.js 示例）
1. 接收压缩数据并解压
import express from 'express';
import { decompressFromUTF16 } from 'lz-string';
const app = express();
app.use(express.json());
app.post('/api/rrweb/upload', async (req, res) => {
const { sessionId, data } = req.body;
const decompressed = JSON.parse(decompressFromUTF16(data));
await saveToDatabase(sessionId, decompressed);
res.sendStatus(200);
});
2. 数据库存储结构（Mongo 示例）
{
sessionId: 'abc-123',
timestamp: ISODate(),
userId: 'user-1',
events: [...],
pageUrl: 'https://yourapp.com/xxx',
errorLogId: 'err-xyz' // optional
}
🔒 安全性与隐私注意事项
| 项目 | 建议 |
|---|---|
| 输入字段 | 默认已脱敏 <input type="password"> |
| 敏感路径 | 录制前过滤 DOM（如 .credit-card） |
| 鉴权 | 上传接口需用户登录 + 权限验证 |
| 回放权限 | 后台地址建议加签 + IP 限制 |
📺 回放页面封装
1. 安装 player
npm install rrweb-player
2. 回放页面 HTML（player.html）
<!DOCTYPE html>
<html lang="en">
<head>
<title>rrweb 回放</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player/dist/style.css" />
</head>
<body>
<div id="player"></div>
<script src="https://cdn.jsdelivr.net/npm/rrweb-player"></script>
<script>
fetch(`/api/rrweb/session?sessionId=abc-123`)
.then((res) => res.json())
.then(({ events }) => {
new rrwebPlayer({
target: document.getElementById('player'),
props: {
events,
showController: true,
},
});
});
</script>
</body>
</html>
📌 常见优化建议
| 问题 | 建议 |
|---|---|
| 回放不准 | 确保事件按时间戳排序 |
| 数据过大 | 结合 lz-string 或 gzip 压缩 |
| 播放卡顿 | 分段加载播放（如分页加载） |
| 回放延迟高 | 将录制逻辑放入 Web Worker |
✅ 小结
rrweb 是一个极具价值的用户行为分析工具，其企业级应用关键在于：
- 安全压缩 + 高效上传
- 鉴权保护 + 数据解耦
- 回放工具 UI 友好
- 与监控/客服/分析平台打通
实用小工具
App Store 截图生成器、应用图标生成器 、在线图片压缩和 Chrome插件-强制开启复制-护眼模式-网页乱码设置编码
乖猫记账，AI智能分类的聊天记账。