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.

In every hydration error issue, we provide:

• Image slider tool: allows for comparing the two page states by overlaying the images on top of each other. Click and drag the purple line to reveal one image or the other
• Side-by-side image tool: view images side-by-side to see large chunks of the page that may differ.
• HTML diff: a basic HTML comparison. It is useful if the hydration error is caused by hidden DOM nodes, different attributes on a DOM node, or there's mismatched content below the fold.

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.