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.
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:
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.
Github
Slack
Javascript
Python
React
Laravel
Next.js