How to break on exceptions when using an error boundary

Question

I am using an <ErrorBoundary> component as described in the docs on error boundaries.

However, it seems that Chrome's devtool setting "break on exceptions" no longer works to pause execution on a line of code that throws, which isn't surprising because the error boundary essentially catches all exceptions.

I can get Chrome to break on exceptions if I manually remove the <ErrorBoundary> but I am looking for a way to basically disable it from catching exceptions without having to make temporary source code modifications like that. How can I do this? Is there a "dev mode" setting that makes error boundaries re-throw the exception? Surely I'm not the first person who's wanted Chrome's "break on exception" to not become useless when I'm working in a React project using an error boundary?

I tried putting a breakpoint in componentDidCatch() but unfortunately this doesn't give the original callstack in the debugger, so it isn't very useful. I want to be able to inspect the callstack that threw the error, inspect the local variables and all that good stuff.

Cheers!

Answer 1

It turns out that what I wanted is pretty much covered by enabling "Pause on caught exceptions" in the Chrome devtools. This way even though the ErrorBoundary catches the errors, I still get a breakpoint on the original error.

The only caveat is that if this option is enabled on app load it hits an enormous amount of caught errors, because various polyfills and initialization code is sniffing out runtime state with try... catch blocks. So for my own errors that happen only on initial load it's quite a delicate dance to click that option at the right point.