Record and Replay Web

The client reached out to us for the development of a program. They wanted that program to be capable of replaying the user sessions. We utilized the RRweb project to record and provided an admin console to replay the web session.

About the Technology

RRweb is an open-source web-based replay library that offers user experiences and remote replays with easy-to-use APIs.

It is an automatic test that checks if the tested website works as intended. An automatic evaluation is the best way to record user behavior on the website being checked. This is the functionality of Record & Replay. Users will use the web test to record and repeatedly play the script back to prove that the site behavior has improved or has not changed.

Users will log and interact with the website they have checked by scrolling pages, input texts, clicking links, etc. User behaviors are saved into a script. Users will save several scripts any time they review one feature of the checked app.

Our Solution

• rrweb-snapshot, including both snapshot and rebuilding features. The snapshot was used to convert the DOM and its state into a serializable data structure with a unique identifier; the rebuilding feature was to rebuild the snapshot into the corresponding DOM.

• RRweb, included two functions, record and replay in this project. The record function was used to record all the mutations in the DOM; the replay was to replay the recorded mutations one by one according to the corresponding timestamp.

• rrweb-player, was a player UI for rrweb, providing GUI-based functions like pause, fast-forward, drag and drop to play at any time.

Technology Used

• NPM

• session

• MySQL