At the beginning of this year, we launched a diff tool embedded within Replay Details to help you find the element or attribute that caused a given hydration error.

We took this concept one step further and are now creating new actionable Hydration Error issues in your issues stream that are based on replay data and improved our diff tooling so you can troubleshoot these issues faster & improve your site's web performance. 🚀 This ensures you not only get alerted when hydration errors happen, but that you also have the tools at your disposal to solve for them.

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.

Here's an example of the side-by-side image tool. As you can see, the language/framework dropdown in the top-left of the screen comes from the server with no value selected, but has "JavaScript" selected after hydration. Also, after hydration a "Copy to clipboard" button was added to each of the code snippets in the middle of the page, and the second code snippet has syntax highlighting applied.

The prerequisites for this feature is to ensure you have Session Replay installed if you have not already for your React-based project and that 'Early Adopter' toggled on for your organization (Settings > General > Early Adopter).

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.