React: Component.render() is silently swallowing errors with no console output

[xizhao]

A piece of code in my render function is error-ing. A simple try/catch was able to capture and display the error, but without it React just silently proceeds by returning null in the render function and no error which makes it very difficult to find. Basically if the error happens, render fails silently and displays an empty component.

I am coming up with a JSFiddle to reprod in a simpler case for you to debug.

[sophiebits]

See #2912. Happy to reopen if a simple case shows React is doing something wrong.

[hurrtz]

Hey guys,

this is still a thing... I keep debugging for long periods of time because some errors react won't put into the console.log.

Here's the most recent example:
I have tried to access this.setState inside a function that, itself, should have been bound to "this". When I called this.setState inside the function it failed, resulting in the whole component and all subsequent components to fail rendering, yet no errors where being printed to the console. After I have figured the error out and have, just out of curiosity, wrapped this.setState with a try catch I got this:

TypeError: this.setState is not a function
at __SmartViewStore.getData (eval at (https://localhost:8000/assets/app.js:2797:2), :240:16)
at __SmartViewStore.eval (eval at (https://localhost:8000/assets/app.js:1069:2), :15:37)
at __SmartViewStore.EventEmitter.emit (eval at (https://localhost:8000/assets/app.js:2599:2), :78:17)
at __SmartViewStore.setData (eval at (https://localhost:8000/assets/app.js:2827:2), :315:14)
at eval (eval at (https://localhost:8000/assets/app.js:2827:2), :367:18)
at lib$es6$promise$$internal$$tryCatch (eval at (https://localhost:8000/assets/app.js:2881:2), :362:16)
at lib$es6$promise$$internal$$invokeCallback (eval at (https://localhost:8000/assets/app.js:2881:2), :374:17)
at eval (eval at (https://localhost:8000/assets/app.js:2881:2), :166:11)
at MutationObserver.lib$es6$promise$asap$$flush (eval at (https://localhost:8000/assets/app.js:2881:2), :119:9)

Is there any way to enable these errors in dev-mode without manually wrapping code in try-catch blocks?

[aweary]

@hurrtz could you can share a minimal test case reproducing the issue? You can use https://jsfiddle.net/reactjs/69z2wepo/ as starting point.

[gaearon]

@hurrtz

There is most likely nothing to fix in React. React is not catching any errors. The issue you're seeing is most likely due to your call to setState being inside a Promise callback. When exception is thrown, your catch() handler might be swallowing it. Alternatively it may be possible that you don't have a catch() handler, and Promise rejection stays unhandled, but your Promise polyfill might not log unhandled rejection. In this case I recommend changing the Promise polyfill.

If you're sure it's a problem with React then please help us by providing a case reproducing it. Thanks!

[hurrtz]

Ok, this was on me. I have found no promises anywhere in my project but after I have completely overhauled my webpack configuration (and also my webpack dev server configuration) everything (including errors) showed up as expected. So, still not really sure where the issue was but obviously it was somewhere in my webpack configs.

[samit4me]

@hurrtz Currently experiencing this same silent errors and I suspect it might be our webpack config too. Do you by any chance have your the before and after webpack config files? Or care to share what changed in webpack?

[samit4me]

Turn out it was a Promise eating the error. In the flux store triggered by a parent.