Issue
I have disabled the "Create Hydration Error Issues" toggle for one of my projects, however, I am still receiving Replays for hydration errors, which should not occur with this setting disabled.
Applies To
All customers
Symptoms
According to our docs, there are four current scenarios are possible: https://docs.sentry.io/platforms/javascript/session-replay/issue-types/#configuring-hydration-errors. Inbound Filters are enabled and Replay Hydration Error is disabled and as expected, there are no Hydration Error Issues created, but Replays will still be triggered by Hydration Errors.
Resolution
A hydration error happening in your application will trigger the replaysOnErrorSampleRate and send replays if they are sampled. This feature is independent of the server-side settings in your project.
You can add the following code snippet to beforeSend to make sure no Replays are triggered because of Hydration Errors:
function beforeSend(event, hint) {
const error = hint.originalException;
const hydrationErrorCodes = [418, 419, 422, 423, 425];
// Check if error exists and contains a message
if (error?.message) {
const isHydrationError = hydrationErrorCodes.some(code =>
error.message.includes(`https://reactjs.org/docs/error-decoder.html?invariant=${code}`)
);
// If it's a hydration error, prevent sending the event to Sentry
if (isHydrationError) {
return null;
}
}
// If not a hydration error, proceed with sending the event
return event;
}