Top Related Projects
An implementation of task/event based asynchronous pattern.
JavaScript API for Chrome and Firefox
Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
Quick Overview
rrweb (record and replay the web) is an open-source web session replay library. It allows you to record user interactions on a website and play them back later, providing valuable insights for debugging, user experience analysis, and support. rrweb captures DOM mutations, user interactions, and other events to create a faithful reproduction of user sessions.
Pros
- High-fidelity replay: Accurately reproduces user sessions, including DOM changes, user inputs, and scrolling
- Lightweight and performant: Minimal impact on website performance during recording
- Flexible integration: Can be easily integrated into existing web applications
- Cross-browser compatibility: Works across major modern browsers
Cons
- Privacy concerns: Recording user sessions may raise privacy issues if not implemented carefully
- Large data size: Recorded sessions can be quite large, especially for lengthy interactions
- Limited support for complex animations: Some advanced CSS animations may not be perfectly reproduced
- Learning curve: Requires some effort to understand and implement effectively
Code Examples
Recording a session:
import rrweb from 'rrweb';
let events = [];
rrweb.record({
emit(event) {
events.push(event);
},
});
Replaying a recorded session:
import rrweb from 'rrweb';
const replayer = new rrweb.Replayer(events);
replayer.play();
Saving recorded events to a server:
import rrweb from 'rrweb';
rrweb.record({
emit(event) {
fetch('/api/save-event', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(event),
});
},
});
Getting Started
To get started with rrweb, follow these steps:
-
Install rrweb in your project:
npm install rrweb
-
Import and initialize rrweb in your application:
import rrweb from 'rrweb'; let events = []; rrweb.record({ emit(event) { events.push(event); }, });
-
To replay the recorded session:
const replayer = new rrweb.Replayer(events); replayer.play();
For more advanced usage and configuration options, refer to the rrweb documentation.
Competitor Comparisons
An implementation of task/event based asynchronous pattern.
Pros of eventproxy
- Lightweight and focused on event handling, making it easier to use for specific event-driven scenarios
- Provides a simple API for managing asynchronous operations and event-based programming
- Better suited for Node.js server-side applications
Cons of eventproxy
- Limited in scope compared to rrweb's comprehensive web recording and replay capabilities
- Lacks features for capturing and reproducing user interactions in web applications
- Not designed for creating visual playbacks of user sessions
Code Comparison
eventproxy:
var EventProxy = require('eventproxy');
var ep = new EventProxy();
ep.all('event1', 'event2', function (result1, result2) {
console.log('Both events are fired');
});
rrweb:
import rrweb from 'rrweb';
rrweb.record({
emit(event) {
// store the event
},
});
While eventproxy focuses on managing asynchronous events, rrweb is specifically designed for recording and replaying web sessions. eventproxy is more suitable for general event handling in Node.js applications, whereas rrweb excels in capturing detailed user interactions for web applications. The choice between the two depends on the specific requirements of your project.
JavaScript API for Chrome and Firefox
Pros of Puppeteer
- Offers full browser automation and control, allowing for complex interactions and testing scenarios
- Provides a high-level API for web scraping, screenshot capture, and PDF generation
- Supports both headless and non-headless modes for different use cases
Cons of Puppeteer
- Requires a full browser instance, which can be resource-intensive
- Limited to Chromium-based browsers, reducing cross-browser compatibility
- Not designed for recording and replaying user sessions, which is rrweb's primary focus
Code Comparison
Puppeteer (browser automation):
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'screenshot.png'});
await browser.close();
rrweb (session recording):
rrweb.record({
emit(event) {
// store the event
},
});
While Puppeteer excels at browser automation and testing, rrweb focuses on recording and replaying user sessions. Puppeteer offers more control over browser interactions, making it suitable for complex web scraping and testing scenarios. However, rrweb provides a lightweight solution for capturing user interactions without the need for a full browser instance, making it more efficient for session recording and playback.
Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
Pros of Playwright
- Comprehensive browser automation tool for multiple browsers (Chromium, Firefox, WebKit)
- Powerful API for end-to-end testing, scraping, and automating web applications
- Strong community support and regular updates from Microsoft
Cons of Playwright
- Focused on browser automation, not specifically designed for session replay
- Requires more setup and configuration for recording user sessions
- Higher learning curve for developers not familiar with browser automation
Code Comparison
rrweb:
rrweb.record({
emit(event) {
// send event to server
},
});
Playwright:
const browser = await playwright.chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'screenshot.png' });
await browser.close();
Summary
rrweb is specifically designed for session replay and recording user interactions, making it easier to implement for that purpose. Playwright, on the other hand, is a more versatile tool for browser automation and testing, offering broader capabilities but requiring more setup for session recording. The choice between the two depends on the specific needs of the project, with rrweb being more straightforward for session replay and Playwright offering more extensive browser control and automation features.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
rrweb
The rrweb documentary (in Chinese, with English subtitles)
I have joined Github Sponsors and highly appreciate your sponsorship.
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. ð
ðº Presentation: Hacking the browser to digital twin your users ðº
Project Structure
rrweb is mainly composed of 3 parts:
- rrweb-snapshot, including both snapshot and rebuilding features. The snapshot is used to convert the DOM and its state into a serializable data structure with a unique identifier; the rebuilding feature is to rebuild the snapshot into corresponding DOM.
- rrweb, including two functions, record and replay. The record function is used to record all the mutations in the DOM; the replay is to replay the recorded mutations one by one according to the corresponding timestamp.
- rrweb-player, is a player UI for rrweb, providing GUI-based functions like pause, fast-forward, drag and drop to play at any time.
Roadmap
- storage engine: do deduplication on a large number of rrweb sessions
- compact mutation data in common patterns
- provide plugins via the new plugin API, including:
- XHR plugin
- fetch plugin
- GraphQL plugin
- ...
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.
- Fork this repository.
- Run
yarn install
in the root to install required dependencies for all sub-packages (note:npm install
is not recommended). - Run
yarn build:all
to build all packages and get a stable base, thenyarn dev
in the root to get auto-building for all the sub-packages whenever you modify anything. - Navigate to one of the sub-packages (in the
packages
folder) where you'd like to make a change. - Patch the code and run
yarn test
to run the tests, make sure they pass before you commit anything. Add test cases in order to avoid future regression. - If tests are failing, but the change in output is desirable, run
yarn test:update
and carefully commit the changes in test output. - Push the code and create a pull request.
Protip: You can run yarn test
in the root folder to run all the tests.
In addition to adding integration tests and unit tests, rrweb also provides a REPL testing tool.
Sponsors
Become a sponsor and get your logo on our README on Github with a link to your site.
Gold Sponsors ð¥
Silver Sponsors ð¥
Bronze Sponsors ð¥
Backers
Core Team Members
Yuyz0112 |
Yun Feng |
eoghanmurray |
Juice10 open for rrweb consulting |
Who's using rrweb?
![]() |
![]() |
|
|
|
![]() |
![]() |
![]() |
|
|
![]() |
|
Top Related Projects
An implementation of task/event based asynchronous pattern.
JavaScript API for Chrome and Firefox
Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot