rrweb 集成方案

最新推荐文章于 2025-08-11 22:14:14 发布

@井九

最新推荐文章于 2025-08-11 22:14:14 发布

阅读量893

点赞数 5

CC 4.0 BY-SA版权

文章标签： java

本文链接：https://blog.csdn.net/problc/article/details/148840677

🗺️ 总体架构概览

在这里插入图片描述

🛠️ 前端录制 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