use next _error, add int test

Author: huozhi

packages/next/client/index.tsx

@@ -443,48 +443,6 @@ export async function render(renderingProps: RenderRouteInfo): Promise<void> {
 // `componentDidCatch`. If there's one, fallback to the simple fallback error
 let renderErrorResolving = false
 // FallbackError component shows when unexpected error occurs on custom _error page
-class FallbackError<P = {}> extends React.Component<P & { err: Error }> {
-  static getInitialProps = ({ err }: { err: Error }) => ({ err })
-  render() {
-    const { err } = this.props
-    return (
-      <div style={fallbackErrorStyles.error}>
-        <style dangerouslySetInnerHTML={{ __html: 'body { margin: 0 }' }} />
-        <h2>
-          {err.name}
-          {`: `}
-          <small>{err.message}</small>
-        </h2>
-        <h4>
-          Application error: a client-side exception has occurred (
-          <a href="https://nextjs.org/docs/messages/client-side-exception-occurred">
-            developer guidance
-          </a>
-          )
-        </h4>
-        <pre style={fallbackErrorStyles.stack}>{err.stack}</pre>
-      </div>
-    )
-  }
-}
-
-const fallbackErrorStyles: { [k: string]: React.CSSProperties } = {
-  error: {
-    color: '#000',
-    background: '#fff',
-    fontFamily:
-      '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
-    height: '100vh',
-    textAlign: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  stack: {
-    textAlign: 'left',
-  },
-}
 
 // This method handles all runtime and debug errors.
 // 404 and 500 errors are special kind of errors
@@ -512,38 +470,40 @@ export function renderError(renderErrorProps: RenderErrorProps): Promise<any> {
   // Make sure we log the error to the console, otherwise users can't track down issues.
   console.error(err)
   const errorComponentPromise = renderErrorResolving
-    ? Promise.resolve({ page: FallbackError, styleSheets: [] })
+    ? import('../pages/_error').then((m) => ({
+        page: m.default,
+        styleSheets: [],
+      }))
     : pageLoader.loadPage('/_error')
 
   renderErrorResolving = true
-  return errorComponentPromise
-    .then(({ page: 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.
-      const AppTree = wrapApp(App)
-      const appCtx = {
+  return errorComponentPromise.then(({ page: 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.
+    const AppTree = wrapApp(App)
+    const appCtx = {
+      Component: ErrorComponent,
+      AppTree,
+      router,
+      ctx: { err, pathname: page, query, asPath, AppTree },
+    }
+    return Promise.resolve(
+      renderErrorProps.props
+        ? renderErrorProps.props
+        : loadGetInitialProps(App, appCtx)
+    ).then((initProps) =>
+      doRender({
+        ...renderErrorProps,
+        err,
         Component: ErrorComponent,
-        AppTree,
-        router,
-        ctx: { err, pathname: page, query, asPath, AppTree },
-      }
-      return Promise.resolve(
-        renderErrorProps.props
-          ? renderErrorProps.props
-          : loadGetInitialProps(App, appCtx)
-      ).then((initProps) =>
-        doRender({
-          ...renderErrorProps,
-          err,
-          Component: ErrorComponent,
-          styleSheets,
-          props: initProps,
-        }).then(() => {
-          renderErrorResolving = false
-        })
-      )
-    })
+        styleSheets,
+        props: initProps,
+      }).then(() => {
+        renderErrorResolving = false
+      })
+    )
+  })
 }
 
 let reactRoot: any = null

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,27 @@
+/* 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 display captured error when it occurs on client rendering', async () => {
+    let { stderr, code } = await nextBuild(appDir, [], { stderr: true })
+    console.error(stderr)
+    const appPort = await findPort()
+    const app = await nextStart(appDir, appPort, { stderr: true })
+    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)
+  })
+})