Add a breadcrumb when a hydration error happens

[bruno-garcia]

Context

This came out of a discussion internally about possible ways to help developers using Next.js (and possibly other frameworks like Remix, SvelteKit, etc) identify the root cause of hydration errors.

Currently, after several users complained about these errors not being actionable, Sentry is dropping them server-side, by default. Users can opt-out of this server-side filter under Project Settings, Inbound Filters:

Improvement

The goal is to use Replay to help users. As a first step, we'd like to add a breadcrumb to Replays so we know when the hydration error happens. This won't affect the default server-side filter mentioned above.

Ideas from @ryan953:

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.

[AbhiPrasad]

We add breadcrumbs whenever we capture Sentry events

sentry-javascript/packages/browser/src/integrations/breadcrumbs.ts

Line 117 in eb2d726

client && client.on && client.on('beforeSendEvent', addSentryBreadcrumb);

Can replay pick this up?

[bruno-garcia]

@AbhiPrasad how can we tell if that event captured was out of a hydration error?

[AbhiPrasad]

Using the same semantics as the hydration error inbound filter.

https://github.com/getsentry/sentry/blob/03ff9b7b61a54f7da688381ba9c0d4cc3159a999/src/sentry/relay/config/__init__.py#L142-L154

[bruno-garcia]

That makes sense, looks promising! Are the crumbs written synchronously, as the error is detected? Could we expect that timestamp to represent precisely when the problem was detected?

[AbhiPrasad]

That makes sense, looks promising! Are the crumbs written synchronously, as the error is detected? Could we expect that timestamp to represent precisely when the problem was detected?

They are written after event processors apply and before beforeSend. These are all sync though so the timestamp skew should be minimal. We can test it out though to confirm.

If thats not acceptable, we can come back and re-adjust how breadcrumbs get emitted.

[ryan953]

@AbhiPrasad i think we're going to need to write that breadcrumb into the replay event stream. @billyvg @mydea @lforst would know the details with confidence.