React (Unhelpfully) Eats Stacktraces

[machineghost]

If you have a line of code like the following:

new SomeReactComponent({content: this.props.foo.get('bar')})

and this.props.foo doesn't exist, the React code makes it difficult to debug what's going on.

Normally you can ask the Chrome debugger (and other debuggers as well) to pause on an exception, and it will halt the debugger right on that line. You can then mouseover this.props.foo and see that it is undefined.

However, React has this code:

try {
    renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext();
} finally {
    ReactContext.current = previousContext;
    ReactCurrentOwner.current = null;
}

As you can see, any errors that happen during _renderValidatedComponentWithoutOwnerOrContext are swallowed up, losing both the useful stacktrace and the ability for the browser to debug that code.

I understand React needs to do the two lines in the finally to clean up, but it would be helpful if it could save the exception thrown (eg. try{...} catch (e) { var caughtError = e}) and then rethrow it after it has finished the cleanup (eg. throw (caughtError);).

If for some reason that's impossible, an alternative (but less useful) solution would be to log the error (console && console.error(caughtError)). This would at least provide the developer with the stacktrace, although it wouldn't let them debug the error.

[milesj]

Yes please. Swallowed errors are really annoying.

[jimfb]

That's not how try-finally blocks work. A try-finally block does not swallow an exception.

See: #2626. and #2912, #4199, #2665. etc.

If you can create a simple example in jsfiddle that demonstrates an issue (React swallowing exceptions), I'm happy to re-open and investigate this issue.

On the off chance you're using promises... http://blog.taylormcgann.com/2014/08/21/catch-errors-javascript-promise-chains/