rrweb/README.zh_CN.md

Try rrweb

rrweb

rrweb 纪录片（中文）

我已开通 Github Sponsor， 您可以通过赞助的形式帮助 rrweb 的开发。

rrweb 是 'record and replay the web' 的简写，旨在利用现代浏览器所提供的强大 API 录制并回放任意 web 界面中的用户操作。

指南

📚 rrweb 使用指南 📚

🍳 场景示例 🍳

项目结构

rrweb 主要由 3 部分组成：

• rrweb-snapshot，包含 snapshot 和 rebuild 两个功能。snapshot 用于将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识；rebuild 则是将 snapshot 记录的数据结构重建为对应的 DOM。
• rrweb，包含 record 和 replay 两个功能。record 用于记录 DOM 中的所有变更（mutation）；replay 则是将记录的变更按照对应的时间一一重放。
• rrweb-player，为 rrweb 提供一套 UI 控件，提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。

Roadmap

• storage engine: 对大规模 rrweb 数据进行去重
• 在常见场景下对 mutation 数据进行压缩
• 基于新的插件 API 提供更多插件，包括:
  • XHR 插件
  • fetch 插件
  • GraphQL 插件
  • ...

Internal Design

• 序列化
• 增量快照
• 回放
• 沙盒

Contribute Guide

为了保证录制和回放时可以对应到一致的数据结构，rrweb 采用 typescript 开发以提供更强的类型支持。

Typescript 手册

1. Fork 需要修改的 rrweb 组件仓库
2. yarn install 安装所需依赖
3. 修改代码并通过测试
4. 提交代码，创建 pull request

除了添加集成测试和单元测试之外，rrweb 还提供了交互式的测试工具。

使用 REPL 工具