OpenReplay — Self-Hosted Session Replay for Web Debugging

Introduction

OpenReplay records user sessions in your web application and lets you replay them with full context: DOM mutations, network waterfall, JS errors, and performance timings. Unlike cloud-hosted alternatives, it runs on your own infrastructure, so sensitive user data never leaves your network.

What OpenReplay Does

• Records and replays user sessions with pixel-perfect DOM reconstruction
• Captures XHR/Fetch requests, WebSocket frames, and GraphQL queries
• Logs JavaScript errors, console output, and Redux/Vuex state changes
• Provides click maps, rage-click detection, and user journey funnels
• Supports co-browsing for live customer support sessions

Architecture Overview

The JavaScript tracker serializes DOM mutations and browser events into a compact binary format sent to a collector service. The backend ingests events into a PostgreSQL database and object storage. The web dashboard queries this data and renders sessions using a custom replay engine that reconstructs the DOM in an iframe, synchronized with network and console timelines.

Self-Hosting & Configuration

• Requires Docker Compose or a Kubernetes cluster for production deployments
• The collector, API, and frontend are separate services behind an Nginx gateway
• Data is stored in PostgreSQL and an S3-compatible object store (MinIO by default)
• Configure session sampling rate and data masking via the tracker SDK options
• Supports SSO via SAML and OIDC for team authentication

Key Features

• Full session replay with network, console, and performance panels
• Built-in product analytics with funnels, click maps, and path analysis
• JavaScript error tracking with source map support for stack traces
• Plugins for Redux, Vuex, MobX, NgRx, and GraphQL state inspection
• Assists for live co-browsing and real-time session observation

Comparison with Similar Tools

• FullStory — Cloud SaaS with AI insights; OpenReplay is self-hosted and open-source
• Hotjar — Focused on heatmaps and surveys; OpenReplay provides deeper developer debugging tools
• Sentry Session Replay — Add-on to error tracking; OpenReplay is a dedicated replay platform with richer analytics
• PostHog — Broad product analytics suite; OpenReplay specializes in high-fidelity session replay

FAQ

Q: Does OpenReplay record passwords and sensitive input? A: By default, input fields are masked. You can fine-tune masking with CSS class selectors or the tracker's privacy options.

Q: How much storage does session data use? A: Roughly 50-100 KB per minute of session, depending on page complexity and event frequency.

Q: Can I use it with React, Vue, and Angular? A: Yes. The tracker is framework-agnostic and works with any web app. Dedicated plugins add state-management integration for React, Vue, and Angular.

Q: Is there a hosted cloud option? A: Yes. OpenReplay offers a managed cloud plan alongside the self-hosted open-source edition.

Sources

• https://github.com/openreplay/openreplay
• https://docs.openreplay.com/