我如何处理异常？答案

【问题标题】：How do I handle exceptions?我如何处理异常？
【发布时间】：2015-05-29 21:34:02
【问题描述】：

Angular 有一个很棒的$exceptionHandler。 react.js 有这样的东西吗？

我想将我的错误记录到外部 API。例子：

【问题讨论】：

标签： error-handling exception-handling reactjs

【解决方案1】：

没有像 Angular 那样的魔法。如果有一个未捕获的错误，它会向上传播作用域，直到它到达窗口，然后发出一个错误事件——与没有反应的错误行为相同。

var App = React.createClass({
  render: function(){
    throw new Error("rawr!");
    return <div>Hello, world!</div>
  }
});

window.addEventListener('error', function(e){
  // e instanceof ErrorEvent
  console.error('caught the error: ' + e.message);
});

如果您研究跨浏览器支持，请更新此答案或添加带有引用的评论。

您可以将其发送到您喜欢的任何地方，而不是将其记录到控制台（默认情况下已经发生）。

与其他一些框架不同，未捕获的错误始终是代码中的错误。它不应该发生。

您可能还需要通过在链的末尾显式添加 .catch(reportError) 并检查它是 TypeError 还是 ReferenceError 来对 Promise 错误进行一些特殊处理。

【讨论】：

这太棒了！感谢您清晰详细的解释:)
throw new Error("rawr!"); 吓人：D
+1 表示“与其他一些框架不同，未捕获的错误始终是代码中的错误。它永远不会发生。” :)

【解决方案2】：

虽然@FakeRainBrigand 的回答为理解 Javascript 中一般“未捕获错误”报告机制的机制提供了一个很好的起点，但我觉得大多数应用程序使用 CDN 托管他们的 JS 包，而您无法使用“捕获未捕获的错误” window.addEventListener('error', fn)" 机制。

绕过跨域限制

将crossorigin 属性添加到您的脚本标签中，这样您就可以使用“window.addEventListener('error', fn)”机制来捕捉未捕获的错误。

在您无法使用 cors 设置的情况下

React 16：提供内置的错误处理机制。阅读更多关于Error Boundaries in React here

React 15 或更低版本：这里捕获错误的唯一方法是在每个渲染/组件周围添加 try-catch 块。幸运的是，我们有一个 npm 模块 - react-guard，它通过修补 React 为我们完成了这项工作。

【讨论】：