Feature(session replay): add ability to visually reconstruct user sessions

[EandrewJones]

Problem

Session replay is a common feature in instrumentation services. As a developer, it's one of the nicest ways to make sense of user behavior and understand the context in which they encountered errors.

UserALE does not support the type of logs needed for this.

Solution

• Use mutation observer to emit change events, works pretty well
• Needs further research (look at rrweb as well as Sentry)
  • Some problems with size of initial DOM payload

[Suvendu-UI]

can i work on this issue ?

[EandrewJones]

Sure. This is quite a large ticket and probably should be broken into a number of smaller tickets. Before you dive into coding, can you help us plan out this work by looking at how rrweb accomplishes remote session replay and proposing a more concrete plan for how to implement this in our library?

If you end up feeling like it's a bit too much to take on, let us know and we can point you to some smaller tickets to help you further familiarize yourself with the repo.

Overview

I already have a high-level understanding which I can share. Session replay allows us to reconstruct user sessions not by recording their sessions as videos (too large of a storage footprint) but by storing the entire DOM tree, then detecting and storing changes (similar to how git tracks diffs) to the DOM tree via the mutation observer. With these two things, you can rehydrate a user's session.

The hard part is designing a nice way to easily serialize/deserialize the DOM tree and changes, as all this data needs to be transmitted over the network. You also need to preserve styles.

Considerations

The UserALE core library only logs data. What that means is we do not want to build any utilities in UserALE for reconstructing and watching the sessions... However, we will need a means of testing that we're capturing the correct data necessary to reconstruct a session.

Maybe we should allow for storing and replaying sessions locally via the/a plugin. @Jyyjy You pitched the idea of creating a separate plugins directory and packaging all non-core features as plugins. What do you think about making session re-play a plugin (opt-in feature) and also having a session replay viewer in the browser plugin for prototyping purposes?