Add error link when hydration error occurs

errors/manifest.json

@@ -4,6 +4,10 @@
       "title": "Messages",
       "heading": true,
       "routes": [
+        {
+          "title": "react-hydration-error",
+          "path": "/errors/react-hydration-error.md"
+        },
         {
           "title": "beta-middleware",
           "path": "/errors/beta-middleware.md"

errors/react-hydration-error.md

@@ -0,0 +1,17 @@
+# React Hydration Error
+
+#### Why This Error Occurred
+
+While rendering your application, different content was returned on the server than on the first render on the client (hydration).
+
+This can cause the react tree to be out of sync with the DOM and result in unexpected content/attributes being present.
+
+#### Possible Ways to Fix It
+
+Look for any differences in rendering on the server that rely on `typeof window` or `process.browser` checks that could cause a difference when rendered in the browser and delay these until after the component has mounted (after hydration).
+
+Ensure consistent values are being used, for example, don't render `Date.now()` directly in the component tree and instead set an initial value in `getStaticProps` which is updated after hydration `useEffect(() => {}, [])`.
+
+### Useful Links
+
+- [React Hydration Documentation](https://reactjs.org/docs/react-dom.html#hydrate)

packages/next/client/next-dev.js

@@ -26,6 +26,25 @@ const webpackHMR = initWebpackHMR()
 
 connectHMR({ assetPrefix: prefix, path: '/_next/webpack-hmr' })
 
+if (!window._nextSetupHydrationWarning) {
+  const origConsoleError = window.console.error
+  window.console.error = (...args) => {
+    const isHydrateError = args.some(
+      (arg) =>
+        typeof arg === 'string' &&
+        arg.match(/Warning:.*?did not match.*?Server:/)
+    )
+    if (isHydrateError) {
+      args = [
+        ...args,
+        `\n\nSee more info here: https://nextjs.org/docs/messages/react-hydration-error`,
+      ]
+    }
+    origConsoleError.apply(window.console, args)
+  }
+  window._nextSetupHydrationWarning = true
+}
+
 window.next = {
   version,
   // router is initialized later so it has to be live-binded

packages/react-dev-overlay/src/client.ts

@@ -80,7 +80,7 @@ function onBuildError(message: string) {
 }
 
 function onRefresh() {
-  Bus.emit({ type: Bus.TYPE_REFFRESH })
+  Bus.emit({ type: Bus.TYPE_REFRESH })
 }
 
 export { getNodeError } from './internal/helpers/nodeStackFrames'

packages/react-dev-overlay/src/internal/ReactDevOverlay.tsx

@@ -22,7 +22,7 @@ function reducer(state: OverlayState, ev: Bus.BusEvent): OverlayState {
     case Bus.TYPE_BUILD_ERROR: {
       return { ...state, buildError: ev.message }
     }
-    case Bus.TYPE_REFFRESH: {
+    case Bus.TYPE_REFRESH: {
       return { ...state, buildError: null, errors: [] }
     }
     case Bus.TYPE_UNHANDLED_ERROR:

packages/react-dev-overlay/src/internal/bus.ts

@@ -2,7 +2,7 @@ import { StackFrame } from 'stacktrace-parser'
 
 export const TYPE_BUILD_OK = 'build-ok'
 export const TYPE_BUILD_ERROR = 'build-error'
-export const TYPE_REFFRESH = 'fast-refresh'
+export const TYPE_REFRESH = 'fast-refresh'
 export const TYPE_UNHANDLED_ERROR = 'unhandled-error'
 export const TYPE_UNHANDLED_REJECTION = 'unhandled-rejection'
 
@@ -11,7 +11,7 @@ export type BuildError = {
   type: typeof TYPE_BUILD_ERROR
   message: string
 }
-export type FastRefresh = { type: typeof TYPE_REFFRESH }
+export type FastRefresh = { type: typeof TYPE_REFRESH }
 export type UnhandledError = {
   type: typeof TYPE_UNHANDLED_ERROR
   reason: Error

test/integration/auto-export/pages/[post]/[cmnt].js

@@ -18,6 +18,11 @@ if (typeof window !== 'undefined') {
 export default function Page() {
   if (typeof window !== 'undefined') {
     window.pathnames.push(window.location.pathname)
+
+    if (window.location.pathname.includes('hydrate-error')) {
+      return <p>hydration error</p>
+    }
   }
+  // eslint-disable-next-line
   return <p>{useRouter().asPath}</p>
 }

test/integration/auto-export/test/index.test.js

@@ -86,5 +86,17 @@ describe('Auto Export', () => {
       const caughtWarns = await browser.eval(`window.caughtWarns`)
       expect(caughtWarns).toEqual([])
     })
+
+    it('should include error link when hydration error does occur', async () => {
+      const browser = await webdriver(appPort, '/post-1/hydrate-error')
+      const logs = await browser.log()
+      expect(
+        logs.some((log) =>
+          log.message.includes(
+            'See more info here: https://nextjs.org/docs/messages/react-hydration-error'
+          )
+        )
+      ).toBe(true)
+    })
   })
 })