IssueRaiser

The fake event trick for rethrowing errors in DEV fires unexpected global error handlers and makes testing harder

I'm trying to make use of componentDidCatch in the React 16 beta. I already had a global window error handler which was working fine, but it unexpectedly catches errors that I would expect componentDidCatch to have handled. That is, component-local errors are being treated as window-global errors in dev builds. The problem seems to stem from `invokeGuardedCallbackDev` in `ReactErrorUtils.js`. I think that this entire `__DEV__` block of code is problematic. The stated rational is: ``` // In DEV mode, we swap out invokeGuardedCallback for a special version // that plays more nicely with the browser's DevTools. The idea is to preserve // "Pause on exceptions" behavior. Because React wraps all user-provided // functions in invokeGuardedCallback, and the production version of // invokeGuardedCallback uses a try-catch, all user exceptions are treated // like caught exceptions, and the DevTools won't pause unless the developer // takes the extra step of enabling pause on caught exceptions. This is // untintuitive, though, because even though React has caught the error, from // the developer's perspective, the error is uncaught. ``` This is misguided because it's not about pausing on exceptions, it's about "pause on _uncaught_ exceptions." However, `componentDidCatch` makes exceptions _caught_! Rather than switching on prod vs dev and using try/catch in prod and window's error handler in dev, React should always use try/catch, but rethrow if you reach the root w

Posted by brandonbloom on Aug 16, 2017, 7:28 PM

Tags

Related issues

Raise real-world problems, find people facing the same issue, and discuss solutions.4,500 issues0 comments

github (Other)

The fake event trick for rethrowing errors in DEV fires unexpected global error handlers and makes testing harder

brandonbloomAug 16, 2017, 7:28 PM

I'm trying to make use of componentDidCatch in the React 16 beta. I already had a global window error handler which was working fine, but it unexpectedly catches errors that I would expect componentDidCatch to have handled. That is, component-local errors are being treated as window-global errors in dev builds. The problem seems to stem from `invokeGuardedCallbackDev` in `ReactErrorUtils.js`. I think that this entire `__DEV__` block of code is problematic. The stated rational is: ``` // In DEV mode, we swap out invokeGuardedCallback for a special version // that plays more nicely with the browser's DevTools. The idea is to preserve // "Pause on exceptions" behavior. Because React wraps all user-provided // functions in invokeGuardedCallback, and the production version of // invokeGuardedCallback uses a try-catch, all user exceptions are treated // like caught exceptions, and the DevTools won't pause unless the developer // takes the extra step of enabling pause on caught exceptions. This is // untintuitive, though, because even though React has caught the error, from // the developer's perspective, the error is uncaught. ``` This is misguided because it's not about pausing on exceptions, it's about "pause on _uncaught_ exceptions." However, `componentDidCatch` makes exceptions _caught_! Rather than switching on prod vs dev and using try/catch in prod and window's error handler in dev, React should always use try/catch, but rethrow if you reach the root w

Comments (0)

No comments yet. Start the discussion.

Comment on this issue