Hydration Error - Integration

[HazAT]

https://github.com/BuilderIO/hydration-overlay
^

Let's add an integration for Hydration Errors using this plugin (only for Next.js now).
The idea is, you click on Hydration Error tab, if one occurred you see a diff of the DOM inside.
Of course, the prerequisite is that you configure the plugin yourself, but Spotlight could just act as an overlay replacement.

• Figure out if we can extract the overlay and inject it into Spotlight
• Add New "Hydration Error" Integration
• Render the error in Spotlight

[Shubhdeep12]

Hi @HazAT i checked the plugin.

How about this approach:

• we create a feature request in the plugin to give a option to use spotlight for overlay.
• by doing that user will have to do same config(no change)
• but we add this logic in their overlay to call openSpotlight('/hydration-error') instead of rendering overlay modal with difference viewer.
• and here in our spotlight-overlay in hydrationError tab we will render Difference viewer with data as they are attaching data to window object which can be accessed in spotlight as well.