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

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
-  await doRender({...props, err, Component: ErrorComponent})
+  // 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 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', () => {