1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

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.)
This commit is contained in:
James Reggio 2018-07-11 17:58:42 -04:00 committed by Tim Neutkens
parent 5b3578e58f
commit 4cc691c0b8
3 changed files with 28 additions and 3 deletions

View file

@ -141,7 +141,7 @@ export async function render (props) {
// 404 and 500 errors are special kind of errors // 404 and 500 errors are special kind of errors
// and they are still handle via the main render method. // and they are still handle via the main render method.
export async function renderError (props) { export async function renderError (props) {
const {err, errorInfo} = props const {App, err, errorInfo} = props
// In development we apply sourcemaps to the error // In development we apply sourcemaps to the error
if (process.env.NODE_ENV !== 'production') { 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. // 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 }) { async function doRender ({ App, Component, props, hash, err, emitter: emitterProp = emitter }) {

View file

@ -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 />
}
}

View file

@ -118,6 +118,13 @@ describe('Production Usage', () => {
const text = await browser.elementByCss('body').text() const text = await browser.elementByCss('body').text()
expect(text).toMatch(/An unexpected error has occurred\./) 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', () => { describe('Misc', () => {