fix: detect loop in client error page

Author: huozhi

packages/next/client/index.tsx

@@ -467,6 +467,14 @@ export function renderError(renderErrorProps: RenderErrorProps): Promise<any> {
   return pageLoader
     .loadPage('/_error')
     .then(({ page: ErrorComponent, styleSheets }) => {
+      return lastAppProps?.Component === ErrorComponent
+        ? import('next/dist/pages/_error').then((m) => ({
+            ErrorComponent: m.default as React.ComponentType<{}>,
+            styleSheets: [],
+          }))
+        : { ErrorComponent, styleSheets }
+    })
+    .then(({ ErrorComponent, styleSheets }) => {
       // In production we do a normal render with the `ErrorComponent` as component.
       // If we've gotten here upon initial render, we can use the props from the server.
       // Otherwise, we need to call `getInitialProps` on `App` before mounting.

packages/next/types/misc.d.ts

@@ -45,6 +45,8 @@ declare module 'next/dist/compiled/arg/index.js' {
   export = arg
 }
 
+declare module 'next/dist/pages/_error'
+
 declare module 'next/dist/compiled/babel/code-frame' {
   export * from '@babel/code-frame'
 }

test/integration/custom-error-page-exception/pages/_error.js

@@ -0,0 +1,12 @@
+/* eslint-disable no-unused-expressions, no-undef */
+let renderCount = 0
+
+export default function Error() {
+  renderCount++
+
+  // Guard to avoid endless loop crashing the browser tab.
+  if (typeof window !== 'undefined' && renderCount < 3) {
+    throw new Error('crash')
+  }
+  return `error threw ${renderCount} times`
+}

test/integration/custom-error-page-exception/pages/index.js

@@ -0,0 +1,20 @@
+/* eslint-disable no-unused-expressions, no-unused-vars */
+import React from 'react'
+import Link from 'next/link'
+
+function page() {
+  return (
+    <Link href="/">
+      <a id="nav">Client side nav</a>
+    </Link>
+  )
+}
+
+page.getInitialProps = () => {
+  if (typeof window !== 'undefined') {
+    throw new Error('Oops from Home')
+  }
+  return {}
+}
+
+export default page

test/integration/custom-error-page-exception/test/index.test.js

@@ -0,0 +1,26 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import webdriver from 'next-webdriver'
+import { nextBuild, nextStart, findPort, killApp } from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 1)
+
+const appDir = join(__dirname, '..')
+const navSel = '#nav'
+const errorMessage = 'Application error: a client-side exception has occurred'
+
+describe('Custom error page exception', () => {
+  it('should handle errors from _error render', async () => {
+    const { code } = await nextBuild(appDir)
+    const appPort = await findPort()
+    const app = await nextStart(appDir, appPort)
+    const browser = await webdriver(appPort, '/')
+    await browser.waitForElementByCss(navSel).elementByCss(navSel).click()
+    const text = await (await browser.elementByCss('#__next')).text()
+    killApp(app)
+
+    expect(code).toBe(0)
+    expect(text).toMatch(errorMessage)
+  })
+})