Super interesting project! I'm working on a related/similar project that I'm curious about the technical aspect. Would you mind sharing how are you simulating the reconstructed screen? Do you construct the DOM, together with the CSSOM, on every browser events, and send the result to the backend for replaying?
And do you monkey patch the fetch API to intercept request? Apology for not looking thorough enough on github!
How would you compare yourself with tool like openreplay? Disclaimer, I am not related to them.
An HN comment is not completed without a unsolicited feature request: a demo site, maybe using highlight.io itself, and let user replay their interaction.
Hey! Sure thing. Our frontend session replay happens in two parts:
1. The HTML DOM Recording using 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!
Following up regarding the other points I missed. Compared to OpenReplay, we have similar functionality in our session replay, but we've focused a lot of effort on making a cohesive error monitoring (backend and frontend) experience. We closely link sessions with errors (stacktraces and associated metadata) and vice versa to make it easy to get to the root cause of a bug.
To demo your own sessions on highlight, you can easily spin up our next.js example app that has highlight installed: https://github.com/highlight/nextjs-13-sample. All you need to do is make an account on highlight.io and copy your project ID over into the sample app!
And do you monkey patch the fetch API to intercept request? Apology for not looking thorough enough on github!
How would you compare yourself with tool like openreplay? Disclaimer, I am not related to them.
An HN comment is not completed without a unsolicited feature request: a demo site, maybe using highlight.io itself, and let user replay their interaction.
Good luck building!