rrweb — Record and Replay the Web

Introduction

rrweb (record and replay the web) serializes the entire DOM into a snapshot and then incrementally records every mutation, scroll, mouse movement, and input event. The result is a frame-perfect, privacy-maskable replay that requires no video encoding and weighs a fraction of a screen recording.

What rrweb Does

• Captures a full DOM snapshot plus incremental mutations via MutationObserver
• Records mouse movements, clicks, scrolls, touch events, and viewport resizes
• Supports input masking and class-based privacy controls for PII
• Provides a standalone player component with timeline scrubbing and speed control
• Offers plugins for console log capture, sequential-id generation, and canvas recording

Architecture Overview

rrweb splits into three packages: rrweb (the recorder), rrweb-player (the replayer UI), and rrweb-snapshot (the serialization core). The recorder attaches a MutationObserver to the document root and batches incremental changes into typed event objects. During replay, the player rebuilds a shadow document inside an iframe and applies each event at its original timestamp, producing a deterministic re-enactment of the user session.

Self-Hosting & Configuration

• Install via npm/yarn/pnpm; no external service required
• Configure recordCanvas, collectFonts, and maskAllInputs options in the recorder
• Persist events to any backend (REST, WebSocket, or local IndexedDB)
• Deploy rrweb-player as a standalone React or vanilla JS component
• Use the @rrweb/packer plugin for LZ-string compression to reduce payload size

Key Features

• Zero-video-codec approach produces smaller payloads than screen recordings
• Sub-millisecond timestamp resolution for precise interaction replay
• Privacy-first design with configurable input masking and element blocking
• Canvas and WebGL recording via an opt-in snapshot plugin
• Framework-agnostic: works with React, Vue, Angular, or plain HTML

Comparison with Similar Tools

• LogRocket — commercial SaaS with built-in error tracking; rrweb is fully self-hostable
• FullStory — proprietary analytics suite; rrweb gives you raw event data you own
• Hotjar — focuses on heatmaps and surveys; rrweb provides frame-accurate replay
• OpenReplay — full platform built on rrweb's recording core with added DevTools integration

FAQ

Q: How large are recorded sessions? A: A typical 5-minute session produces 1-3 MB of compressed JSON, far smaller than equivalent video.

Q: Can I mask sensitive user data? A: Yes. rrweb supports class-based element blocking, input masking, and custom serialization hooks.

Q: Does rrweb work with single-page applications? A: Yes. The MutationObserver-based approach captures SPA route changes and dynamic DOM updates automatically.

Q: What browsers are supported? A: All modern browsers with MutationObserver support, including Chrome, Firefox, Safari, and Edge.

Sources

• https://github.com/rrweb-io/rrweb
• https://www.rrweb.io/