Design and Implementation of a Financial Video Replay Platform Using rrweb

Background: Financial insurance regulators require full‑process evidence of online policy purchases, leading to a video‑based solution that records user actions on the page with minimal performance impact.

The replay platform captures user behavior unobtrusively, stores recordings, and enables developers to locate online issues more precisely than traditional log analysis.

Technology research and selection: The frontend uses the rrweb plugin for recording after evaluating WebRTC, Puppeteer, and html2Canvas, which had compatibility or performance drawbacks. rrweb consists of rrweb‑snapshot (snapshot & rebuild), rrweb (record & replay), and rrweb‑player (UI controls).

Data recording is split into full snapshots and incremental snapshots, illustrated by accompanying diagrams.

Backend storage: Due to the diverse DOM structures, a NoSQL solution was needed. After comparing file storage, Redis, and MongoDB, MongoDB was chosen for DOM storage, while MySQL handles query‑page indexing and integrates with MongoDB for efficient pagination.

Design and implementation: A front‑end/back‑end separation model was adopted. The frontend wraps rrweb and business logic into a single JS file exposing window.rrwebEvent.start() . Recorded data is sent via a saveData API for storage. Two query page versions exist: page‑level and session‑level.

Data handling: Recorded data is categorized as initialization data (first full DOM snapshot) and incremental data (subsequent updates). Initialization data is stored in both MongoDB and MySQL for later querying, while incremental data updates the session end time in MySQL.

Pitfalls and optimizations: Issues such as growing data size, cross‑domain session ID retrieval, and page‑exit detection were addressed by segmenting data, handling cookies, and local buffering. Optimizations include video sharing, additional query filters, and merging frequent MySQL updates via Redis sets to reduce database load.

Conclusion: The replay platform reliably restores user interaction traces, integrates easily with existing projects, and fulfills regulatory requirements without imposing additional integration burdens.