Preact 10 more difficult to debug uncaught errors than Preact 8.

Recently giving Preact 10 a try after using Preact 8 for a very long time, but having massive difficulties working with it cause of the inability to properly debug with it.

Let's say I had something like the following:

class MyComponent extends Component {
    componentDidMount () {
        a + b; // throws an uncaught error
    }

    render () {
        return <div>Hello World</div>
    }
}

In Preact 8, this will happen:

In Preact 10, this will happen:

In Preact 8, it's super easy to see what went wrong, and to inspect variables and try out different snippets of code to try and fix the issue. In Preact 10 because of the try/catch for supporting componentDidCatch, I can't do that anymore, making it really frustrating to identify the issue and solve it, especially when using eval source maps where you can't often can't use the stack trace to click on the relevant line.

Is there any way to resolve this? Can Preact's code be re-organised so that there's no try/catch if there's no componentDidCatch in the component tree? This issue can make fixing code fairly time consuming so would appreciate any thoughts you have.

Thanks! 🙂

Reproduce the componentDidMount error described in the issue using Preact 10, then compare the browser debugger behavior with Preact 8. Investigate the try/catch behavior needed for componentDidCatch and determine whether uncaught errors can remain inspectable without breaking error-boundary support. Done means the debugging experience is restored while componentDidCatch continues to work.