If you’re using Next.js with Sentry’s Session Replay, we’ve launched an experimental Hydration Error diff tool. Displaying a diff of the page before and after react has hydrated can help you find the element or attribute that caused the hydration error. The easiest ones to spot using a diff are text content mismatches, incorrectly nested html elements, and attribute changes.

To get started:

• Have Session Replay set up and using a browser JavaScript SDK (or related framework) version of 7.90.0 or later

• Capture a hydration error and view the replay

• In the breadcrumbs tab, look for the “Open Hydration Diff” button

  

This will open a modal with a html and visual diff. In this example, a date inside a div was rendered on the server and rendered differently on the client causing a hydration error.

To find replays with hydration errors more easily, disable the hydration error inbound filter by navigating to [Project] > Project Settings > Inbound Filters and turning off the hydration error filter. For more information on inbound filters, see our docs.

We want to hear from you on how helpful you find this feature. Please share any questions, comments, or feedback to this discussion.