Convert Figma logo to code with AI

rrweb-io logorrweb

record and replay the web

18,234
1,527
18,234
357

Top Related Projects

An implementation of task/event based asynchronous pattern.

91,008

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:

  1. Install rrweb in your project:

    npm install rrweb
    
  2. Import and initialize rrweb in your application:

    import rrweb from 'rrweb';
    
    let events = [];
    
    rrweb.record({
      emit(event) {
        events.push(event);
      },
    });
    
  3. 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.

91,008

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Try rrweb

rrweb

The rrweb documentary (in Chinese, with English subtitles)

Join the chat at slack Twitter Follow total gzip size recorder gzip size

中文文档

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. 📚

🍳 Recipes 🍳

📺 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.

Typescript handbook

  1. Fork this repository.
  2. Run yarn install in the root to install required dependencies for all sub-packages (note: npm install is not recommended).
  3. Run yarn build:all to build all packages and get a stable base, then yarn dev in the root to get auto-building for all the sub-packages whenever you modify anything.
  4. Navigate to one of the sub-packages (in the packages folder) where you'd like to make a change.
  5. 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.
  6. If tests are failing, but the change in output is desirable, run yarn test:update and carefully commit the changes in test output.
  7. 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.

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


Yuyz0112


Yun Feng


eoghanmurray


Juice10
open for rrweb consulting

Who's using rrweb?

Smart screen recording for SaaS
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

NPM DownloadsLast 30 Days