ErrorBoundary useless with React 16.4 handling of getDerivedStateFromProps

[morgs32]

Bug report

Describe the bug

With the new handling of getDerivedStateFromProps, the ErrorBoundary's state is constantly reset (error to null) before every render. Therefore it is never able to render the ErrorReporter and instead attempts to rerender the faulty Page/react components.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. https://github.com/morgs32/with-next-routes
2. yarn && yarn dev
3. Click on either of the two buttons to go to the about page

Expected behavior

Expect the ErrorBoundary to render next/_error.js with the associated error and stacktrace.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: [e.g. macOS, Windows]
• Browser
• React 16.4.1
• Version of Next.js: 6.1.1

Additional context

If you revert to 16.3.2 this is not an issue. getDerivedStateFromProps does not get called before the re-render, leaving state.error intact.

[timneutkens]

I'm sure it's because of this: https://reactjs.org/blog/2018/05/23/react-v-16-4.html#bugfix-for-getderivedstatefromprops

[vitorbal]

@timneutkens I can try to pick this up. What's the desired behavior that the getDerivedStateFromProps of ErrorBoundary is trying to achieve? Is it so the error goes away after a hot-reload?

[timneutkens]

@vitorbal there's no need to do fix this anymore, I've rewritten most of the logic involving the error overlay in my webpack 4 PR, the development error overlay is now handled by react-error-overlay.

Thank you very much for wanting to help though, very much appreciated, there's quite a few other "good first issue" / "help wanted" issues which we'd love help on 🙏❤️