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

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

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

github.com/rrweb-io/rr…