Recipe

Session Replay Viewer

Pixel-perfect DOM snapshot replay with privacy redaction, bandwidth budgeting, and seekable timeline scrubbing.

Architecture

1MutationObserver captures DOM deltas as compressed JSON frames
2Frames batched in ring buffer, flushed every 5s or on visibility change
3Privacy engine redacts inputs, text nodes matching PII regex before serialization
4Viewer reconstructs DOM via rrweb player with custom scrubber UI

Bandwidth Budget

Per-session cap
2 MB
Frame payload
~4 KB
Flush interval
5 seconds

Privacy Redaction

  • ▸Input[type=password] always excluded from snapshot
  • ▸Credit card, SSN, email patterns masked with █ before serialization
  • ▸Data-meridian-ignore attribute blocks entire subtree from recording
  • ▸Canvas elements rendered as placeholder rectangles only

Viewer Controls

▶ Play⏸ Pause2× Speed1× Speed0.5× Speed⟲ Skip to error⏮ Seek -10s⏭ Seek +10s
← Back to docsImplementation →