Better Directive Support for Hydration Errors

[smeubank]

Problem Statement

Hydration errors in Sentry can be just a ton of information, with no real clues on how to debug and fix them.

• no information from a stack trace or a react component
• solutions hub i just a definiton
• links in the modal are just to more definition docs, describing the component we provide you. But not really how to solve it.
• The answers page also tell you information you need, "The first step is to identify the component that is causing the error. "

the image with slider is cool, most of the tabs I am told are just too much infromation to be useful.

Solution Brainstorm

• can we capture a stack trace for a hydration error attach and/or react component information
• can we make the solutions hub more specific how to debug and fix
• can we add platform specific advice
  • on NextJS, "Run your site locally with Next.js local dev tool to debug [link here] to see if this hyrdation error also occurs locally in an environment without browser extensions. If not, then you know this is just a problem related to an extension and not actionable. You can ignroe the issue in SDK or in product, by xyz"
• we should have this for all relevant platforms

[getsantry]

Routing to @getsentry/product-owners-issues for triage ⏲️