@browser-replay/core

browser-replay (built on rrweb)

@browser-replay/core

This is a simpler version of the original README within this browser-replay subpackage

browser-replay refers to 'record and replay the web', which is a tool for recording and replaying users' interactions on the web.

Guide

📚 Read the browser-replay guide here. 📚

🍳 Recipes 🍳

Project Structure

browser-replay (built on rrweb) mainly includes two functions:

• Record: The record function is used to record all the mutations in the DOM
• Replay: The replay function is to replay the recorded mutations one by one according to the corresponding timestamp.

Roadmap

• storage engine: do deduplication on a large number of browser-replay sessions
• compact mutation data in common patterns
• provide plugins via the new plugin API, including:
  • XHR plugin
  • fetch plugin
  • GraphQL plugin
  • ...

Internal Design

• serialization
• incremental snapshot
• replay
• sandbox

Contribute Guide

Since we want the record and replay sides to share a strongly typed data structure, browser-replay is developed with typescript which provides stronger type support.

Typescript handbook

• Fork this repository.
• Run pnpm install in the root to install required dependencies for all sub-packages (note: npm install is not recommended).
• Run pnpm dev in the root to get auto-building for all the sub-packages whenever you modify anything.
• Navigate to one of the sub-packages (in the packages folder) where you'd like to make a change.
• Patch the code and run pnpm test to run the tests, make sure they pass before you commit anything.
• Push the code and create a pull request.

Protip: You can run pnpm test in the root folder to run all the tests.

In addition to adding integration tests and unit tests, browser-replay also provides a REPL testing tool.

Using the REPL tool