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.
The new tree compare tool identifies and lists DOM nodes that were added, removed, or had attributes changed. It shows each page change and its timestamp, allowing you to trace it in the context of a hydration error.
For example, at timestamp 1732089574790 (1.7 seconds after the replay started), a mutation occurred where 39 nodes were added, 2 had attributes changed, and 4 were removed. CSS selectors are provided for each node to help identify the changed components. Keep mind mind that some changes may occur outside the React render tree and might not cause hydration errors.
For more information, check out our docs.
Note: hydration errors can come into your issue stream either as regular error events, or they could be detected inside a replay and converted into an issue by the server. Read more about configuring hydration errors to learn about the differences.
Github
Slack
Javascript
Python
React
Laravel
Next.js
