Session Recording Architecture Guide
Build your own Hotjar.
A 100+ page technical guide to building a session recording system from scratch: DOM delta encoding, event stream compression, playback engine, and privacy masking. The architecture behind tools charging $300+/mo.
Inside the guide
What You'll Learn
DOM Delta Encoding
Capture only what changed — not full DOM snapshots. 10x smaller payloads than naive recording.
Event Compression
Binary encoding + ZSTD compression pipeline. Sub-100KB per 10-minute session.
Playback Engine
Frame-accurate playback with seek, speed control, and viewport simulation.
Privacy Masking
CSS selector-based input masking, PII redaction at capture time — GDPR-ready.
Storage Architecture
Tiered storage: hot (Redis), warm (S3), cold (Glacier). Automatic lifecycle management.
Table of Contents
Who This Is For
Written by engineers, for engineers
Senior Engineer
Building production systems and tired of re-inventing the wheel on every project.
Software Architect
Needs battle-tested patterns to back architectural decisions with evidence.
Startup CTO
Must ship fast without accumulating technical debt that kills you later.
The Problem
Hotjar and FullStory cost $300-2000/mo — impossible for early-stage products
Open-source alternatives lack production-grade privacy controls
DOM recording internals are never documented outside closed-source teams
Get Instant Access
One-time payment. Instant PDF download.
Personal License
- 100+ page PDF
- TypeScript code examples
- Architecture diagrams
- Lifetime updates
Frequently Asked Questions
How is this different from the rrweb library docs?
rrweb handles capture. This guide covers the full production system: storage, playback, privacy, analytics, and scaling.
What scale does this support?
The architecture described handles 50M+ sessions per month. Design choices are explained at each scale threshold.