mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
4cc691c0b8
## 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.)
14 lines
426 B
JavaScript
14 lines
426 B
JavaScript
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 />
|
|
}
|
|
}
|