# rrweb — Record and Replay the Web

> An open-source web session recording library that captures DOM mutations, user interactions, and network events, then deterministically replays them in a sandboxed player for debugging and analytics.

## Install

Save as a script file and run:

# rrweb — Record and Replay the Web

## Quick Use
```bash
npm install rrweb rrweb-player
```
```js
import { record } from 'rrweb';
const stopFn = record({ emit(event) { events.push(event); } });
// later: replay
import rrwebPlayer from 'rrweb-player';
new rrwebPlayer({ target: document.body, props: { events } });
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-d8796d1c
Author: Script Depot