Tagged articles
9 articles
Page 1 of 1
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 5, 2026 · Frontend Development

Why Frontend Recording & Replay Matters: Master rrweb for Debugging and Analysis

This article explains why front‑end recording and replay are essential for diagnosing invisible bugs, introduces the open‑source rrweb tool and its core modules, compares it with video and screenshot methods, and provides step‑by‑step guidance for installing, configuring, recording, replaying, and optimizing rrweb in Vue 3 applications.

DebuggingVuefrontend
0 likes · 36 min read
Why Frontend Recording & Replay Matters: Master rrweb for Debugging and Analysis
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 31, 2023 · Frontend Development

User Behavior Recording Techniques: Video, Screenshot, and DOM Snapshot (rrweb) Comparison and Implementation

This article examines various user behavior recording methods—including WebRTC video capture, canvas-based screenshot recording, and DOM snapshot recording with rrweb—detailing their technical implementations, advantages, limitations, and suitable application scenarios for product analysis, debugging, and automated testing.

VueWebRTCfrontend
0 likes · 28 min read
User Behavior Recording Techniques: Video, Screenshot, and DOM Snapshot (rrweb) Comparison and Implementation
Bilibili Tech
Bilibili Tech
Jul 18, 2023 · Frontend Development

Frontend Performance Monitoring: Loading Metrics and Jank Detection using PerformanceObserver and js-self-profiling API

The article explains how to build a frontend performance monitoring system that uses PerformanceObserver and the js‑self‑profiling API to capture Core Web Vitals, detect long‑task jank, correlate network requests and user actions, and preview future ComputePressure metrics for comprehensive user‑experience diagnostics.

ComputePressurePerformance Monitoringfrontend
0 likes · 11 min read
Frontend Performance Monitoring: Loading Metrics and Jank Detection using PerformanceObserver and js-self-profiling API
ByteFE
ByteFE
Apr 17, 2023 · Frontend Development

rrweb: A Deep Dive into Web Page Recording and Replay Mechanism

rrweb is an open-source library that records web page DOM changes as JSON arrays instead of video streams, enabling precise replay of user interactions without compression artifacts or storage overhead.

DOM recordingJavaScriptMutationObserver
0 likes · 20 min read
rrweb: A Deep Dive into Web Page Recording and Replay Mechanism
政采云技术
政采云技术
Nov 9, 2021 · Frontend Development

An Overview of Web Screen Recording Techniques and Implementation

This article examines both perceptual and non‑perceptual web screen‑recording solutions, detailing WebRTC‑based capture, rrweb DOM recording, associated code examples, playback and live streaming methods, and discusses their suitable application scenarios and browser compatibility.

Screen RecordingWebRTCrrweb
0 likes · 14 min read
An Overview of Web Screen Recording Techniques and Implementation
HomeTech
HomeTech
Aug 18, 2021 · Frontend Development

Design and Implementation of a Financial Video Replay Platform Using rrweb

This article details the background, technology selection, architecture, implementation, challenges, and optimizations of a financial video replay platform that records user interactions with rrweb on the frontend and stores data using MongoDB and MySQL on the backend to meet regulatory and debugging needs.

Backend StorageFinancial Techfrontend recording
0 likes · 7 min read
Design and Implementation of a Financial Video Replay Platform Using rrweb
Yang Money Pot Technology Team
Yang Money Pot Technology Team
Apr 1, 2021 · Frontend Development

Implementing Page-Level User Interaction Recording and Replay for Insurance Compliance Using rrweb, Puppeteer, and FFmpeg

This article details a compliance‑driven solution that records, replays, and merges user interaction videos across multiple insurance web pages by leveraging rrweb for event capture, Puppeteer for automated playback, and FFmpeg for video stitching, while addressing performance, storage, and privacy challenges.

Puppeteercomplianceffmpeg
0 likes · 18 min read
Implementing Page-Level User Interaction Recording and Replay for Insurance Compliance Using rrweb, Puppeteer, and FFmpeg
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Feb 1, 2021 · Frontend Development

Turn Web Interactions into Video: Recording, Incremental Snapshots, and rrweb Playback

This article explains how to capture user interactions on insurance web pages by taking DOM snapshots, creating incremental snapshots with MutationObserver, leveraging the rrweb library for recording and replay, and converting the recorded data into high‑frame‑rate video using Puppeteer and FFmpeg to ensure reliable evidence.

DOM snapshotMutationObserverfrontend
0 likes · 13 min read
Turn Web Interactions into Video: Recording, Incremental Snapshots, and rrweb Playback