<p dir="auto">Currently hydration warnings only appear in the console and can be easy to miss. Since hydration errors can have very bad effects we should trigger the dev-error-overlay to make sure the user is aware of them</p>
<h1 dir="auto">Feature request</h1>
<p dir="auto">When a hydration error occurs, Next.js should open the error overlay since this is considered a fatal event.</p>
<p dir="auto">The code should be hot-linked so users can click-to-open in their editor.</p>
<p dir="auto">We did not implement this previously because React did not give you a way to track it down.</p>
<p dir="auto">React 16.13 finally added support for component stack traces:<br>
<a href="https://reactjs.org/blog/2020/02/26/react-v16.13.0.html#component-stacks-in-hydration-warnings" rel="nofollow">https://reactjs.org/blog/2020/02/26/react-v16.13.0.html#component-stacks-in-hydration-warnings</a></p>
<p dir="auto"><strong>Old</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/616428/84171057-5b0a7280-aa48-11ea-9e66-1868bbec8684.png"><img src="https://user-images.githubusercontent.com/616428/84171057-5b0a7280-aa48-11ea-9e66-1868bbec8684.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>New</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/616428/84171066-5e9df980-aa48-11ea-8d5b-669c72241bd9.png"><img src="https://user-images.githubusercontent.com/616428/84171066-5e9df980-aa48-11ea-8d5b-669c72241bd9.png" alt="image" style="max-width: 100%;"></a></p>