Add error handling for _error page (#7608)

packages/next-server/server/next-server.ts

@@ -582,10 +582,25 @@ export default class Server {
     query: ParsedUrlQuery = {}
   ) {
     const result = await this.findPageComponents('/_error', query)
-    return this.renderToHTMLWithComponents(req, res, '/_error', query, result, {
-      ...this.renderOpts,
-      err,
-    })
+    let html
+    try {
+      html = await this.renderToHTMLWithComponents(
+        req,
+        res,
+        '/_error',
+        query,
+        result,
+        {
+          ...this.renderOpts,
+          err,
+        }
+      )
+    } catch (err) {
+      console.error(err)
+      res.statusCode = 500
+      html = 'Internal Server Error'
+    }
+    return html
   }
 
   public async render404(

test/integration/error-in-error/pages/_error.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+class Error extends React.Component {
+  static async getInitialProps ({ res, err }) {
+    await Promise.reject(new Error('an error in error'))
+    const statusCode = res ? res.statusCode : err ? err.statusCode : null
+    return { statusCode }
+  }
+
+  render () {
+    return (
+      <p>
+        {this.props.statusCode
+          ? `An error ${this.props.statusCode} occurred on server`
+          : 'An error occurred on client'}
+      </p>
+    )
+  }
+}
+
+export default Error

test/integration/error-in-error/pages/index.js

@@ -0,0 +1,10 @@
+import Link from 'next/link'
+
+export default () => (
+  <>
+    <h3>Hi 👋</h3>
+    <Link href='/a-non-existing-page'>
+      <a>a lnik to no-where</a>
+    </Link>
+  </>
+)

test/integration/error-in-error/test/index.test.js

@@ -0,0 +1,39 @@
+/* eslint-env jest */
+/* global jasmine */
+import path from 'path'
+import webdriver from 'next-webdriver'
+import {
+  nextBuild,
+  nextStart,
+  findPort,
+  killApp,
+  renderViaHTTP,
+  waitFor
+} from 'next-test-utils'
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 1
+const appDir = path.join(__dirname, '..')
+let app
+let port
+
+describe('Handles an Error in _error', () => {
+  beforeAll(async () => {
+    await nextBuild(appDir)
+    port = await findPort()
+    app = await nextStart(appDir, port)
+  })
+  afterAll(() => killApp(app))
+
+  it('Handles error during SSR', async () => {
+    const html = await renderViaHTTP(port, '/some-404-page')
+    expect(html).toMatch(/internal server error/i)
+  })
+
+  it('Handles error during client transition', async () => {
+    const browser = await webdriver(port, '/')
+    await browser.elementByCss('a').click()
+    await waitFor(1000)
+    const html = await browser.eval('document.body.innerHTML')
+    expect(html).toMatch(/internal server error/i)
+  })
+})