[NEXT-611] Improve hydration error messages in pages

[chavda-bhavik]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: linux
      Arch: x64
      Version: #33~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Mon Jan 30 17:03:34 UTC 2
    Binaries:
      Node: 18.13.0
      npm: 8.19.3
      Yarn: 1.22.19
      pnpm: 7.9.4
    Relevant packages:
      next: 13.1.7-canary.21
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/chavda-bhavik/nextjs-error-reproduction

To Reproduce

1. Write this invalid jsx in the index.tsx file,

export default function Home() {
  return (
    <button>
      <button>Click Me</button>
    </button>
  );
}

2. See the error Hydration failed because the initial UI does not match what was rendered on the server.
   

Describe the Bug

I am receiving the Hydration failed because the initial UI does not match what was rendered on the server error when attempting to troubleshoot an HTML issue in jsx. It would be helpful to have a more specific error message that indicates which HTML element the issue is in, as this would make it easier to identify what the problem is.

Expected Behavior

When there is an issue in jsx regarding HTML, a message stating issue in HTML would be helpful to debug rather than the Hydration failed because the initial UI does not match what was rendered on the server error. In addition to where the HTML issue is.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-611

[icyJoseph]

Typically the console contains the exact node where things went wrong. Do remember that this is first and foremost a React error.

There's however a question, I used to agree too but now I don't know, should this really... break onto a hydration error? #36765

The error did exist when React 17 was used under the hood, but now with the concurrent root, this kind of things breaks the hydration process. facebook/react#24519

[chavda-bhavik]

Thanks for the clarification, Joseph. I think we are talking about the same thing, does it really a hydration error or not?

[timneutkens]

We've changed the error overlay in a bunch of ways recently: facebook/react#24519 (comment)

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.