Throwing components difficult to debug

[neojski]

I ran into a similar situation a couple of times: https://jsfiddle.net/gjf6u5of/2/

There is some component that throws for some reason. I got some weird prop and got upset. The stack trace, however, doesn't tell me anything. I doesn't even point me to <Foo />. They only non-react frames are the one with <Fooo /> (the outer-most component) and then with the throwing component.

I would be great if a situation like this was easier to debug. In particular, seeing the state of the parent component would help a lot.

[edvinerikson]

I managed to find the throwing component through the stacktrace + debug it with Chrome devtools.

I'm not quite sure what things that can be done to make this easier to debug, I managed to get the component state/props when I enabled the Pause On Caught Exceptions option (In devtools, inspecting the local scope).
Do you have any suggestions on how to make it easier?

Personally I would prefer that React doesn't do anything with the exceptions (Otherwise it might be even harder to find the source of the exception).

https://jsfiddle.net/69z2wepo/16991/

[neojski]

Yes, but imagine you have 10 components that use Bar (and Bar happens to throw sometimes). You have no idea which one of them passed these weird arguments to Bar.

[sophiebits]

FWIW if you're truly doing prop validation, this is what propTypes is for and that will automatically show the parent component name.

[colllin]

+1 for rethinking exception handling. The normal debugging workflow is completely disrupted with the current behavior of swallowing and then re-throwing and/or logging exceptions. What if we just stopped catching exceptions in development mode?

[sophiebits]

React does not catch any exceptions. If your exceptions are being swallowed then it's something else in your toolchain (likely promises) doing it.