Fix #4574: getInitialProps is not called on _error page for client-side errors (#4764)

## What's wrong

This problem is specific to errors that happen on the client _after_ the initial mounting of the component. (The router has special logic to handle exceptions thrown in `getInitialProps` during a client-side navigation, and I've confirmed this logic is correct.)

Specifically, if the page is mounted, and you raise an exception on the page, the exception will cause  the error page to be mounted without ever invoking `getInitialProps` on the new App/Error page pairing.

This has been illustrated with multiple repros in #4574.

## Why is it broken

This regression was introduced two months ago in #4156, where the invocation of `getInitialProps` was removed from the app's top-level error handler. Specifically, [this line](https://github.com/zeit/next.js/pull/4156/files#diff-895656aeaccff5d7c0f56a113ede9662L147) was removed and [replaced by a comment](https://github.com/zeit/next.js/pull/4156/files#diff-895656aeaccff5d7c0f56a113ede9662R167) that says that "`App` will handle the calling of `getInitialProps`".

I believe the sentiment about "`App` will handle calling `getInitialProps`" is mistaken. In fact, it really doesn't make sense on its face, since it would require an instance lifecycle method of `App` (which is mounted immediately after the comment) to invoke the `static getInitialProps` method on the error page.

## How I fixed it

I've fixed this in a fork by restoring Lines 146 – 148 that were removed in #4156. I think this is the right fix, but Next.js's handling of `getInitialProps` could certainly be improved. (The code in [this conditional](86d01706a6/client/index.js (L173)) speaks to the unnecessary complexity around this.)

client/index.js

@@ -141,7 +141,7 @@ export async function render (props) {
 // 404 and 500 errors are special kind of errors
 // and they are still handle via the main render method.
 export async function renderError (props) {
-  const {err, errorInfo} = props
+  const {App, err, errorInfo} = props
 
   // In development we apply sourcemaps to the error
   if (process.env.NODE_ENV !== 'production') {
@@ -162,8 +162,13 @@ export async function renderError (props) {
   }
 
   // In production we do a normal render with the `ErrorComponent` as component.
-  // `App` will handle the calling of `getInitialProps`, which will include the `err` on the context
+  // If we've gotten here upon initial render, we can use the props from the server.
-  await doRender({...props, err, Component: ErrorComponent})
+  // Otherwise, we need to call `getInitialProps` on `App` before mounting.
+  const initProps = props.props
+    ? props.props
+    : await loadGetInitialProps(App, {Component: ErrorComponent, router, ctx: {err, pathname, query, asPath}})
+
+  await doRender({...props, err, Component: ErrorComponent, props: initProps})
 }
 
 async function doRender ({ App, Component, props, hash, err, emitter: emitterProp = emitter }) {

test/integration/production/pages/error-in-browser-render-status-code.js

@@ -0,0 +1,13 @@
+import React from 'react'
+export default class ErrorInRenderPage extends React.Component {
+  render () {
+    if (typeof window !== 'undefined') {
+      const error = new Error('An Expected error occured')
+      // This will be extracted by getInitialProps in the _error page,
+      // which will result in a different error message being rendered.
+      error.statusCode = 404
+      throw error
+    }
+    return <div />
+  }
+}

test/integration/production/test/index.test.js

@@ -118,6 +118,13 @@ describe('Production Usage', () => {
       const text = await browser.elementByCss('body').text()
       expect(text).toMatch(/An unexpected error has occurred\./)
     })
+
+    it('should call getInitialProps on _error page during a client side component error', async () => {
+      const browser = await webdriver(appPort, '/error-in-browser-render-status-code')
+      await waitFor(2000)
+      const text = await browser.elementByCss('body').text()
+      expect(text).toMatch(/This page could not be found\./)
+    })
   })
 
   describe('Misc', () => {