Rrweb is short for ‘record and replay the web’ and is used to record and replay user actions in any Web interface.

First, use scenarios

  • Record the way users use the product and analyze it for further optimization;
  • Collect the operation path of bugs encountered by users and reproduce them;
  • Tracing the user’s actions can be stored as evidence;
  • To record smaller, high-definition and lossless demonstration video;
  • Record the execution of automated tests;

Second, a new idea: DOM snapshot

Simple understanding:The state of a view in a page can be described as a DOM tree, so when we try to record a page, we can record the state of the DOM tree at various points in time. Record the DOM state of the page at each moment, and display it according to the time point when playing back.

Problem: DOM data is huge and is recorded all the time, which is a bit inappropriate.

Three, the implementation principle, Rrweb used performance optimization scheme

  • The DOM state of the initial page or the DOM state at a specific moment is recorded. The subsequent operation instructions at different points in time or DOM changes at a certain moment are collected as an incremental snapshot. On the basis of the original snapshot, the DOM data parsed according to the behavior is continuously added to build the subsequent snapshot. Reduce the storage or transfer of large amounts of data.

  • Throttling, for mouse movement, page scroll events are throttled
  • Compressed data, tried to use pako.js compression

Fourth, RRWEB project structure

Rrweb consists of three main parts:

  • Rrweb-snapshot, including snapshot and rebuild functions. Snapshot is used to convert the DOM and its state into serializable data structures and add unique identifiers. Rebuild is to rebuild the data structure recorded by snapshot into the corresponding DOM and insert it into the document
  • Rrweb, including record and replay two functions. Record is used to record all mutations in the DOM; Replay is to replay recorded changes one by one at the corresponding time.
  • Rrweb – Player, a set of UI controls for RRWeb that provide graphical user interface based pause, fast forward, drag and drop to play at any point in time, and more.

Rrweb technical details

With structure

  • The snapshot method
  1. Snapshot creates a DOM tree for each Node and creates a mapping based on the ID -> Node. This mapping is used to facilitate incremental Snapshot operations
  2. 2. Change the relative paths in href, SRC, CSS to absolute. Change the relative paths in some scripts, styles, images, etc
  3. Third point: Make the style of page references inline to ensure that the style of page references can be read inline using native styles
  4. Fourth point: Inline some DOM state into HTML attributes, such as HTMLInputElement value records that are not reflected in the HTML view state. For example, the entered value is not reflected in its HTML, so we need to read its value and record it
  5. No. 5: Convert script tags to Noscript tags to avoid script execution When playing a recorded page, the script of the page cannot be executed and needs to be disabled
  • Rebuild method
  1. Create the Dom, set the properties, etc., and insert the corresponding Dom into the document
  • Record method
  1. Speaking of incremental snapshots, how is incremental data collected? Once you start recording, a DOM snapshot of the current page is generated and you start listening for user actions and changes to the PAGE DOM.

Monitoring behavior is as follows:

  • DOM changes o node creation and destruction o node property changes o text changes
  • 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 change
  • The mouse moves
  • The input

Monitoring methods include:

  • DOM changes, which monitor DOM changes mainly through the API – MutationObserver to achieve. When the MONITORED DOM changes, the MutationObserver is notified and fires preset callback parameters, similar to the addEventListener method
  • Mouse interaction, page scrolling, window size and so on are listened for in the form of event bindings

  • Mouse movement By recording the mouse movement, we can simulate the mouse movement during playback. To ensure smooth mouse movement while minimizing the number of corresponding Oplogs during playback, we will do two layers of throttling. The first layer is to record the mouse coordinates at most once every 50 ms, and the second layer is to send the mouse coordinate set at most once every 500 ms. The main purpose of the second layer is to avoid the segmentation caused by excessive content of a request.
  • The input

We need to look at input, Textarea, select, and both human interaction and programmatic Settings.

  1. Human interaction For the operation of human interaction, we mainly rely on listening to the input and change events to observe. It is necessary to pay attention to the case of different events but the same value for deduplication.
  2. The program setting does not trigger events by setting the properties of these elements directly in code. We can hijack the setters for the properties to listen for.

Replay the playback

After determining the final recording scheme, we can realize the corresponding playback function. Relatively speaking, the idea of playback is more clear, which can be divided into the following three main steps:

  • Rebuild the snapshot into the corresponding DOM tree in a sandbox environment.
  • The Oplog operations are placed in an operation queue by timestamp.
  • Start a timer and constantly check the action queue to retrieve the action when the time is up.

Six, use method

Github.com/rrweb-io/rr…