3 ms·
Hey! Sure thing. Our frontend session replay happens in two parts: 1. The HTML DOM Recording using rrweb (https://github.com/rrweb-io/rrweb https://github.com/
by vadman97 4y ago
Hey! Sure thing. Our frontend session replay happens in two parts:
1. The HTML DOM Recording using rrweb (https://github.com/rrweb-io/rrweb https://github.com/rrweb-io/rrweb)
2. The monkey patching of fetch, xhr, console methods, combined with data from `window.performance`
The rrweb repo has a good in-depth explanation of how the DOM recording works. In short, it captures the full HTML of a page when a user first loads it, then tracks DOM changes via the `MutationObserver` api. From our client, these are all shipped to our backend as serialized events. We process the events per 'user session', storing them temporarily in redis, then compressing a permanent payload once the session no longer is sending new events in the local filesystem or S3.
Monkey patching network and console methods allows us to capture request/response payloads, headers, status code, etc. We then combine that data with the `window.performance` api's notion of network requests to ensure we capture all requests (even ones that happened before our monkey-patch had time to apply), as well as to get precision timing data.
Happy to give more detail about parts of our stack if you're interested!