current position:Home>Learn the rrweb front-end traceability scheme, and don't be afraid of customer complaints any more

Learn the rrweb front-end traceability scheme, and don't be afraid of customer complaints any more

2021-08-27 10:27:43 Fiery red rose

rrweb yes 'record and replay the web' Abbreviation , Used to record and play back any web User actions in the interface .

One , Use scenarios

  • Record and analyze how users use the product , Further optimization ;
  • Collect the problems encountered by users bug Operation path of , Be reproduced ;
  • Trace back the user's behavior , Can be stored as evidence ;
  • Smaller recording volume , Lossless demonstration video ;
  • Record the execution of automated tests ;

Two , New ideas :dom snapshot

image.png Simple understanding : ⻚⾯ The view state in can be through DOM Description in the form of tree , So when we try to record ⼀ individual ⻚⾯ when , We can record DOM The state of the tree at each point in time . Record the page at each moment DOM state , When playing back, it can be displayed according to the time point .

problem : DOM The data is huge , It's recorded all the time , It's a little inappropriate .

3、 ... and , Realization principle ,Rrweb Adopted performance optimization scheme

  • Record the of the initial page DOM state , Or at a particular moment DOM state , The operation instructions at different time points are collected later perhaps Some time Some DOM Changes as an incremental snapshot , Based on the original snapshot , Continue to add... Parsed according to behavior DOM data , Built subsequent snapshots , Reduce the storage or transmission of large amounts of data .


  • throttle , For mouse movement , Page scrolling events are throttled
  • compressed data , Tried to use pako.js Compress

Four ,RRWEB Project structure

rrweb Mainly by 3 Part of it is made up of :

  • rrweb-snapshot, contain snapshot and rebuild Two functions . snapshot Is used to DOM And its state is transformed into a serializable data structure and a unique identifier is added ; rebuild Will be snapshot The recorded data structure is reconstructed to the corresponding DOM, And insert it into the document
  • rrweb, contain record and replay Two functions . record Used to record DOM All changes in (mutation); replay It is to replay the changes of records one by one according to the corresponding time .
  • rrweb-player, by rrweb Provide a set of UI Control , Offer based on Pause of graphical user interface 、 Fast forward 、 Drag to any time point to play and other functions .

5、 ... and ,rrweb Technical details

Split structure

  • snapshot Method
  1. The first point :Snapshot Build page DOM Trees , At the same time id -> Node Mapping , It's building DOM The tree generates a unique for each node id, Simultaneous basis id Generate a map , As long as this mapping is to facilitate subsequent incremental snapshot operations
  2. Second point : take href,src,CSS Set the relative path in as the absolute path Put some scripts , style , The relative path referenced by pictures is changed to absolute path
  3. The third point : Change the style of the page reference to inline style , To ensure that local styles can be used Change the style reading of the page reference to inline style
  4. Fourth, : Will some DOM State inline to HTML Properties of the , for example HTMLInputElement Value The record is not reflected in HTML View state in . for example transport ⼊ The value after is not reflected in its HTML in , We need to read its value Value and record
  5. The first five : take script The tag is converted to noscript Mark , To prevent the script from being executed When playing the recording page , The script of the page cannot be executed , Need to ban
  • rebuild Method
  1. By creating a Dom, Set properties, etc , And the corresponding DOM Insert into the document
  • record Method
  1. We talked about incremental snapshots , How is incremental data collected ? After starting recording , A... Will be generated for the current page DOM snapshot , Then start listening to user actions and pages DOM The change of .

The monitoring behavior is as follows :

  • DOM change o Node creation 、 The destruction o Node attribute changes o Text changes
  • Mouse interaction o mouse up、mouse down o click、double click、context menu o focus、blur o touch start、touch move、touch end
  • Page or element scrolling
  • Window size changes
  • Mouse movement
  • Input

There are ways to monitor :

  • DOM change ,MutationObserver among , monitor DOM change Mainly through API --- MutationObserver To achieve . When the surveillance DOM In the event of change , MutationObserver The notification will be received and the preset callback parameters will be triggered , And addEventListener The method is similar
  • Mouse interaction , Page scrolling , The window size is determined by Listen in the form of event binding adopt Form monitoring


  • Mouse movement Pass record ⿏ Mark the moving position , We can simulate... During playback ⿏ Mark the moving track . Ensure playback ⿏ While moving smoothly, try to reduce the corresponding Oplog The number of , So we will do two-layer throttling . The first ⼀ Layer is every 50 ms Maximum records ⼀ Time ⿏ Coordinate , The first ⼆ Layer is every 500 ms Send at most ⼀ Time ⿏ Coordinate set , The first ⼆ The main of the layer ⽬ The is to avoid ⼀ Too many requests ⽽ Do the segmentation .
  • Input

We need to observe input, textarea, select The output of the three elements ⼊, contain ⼈ Set the input of two ways for interaction and program ⼊.

  1. Human interaction about ⼈ For interactive operation, we mainly rely on Monitoring input and change Two event Observations , It should be noted that for different events with the same value ⾏ duplicate removal .
  2. Program settings Setting the properties of these elements directly through code will not trigger events , We can hijack the corresponding properties setter To achieve the purpose of monitoring ⽬ Of .

replay The playback

After determining the final recording ⽅ After the case , We can realize the corresponding playback function . Relatively speaking, the idea of playback is more clear , It can be divided into the following 3 Main steps :

  • stay ⼀ Rebuild the snapshot to the corresponding... In a sandbox environment DOM Trees .
  • take Oplog The operations in are arranged according to time stamps , discharge ⼊⼀ In an operation queue .
  • start-up ⼀ Timers , Constantly check the operation queue , Take out and reproduce the operation up to time .

6、 ... and , Usage method…

copyright notice
author[Fiery red rose],Please bring the original link to reprint, thank you.

Random recommended