Repository navigation
Add a breadcrumb when a hydration error happens #9649
Description
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.
Activity
AbhiPrasad commentedon Nov 23, 2023
We add breadcrumbs whenever we capture Sentry events
sentry-javascript/packages/browser/src/integrations/breadcrumbs.ts
Line 117 in eb2d726
Can replay pick this up?
bruno-garcia commentedon Nov 23, 2023
@AbhiPrasad how can we tell if that event captured was out of a hydration error?
AbhiPrasad commentedon Nov 23, 2023
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 commentedon Nov 23, 2023
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 commentedon Nov 23, 2023
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 commentedon Nov 23, 2023
@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.
feat(replay): Capture hydration error breadcrumb (#9759)