Opt out of next.js `componentDidCatch`

[brainkim]

Feature request

Is your feature request related to a problem? Please describe.

I want to have errors thrown in development so I can use the chrome debugger’s pause on exceptions and inspect the error’s environment. The current error rendering provided by next.js swallows the exception and is a lot less useful than chrome’s debugger.

Describe the solution you'd like

Throwing an error in a custom _app.js causes the error to be caught by some parent component (I think AppContainer?) Maybe a solution is to stop catching errors if we implement a componentDidCatch in App.js

Describe alternatives you've considered

Being a better programmer. (💩 impossible for me tho 💩)

Additional context

Pls. Stop catching my errors when you don’t even catch them in production 😭😭😭
The devtools feature I’m talking about

[brainkim]

Okay so it looks like the componentDidCatch is coming from ReactHotLoader and not next.js, so it might be impossible to fix this from here.

[timneutkens]

What about https://github.com/zeit/next.js/tree/canary/examples/with-componentdidcatch 🤔

[brainkim]

If you create a custom _app.js and throw the error in componentDidCatch, the error will just be caught by react-hot-loader’s AppContainer. I’m trying to get he actual error thrown uncaught b/c setting "Pause on caught exceptions" usually leads to a lot of noise where exceptions are thrown and caught unrelated to your problem.

I dunno if there’s much next.js can do about this, it probably has to be changed in react-hot-loader. IMO their dx has not been on point lately.

[timneutkens]

I mean, you could add debugger; in componentDidCatch https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

Anyway we're planning to remove react-hot-loader soon.

[brainkim]

😛 yeah I guess I could use debugger but that would capture the call stack of the debugger and not the actual error, right?

+1 on removing react-hot-loader. I‘ve been seeing stuff like ReferenceError: _this4 is not defined/ have been unable to hot-reload components with methods that have been passed through higher-order-functions 😡. I’ve come to hate the error screen that react-hot-loader provides. Do you have any idea on alternatives or does regular webpack hot loading seem to work for the more basic use cases (i.e. rerendering styles in components)?

Thanks for all that you do!

[brainkim]

Update for 6.1. Hot reloading is much nicer! 🎉🎷🎊🥁 Unfortunately, errors in the render path seem to make the page to become unresponsive (devtools can’t be opened, page is not interactive, page will not load on full reload). Not sure if this is better but thanks for your efforts. Let me know if you want me to create a new issue for this.