diff --git a/client/index.js b/client/index.js index 57d3bdfc..2427e264 100644 --- a/client/index.js +++ b/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 }) { diff --git a/test/integration/production/pages/error-in-browser-render-status-code.js b/test/integration/production/pages/error-in-browser-render-status-code.js new file mode 100644 index 00000000..97ed8cb0 --- /dev/null +++ b/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
+ } +} diff --git a/test/integration/production/test/index.test.js b/test/integration/production/test/index.test.js index febc553b..702b96c0 100644 --- a/test/integration/production/test/index.test.js +++ b/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', () => {