[Open Source] #191 - rrweb: Hệ thống "Ghi và Phát lại" trải nghiệm Web với kiến trúc DOM Snapshot, Incremental Mutations và cơ chế Sandbox Replay bảo mật

Trong lĩnh vực phân tích hành vi người dùng (User Analytics) và gỡ lỗi từ xa (Remote Debugging), việc chỉ xem các biểu đồ hay log văn bản thường là không đủ. rrweb ra đời để giải quyết bài toán tái tạo chính xác 100% những gì người dùng đã trải nghiệm trên trình duyệt. Không giống như việc quay video màn hình truyền thống tiêu tốn băng thông và CPU, rrweb ghi lại luồng biến động của cây DOM theo thời gian, cho phép "phát lại" trải nghiệm với độ phân giải hoàn hảo (pixel-perfect) nhưng với dung lượng dữ liệu cực kỳ tối ưu.

Dưới góc độ kỹ thuật, rrweb là một minh chứng xuất sắc về việc ứng dụng Serialization cây DOM phức tạp, kỹ thuật Incremental Mutation Tracking và cơ chế Sandbox Playback bền bỉ.

Github: https://github.com/rrweb-io/rrweb

🛠️ 1. Nền tảng công nghệ: Sức mạnh của DOM Serialization

Dự án sử dụng TypeScript để xây dựng một bộ khung Type-safe, đảm bảo tính nhất quán tuyệt đối giữa dữ liệu ghi (Event Stream) và dữ liệu phát:

• Logic Core (TypeScript & Turborepo): Quản lý mô hình Monorepo khổng lồ, tách biệt các module xử lý Snapshot, Record và Replay.
• Web API Deep Integration: Tận dụng tối đa các API trình duyệt bậc thấp như MutationObserver để bắt lỗi mọi thay đổi cấu trúc, thuộc tính và văn bản của DOM mà không gây ảnh hưởng đến hiệu năng luồng chính.
• Data Compression (@rrweb/packer): Tích hợp thư viện fflate để nén các luồng sự kiện JSON thành chuỗi nhị phân (Binary) siêu nhỏ, giúp tiết kiệm tới 90% băng thông truyền tải về server.
• High-precision Scheduling: Sử dụng requestAnimationFrame để xây dựng một bộ định thời (Timer) có độ chính xác cao, đảm bảo các sự kiện di chuyển chuột và cuộn trang luôn mượt mà.

🏗️ 2. Trụ cột kiến trúc: Snapshot và Incremental mutations

Kiến trúc của rrweb được thiết kế theo tư duy "Trạng thái gốc + Chuỗi biến động":

• Full Serialization Strategy (rrweb-snapshot): Chuyển đổi toàn bộ cây DOM (vốn chứa các tham chiếu vòng phức tạp) thành một cấu trúc JSON phẳng. Mỗi Node được gán một id duy nhất, cho phép hệ thống "vẽ" lại trang web y hệt bản gốc tại bất kỳ thời điểm nào.
• Incremental Recording: Sau bản Snapshot đầu tiên, rrweb chỉ ghi lại các "vi biến động" (Incremental changes). Kỹ thuật này giúp giảm thiểu đáng kể tài nguyên: thay vì ghi lại toàn bộ trang mỗi giây, nó chỉ ghi lại tọa độ chuột mới hoặc một thuộc tính CSS vừa thay đổi.
• Event-based Orchestration: Mọi hành động của người dùng (Click, Input, Scroll, Media interactions) được đóng gói thành các đối tượng sự kiện có dấu thời gian (Timestamp), sẵn sàng cho việc sắp xếp và phát lại theo trình tự logic.

🔄 3. Workflow: Vòng đời từ Hành vi đến Tái hiện (Sequence Diagram)

Sơ đồ mô tả quy trình ghi lại và phát lại một thao tác của người dùng:

⚡ 4. Các kỹ thuật "Pro-level" trong mã nguồn

1. Setter Hijacking (Đánh chặn Prototype): rrweb thực hiện "ghi đè" lên các hàm setter nguyên mẫu của trình duyệt (ví dụ: HTMLInputElement.prototype.value). Kỹ thuật này cho phép hệ thống bắt được các thay đổi dữ liệu do mã JavaScript thực hiện — những thay đổi mà MutationObserver tiêu chuẩn thường bỏ sót.
2. Sandbox Security Layer: Khi phát lại, rrweb đặt toàn bộ nội dung trong một iframe có thuộc tính sandbox. Điều này vô hiệu hóa việc thực thi JavaScript từ trang web gốc, ngăn chặn form submission và popup, đảm bảo an toàn tuyệt đối cho người xem.
3. Pseudo-class Simulation: Vì JavaScript không thể kích hoạt trạng thái :hover thực sự của CSS, rrweb tự động duyệt qua các Stylesheet, tạo ra các class giả (ví dụ: .\:hover) để mô phỏng hiệu ứng thị giác của người dùng gốc.
4. Optimized Fast-forward: Khi người dùng tua nhanh, rrweb không render từng frame. Thay vào đó, nó thực hiện "tổng hợp đồng bộ" các biến động DOM để đưa trang web về trạng thái mục tiêu ngay lập tức mà không làm treo UI.

⚖️ 5. So sánh chiến lược

✅ Kết luận: Tại sao rrweb là chuẩn mực cho Session Replay?

rrweb không chỉ là một công cụ ghi hình; nó là một hệ thống quản trị trạng thái DOM. Bằng cách làm chủ kỹ thuật Serialization và giải quyết triệt để các bài toán khó về sự kiện trình duyệt, dự án đã tạo ra một hạ tầng mạnh mẽ cho việc gỡ lỗi, hỗ trợ khách hàng và tối ưu hóa chuyển đổi trên Web.

Đối với các kỹ sư Frontend và DevOps, nghiên cứu rrweb mang lại giá trị về:

• Kỹ thuật xử lý DOM nhị phân và nén dữ liệu Web.
• Cách xây dựng Virtual Timer cho các ứng dụng thời gian thực.
• Tư duy thiết kế Kiến trúc ghi-phát bền bỉ và bảo mật.