AbhiPrasad
commented
10 months ago @ryan953 had good comments about where we could start experimenting with this
We fundamentally have such a service over here: https://github.com/getsentry/session-replay-analyzer The way that the service works is a) pass in a replayId and a request for some type of data b) its loads up the replay, plays it while collecting the data you asked for. We’ve always thought that this could be used to return data like: a) detect accessibility issues b) run a playwright test script and report pass/fail c) could return a screen shot at a specific timestamp d) it could convert the replay into an mpeg … and so on.
So the service could return a pair of images, or pair of html snapshots around a specific timestamp (error timestamp) so we could render the whole page before/after & highlight the thing that changed.
To 100% validate that the replay data helps with hydration errors we wouldn’t even need to build out the service to start. We could add hydration errors as breadcrumbs to the replay (instead of proper errors, which we do want obvs) and do the highlighting when the replay details page is viewed. Probably wouldn’t ship that, but it would give us a visualization in a matter of hours.
scttcper
We propose a time-boxed investigation (5 dev-days) to figure out if we can use Sentry's replay product to fix Next.js hydration errors.
From @AbhiPrasad: “I think the solution here is to get replay to show us the element that is causing hydration issues. The best way to do this is to display a before/after comparison of the page to show what exactly the issue is with hydration.”