Skip client-side data-fetching after ssr error

packages/next/src/client/index.tsx

@@ -66,6 +66,7 @@ declare global {
 type RenderRouteInfo = PrivateRouteInfo & {
   App: AppComponent
   scroll?: { x: number; y: number } | null
+  isHydratePass?: boolean
 }
 type RenderErrorProps = Omit<RenderRouteInfo, 'Component' | 'styleSheets'>
 type RegisterFn = (input: [string, () => void]) => void
@@ -806,7 +807,11 @@ function doRender(input: RenderRouteInfo): Promise<any> {
 }
 
 async function render(renderingProps: RenderRouteInfo): Promise<void> {
-  if (renderingProps.err) {
+  // if an error occurs in a server-side page (e.g. in getInitialProps),
+  // skip re-rendering the error page client-side as data-fetching operations
+  // will already have been done on the server and NEXT_DATA contains the correct
+  // data for straight-forward hydration of the error page
+  if (renderingProps.err && !renderingProps.isHydratePass) {
     await renderError(renderingProps)
     return
   }
@@ -975,6 +980,7 @@ export async function hydrate(opts?: { beforeRender?: () => Promise<void> }) {
     Component: CachedComponent,
     props: initialData.props,
     err: initialErr,
+    isHydratePass: true,
   }
 
   if (opts?.beforeRender) {

test/production/error-hydration/error-hydration.test.ts

@@ -0,0 +1,89 @@
+import { NextInstance, createNextDescribe } from 'e2e-utils'
+
+async function setupErrorHydrationTests(
+  next: NextInstance,
+  targetPath: string
+) {
+  const consoleMessages: string[] = []
+
+  const browser = await next.browser(targetPath, {
+    beforePageLoad(page) {
+      page.on('console', (event) => {
+        consoleMessages.push(event.text())
+      })
+    },
+  })
+
+  return [browser, consoleMessages] as const
+}
+
+createNextDescribe(
+  'error-hydration',
+  {
+    files: __dirname,
+  },
+  ({ next }) => {
+    // Recommended for tests that need a full browser
+    it('should log no error messages for server-side errors', async () => {
+      const [, consoleMessages] = await setupErrorHydrationTests(
+        next,
+        '/with-error'
+      )
+
+      const extraConsoleMessages = consoleMessages.filter(
+        (m) =>
+          !/Failed to load resource/.test(m) || // Chrome output
+          !m.includes('Next.js page already hydrated') // test-harness output
+      )
+
+      expect(extraConsoleMessages.length).toBe(0)
+    })
+
+    it('should not invoke the error page getInitialProps client-side for server-side errors', async () => {
+      const [b] = await setupErrorHydrationTests(next, '/with-error')
+
+      expect(
+        await b.eval(
+          () =>
+            (window as any).__ERROR_PAGE_GET_INITIAL_PROPS_INVOKED_CLIENT_SIDE__
+        )
+      ).toBe(undefined)
+    })
+
+    it('should log an message for client-side errors, including the full, custom error', async () => {
+      const [browser, consoleMessages] = await setupErrorHydrationTests(
+        next,
+        '/no-error'
+      )
+
+      const link = await browser.elementByCss('a')
+      await link.click()
+
+      expect(
+        consoleMessages.some((m) => m.includes('Error: custom error'))
+      ).toBe(true)
+
+      expect(
+        consoleMessages.some((m) =>
+          m.includes(
+            'A client-side exception has occurred, see here for more info'
+          )
+        )
+      ).toBe(true)
+    })
+
+    it("invokes _error's getInitialProps for client-side errors", async () => {
+      const [browser] = await setupErrorHydrationTests(next, '/no-error')
+
+      const link = await browser.elementByCss('a')
+      await link.click()
+
+      expect(
+        await browser.eval(
+          () =>
+            (window as any).__ERROR_PAGE_GET_INITIAL_PROPS_INVOKED_CLIENT_SIDE__
+        )
+      ).toBe(true)
+    })
+  }
+)

test/production/error-hydration/pages/_error.tsx

@@ -0,0 +1,11 @@
+export default function ErrorPage() {
+  return <div>Error Page Content</div>
+}
+
+ErrorPage.getInitialProps = async () => {
+  if (typeof window !== 'undefined') {
+    ;(window as any).__ERROR_PAGE_GET_INITIAL_PROPS_INVOKED_CLIENT_SIDE__ = true
+  }
+
+  return {}
+}

test/production/error-hydration/pages/no-error.tsx

@@ -0,0 +1,9 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <p>
+      <Link href="/with-error">click me</Link>
+    </p>
+  )
+}

test/production/error-hydration/pages/with-error.tsx

@@ -0,0 +1,7 @@
+export default function Page() {
+  return <p>hello world</p>
+}
+
+Page.getInitialProps = () => {
+  throw new Error('custom error')
+}