Missing debug tools

[landsman]

Hello guys,
what I'm really missing in this framework is proper debug tools. I know the state of node, react, etc. but this is really what I would appreciate from the framework. Tooling to make me productive.

When an error like this happens on a project I don't know properly it takes me so much time to find the cause. Did you brainstorm on some solutions or tooling? Are there some ideas in the backlog to help us smash problems like this?

Describe the Bug

It's an example of general error message.

Expected Behavior

Debug bar where I can see the difference between SSR and Client, help me to identify the issue.

To Reproduce

Produce one of bug listed here: https://nextjs.org/docs/messages/react-hydration-error

[icyJoseph]

Are you seeing this on the latest Next.js? Don't they have error sorting by framework? Like if it is a Next.js issue or a React one.

With that aside, usually these hydration errors are explained fully in the console, with logs printed by React.

Otherwise, it can be so many things it is hard to give a blanket statement, but if its not pretty simple, or impossible hard, like when a CDN injects HTML and then React fails to hydrate.

React has also an open issue, not sure if its this one: facebook/react#26224 to make this errors clearer, and while Next.js is the go to meta-framework, I do think this is ultimately something React should help with. I had an open issue on React, but after a while, I decided to close it, with some 2023 edit notes: facebook/react#24519 (comment), hope those can help you fix your issue.

[landsman]

@icyJoseph thanks for your comment. Yeah, I understand.

I would love to see similar DX as I know from different languages, and frameworks. I can imagine that's a quite harder or impossible challenge compared with PHP where we can display a human redable call stack (example: https://tracy.nette.org/en/guide#toc-visualization-of-errors-and-exceptions) because of transpilation and 3rd-party deps.

What I would expect from Next.js is to do some kind of lobbying in React or lead devs to avoid errors like this. Probably the only way how to achieve this is by comparing git log, and offer there something like copilot which is such overkill :(