There’s never a good time for errors or performance degradations to show up, but during periods of peak traffic like the holidays, it’s especially critical to get immediate answers about what's failing and how to fix it.
Hydration errors are a React-specific problem that happen when the initial client UI does not match what was rendered on the server. They can result in extra work for the browser, and a slower page load experience for users.
To help you better debug hydration errors, we have created a diff tool that helps you spot the differences between client-rendered and server-rendered HTML when hydration occurs on your app. If you have Session Replay enabled, Sentry will detect hydration errors and bring them into your issue stream.
.gif)
In every hydration error issue, we provide:
In addition, detected hydration errors will appear in the breadcrumbs of your Session Replay view, and you can open the diff tool directly within the replay.
The prerequisites for this feature is to ensure you have Session Replay installed if you have not already for your React-based project.
For more information, check out our docs .
Note: hydration error issues based on replay data do not consume errors quota. See here for more information.
Github
Slack
Javascript
Python
React
Laravel
Next.js