rrweb 项目使用指南：从录制到回放的全流程解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00592/article/details/148375146

rrweb 项目使用指南：从录制到回放的全流程解析

rrweb record and replay the web 项目地址: https://gitcode.com/gh_mirrors/rr/rrweb

什么是 rrweb？

rrweb 是一款开源的 Web 会话录制与回放库，它能够完整记录用户在网页上的所有操作，包括 DOM 变化、鼠标移动、滚动、点击等交互行为，并支持精确回放这些操作。与传统的屏幕录制不同，rrweb 采用基于 DOM 序列化的技术，使得录制数据量极小且回放质量极高。

安装方式

直接引入脚本

对于快速集成，推荐使用 CDN 方式引入：

<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/style.css"/>

<!-- 引入核心库 -->
<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.umd.min.cjs"></script>

如果只需要录制功能，可以仅引入录制模块：

<script src="https://cdn.jsdelivr.net/npm/@rrweb/record@latest/dist/record.umd.min.cjs"></script>

NPM 安装

对于现代前端项目，推荐使用 npm 安装：

npm install --save rrweb

核心功能模块

rrweb 采用模块化设计，主要包含以下功能模块：

录制模块：负责捕获网页上的所有交互和 DOM 变化
回放模块：将录制的数据还原为可交互的会话回放
快照模块：处理 DOM 序列化和重建
插件系统：提供扩展功能如控制台记录、Canvas 录制等

基础使用教程

录制网页会话

录制功能的基本使用非常简单：

const events = [];

const stopRecording = rrweb.record({
  emit(event) {
    // 收集录制事件
    events.push(event);
    
    // 示例：当事件超过100条时停止录制
    if (events.length > 100) {
      stopRecording();
    }
  }
});

回放录制内容

回放需要先引入样式文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/style.css"/>

然后初始化回放器：

const replayer = new rrweb.Replayer(events);
replayer.play(); // 开始回放

高级配置选项

录制配置

rrweb 提供了丰富的录制配置选项：

rrweb.record({
  emit(event) { /*...*/ },
  // 每100个事件后生成完整快照
  checkoutEveryNth: 100,
  // 隐私保护配置
  blockClass: 'no-record',  // 不录制特定元素
  maskTextClass: 'mask-text', // 文本内容打码
  // 输入元素处理
  maskInputOptions: {
    password: true,  // 密码输入自动打码
    email: true      // 邮箱输入打码
  },
  // 性能优化
  sampling: {
    mousemove: 50,  // 降低鼠标移动采样率
    scroll: 100     // 降低滚动采样率
  }
});

回放控制

回放器提供了完善的 API 控制：

const replayer = new rrweb.Replayer(events, {
  speed: 2,  // 2倍速回放
  skipInactive: true  // 跳过无操作时段
});

// 控制方法
replayer.play();     // 播放
replayer.pause();    // 暂停
replayer.goto(5000); // 跳转到第5秒