rrweb-io/rrweb
Rrweb
rrweb is a DOM session recording library and serialization framework used to record and replay web sessions. It converts the state of a web page into a serializable JSON data structure and tracks mutations to reconstruct user interactions within a replay engine.
The system distinguishes itself by using a sandboxed iframe for reconstruction to isolate replayed content, preventing script execution and form submissions. It ensures visual consistency through CSS inline-style flattening and provides sensitive data masking to prevent private information from being captured.
The project covers a broad range of capabilities, including user interaction tracking for mouse and keyboard events, mutation-based delta recording, and periodic snapshotting for timestamp seeking. It also includes tools for session analysis via server-side processing and a video exporter to transform recorded DOM data into standard video files.
Features
- Session Replay - Renders recorded snapshots and mutation events to recreate a web session exactly as it appeared to the user.
- Session Replay - Renders recorded snapshots and events within a sandboxed environment to visualize a user's journey on a website.
- Session Recording - Provides a comprehensive system for capturing and replaying user interactions and DOM changes within a web interface.
- DOM State Snapshots - Provides periodic full DOM snapshots to allow jumping to any point in a recorded session.
- DOM Mutation Tracking - Tracks DOM mutations and state changes to create a precise sequence for session playback.
- Session State Serializers - Converts the DOM and its current state into a serializable data structure for static representation.
- Iframe Sandboxing - Renders replayed content within a restricted iframe to prevent script execution and block unintended form submissions.
- DOM to JSON Serialization - Transforms the DOM tree into a structured JSON format that preserves text, comments, and input values.
- Mutation Delta Recording - Tracks DOM changes via MutationObserver to record only incremental updates instead of full page snapshots.
- User Interaction Event Logging - Logs precise user interactions like mouse movements and keyboard inputs for behavioral analysis and reconstruction.
- User Interaction Recording - Logs mouse movements, keyboard input, and HTML changes for behavioral analysis.
- DOM Element ID Mapping - Assigns persistent IDs to DOM elements to track mutations and interactions across different recording segments.
- Inline Style Flattening - Converts parsed CSS rules into inline styles to maintain page appearance regardless of stylesheet accessibility.
- DOM Mutation Observation - Records structural and attribute changes to the DOM via MutationObserver to reconstruct page state.
- Session Reconstruction - Implements the reconstruction of a user interface from recorded DOM mutations and snapshots for playback.
- DOM Node Reference Tracking - Assigns unique identifiers to DOM nodes to map interactions and mutations without re-serializing the entire page.
- DOM Serialization Frameworks - Provides a utility that converts the current state of a web page into a serializable JSON data structure.
- Baseline State Capture - Traverses the DOM to create a serializable data structure that preserves styles and input values for the recording baseline.
- State Snapshots - Captures full serializable DOM trees at fixed intervals to allow random access seeking and playback recovery.
- Server-Side Session Analysis - Provides tools for analyzing recorded session data using a virtual DOM implementation in a server environment.
- Traffic-Replay Sandboxes - Renders recorded sessions within a sandboxed iframe to block form submissions and script execution.
- Playhead Seeking - Allows starting playback from any timestamp by executing preceding snapshots before resuming asynchronous replay.
- JavaScript Playback APIs - Provides a programmatic JavaScript API to control the playback process, including start, pause, and seek operations.
- Video Export Pipelines - Transforms recorded DOM session data into standard video files for viewing in external media players.
- Data Masking - Prevents private information from being recorded during session capture using CSS classes and field detection.
- Sensitive Content Obscuration - Prevents specific HTML elements or text from being recorded using CSS classes or field detection.
- Replay Timing Synchronization - Uses a precise timing mechanism to replay asynchronous DOM mutations and user events at their original speed.
- Visual Session Reproductions - Records the precise sequence of DOM changes and inputs that lead to an error for easier debugging.
- Playback Controls - Ships a graphical interface for managing session playbacks, including pause, fast-forward, and seeking controls.
- Session Playback Interfaces - Displays a graphical user interface with a timeline for navigating recorded web sessions.
- Event Segmenting - Groups recording events into segments based on time or count to facilitate partial data capture and recovery.
- Viewport State Recording - Records page scrolling and window resizing events to maintain the correct visual perspective during replay.
- Visual Consistency Inlining - Ensures visual consistency during playback by converting parsed CSS rules into inline styles.
- Monitoring and Analytics - Library for recording and replaying user sessions to debug issues.
- Frameworks de test - Record and replay web operations.
