rrweb README

The project's README from github.com/rrweb-io/rrweb. As one markdown file: README.md.

Try rrweb

rrweb

(new!) rrweb cloud - hosted rrweb backend is now available

Join the chat at slack Twitter Follow Reddit record bundle size replay bundle size CDN catalog

中文文档

rrweb refers to 'record and replay the web', which is a tool for recording and replaying users' interactions on the web.

Guide

📚 Read the rrweb guide here. 📚

🍳 Recipes 🍳

📺 Presentation: Hacking the browser to digital twin your users 📺

Project Structure

rrweb is composed of the following principal parts:

Roadmap

Internal Design

Contribute Guide

Since we want the record and replay sides to share a strongly typed data structure, rrweb is developed with typescript which provides stronger type support.

Typescript handbook

For the latest setup, testing, and pull request workflow, see Contributing to rrweb.

In addition to adding integration tests and unit tests, rrweb also provides a REPL testing tool.

Using the REPL tool

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site.

Gold Sponsors 🥇

sponsor sponsor sponsor sponsor sponsor sponsor sponsor

Silver Sponsors 🥈

sponsor sponsor sponsor sponsor sponsor sponsor sponsor

Bronze Sponsors 🥉

sponsor sponsor sponsor sponsor sponsor sponsor sponsor sponsor sponsor

Backers

Core Team Members

Justin Halsall
Juice10
open for rrweb consulting

eoghanmurray


Yun Feng

Who's using rrweb?

SmartX PostHog Smart screen recording for SaaS
Sentry Pendo Mixpanel Datadog
Amplitude New Relic The first ever UX automation tool Remote Access & Co-Browsing
The open source, fullstack Monitoring Platform. Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions. Intercept, Modify, Record & Replay HTTP Requests. In-app bug reporting & customer feedback platform.
Self-hosted website analytics with heatmaps and session recordings. Interactive product demos for small marketing teams

rrweb (rrweb-io/rrweb)

Searching Database…

20.3K ·GitHub
这是干什么的?rrweb('record and replay the web',录制并回放网页)是一个开源工具,用于录制和回放用户在网站上的操作——一种 DOM 级别的会话回放,可以嵌入到你自己的应用中,定位类似 Fullstory 或 LogRocket。
它是一个托管服务,还是我加到自己网站里的库?它是一组添加到 Web 应用中的开源库,而不是 SaaS:包括 rrweb-snapshot、record、replay 和 rrweb-player。此外现在还提供了一个叫 rrweb cloud 的托管后端。
我怎么开始录制会话?README 里链接了 rrweb 指南,里面有完整的上手流程;第一步是通过 npm 把 rrweb 包安装到你的 Web 应用中,然后启动录制器。
我需要自己的后端来存储录制内容吗?你需要一个地方来存放录制好的会话:rrweb cloud 是一个托管方案,路线图上还规划了一个能对大量会话去重的存储引擎。除此之外,存储就得自己搭建了。
它能捕获像 XHR 和 fetch 这样的网络请求吗?默认不行:捕获网络活动(XHR、fetch、GraphQL)只能通过还在规划中的新插件 API 实现,一种节省 token 的 AI 会话回放格式也仍在开发中。
那我是把它接入到自己的产品里——我的用户根本看不到 rrweb 本身,对吧?没错:开发者和产品团队把录制器嵌入到自己的 Web 应用中,在自己那边回放会话——README 里列出了不少基于 rrweb 搭建的监控、分析和错误上报平台。
它只适用于网页,还是也能录制原生应用?仅限 Web——它录制的是浏览器中网页的 DOM,并在浏览器里回放;rrweb-player 是构建在回放引擎之上的一个 Web 界面。
一段录制到底会捕获哪些内容?录制会捕获页面上每一次 HTML 状态变化和用户操作,所以页面上渲染出来的或用户输入的内容都可能进入事件流;回放端则运行在沙箱中。
录制在底层是怎么工作的?首先做一次初始快照,把 DOM 及其状态转换成带唯一标识符的可序列化数据结构,然后 rrweb 会随用户浏览持续记录增量变化和用户操作。回放时则重建快照并播放事件流。
一段录制能跨越多次页面加载吗?可以——多次页面加载可以串联成一段完整的录制。
有现成的播放器界面吗?有,rrweb-player——一个构建在回放包之上的图形界面,支持暂停、快进,还能通过拖拽进度条从任意时间点开始播放。
rrweb-snapshot 能单独使用吗?可以——在所有 JavaScript 都停用的情况下,它能生成一张基于静态 HTML 的当前页面状态'截图',不需要录制。
Creator
rrweb-io
Size
13.1 MB
Stars
20.3K
Age
8y
Commits · 90 Days