如何在react中处理报错

本文为 360 奇舞团前端工程师翻译 

原文地址：https://www.developerway.com/posts/how-to-handle-errors-in-react

    我们都希望我们的应用能稳定、完美运行，并且能够考虑到每一个边缘情况。但是现实情况是，我们是人，是人就会犯错，并且也不存在没有bug的代码。无论我们多么小心或者编写了多少自动化测试，总会有出现严重错误的情况。重要的是，当错误影响到用户体验时，尽可能地定位它，并能以优雅的方式处理它，直到它真正被修复。
     所以今天，让我们来看看React中的错误处理：如果发生错误，我们可以做什么，不同的错误捕捉方法的注意事项是什么，以及如何减小错误的影响。

为何要捕获react中的错误

     那么第一件事：为什么在React中拥有一些错误捕获解决方案是极其重要的？
    这个答案很简单：从16版开始，在React生命周期中抛出的错误，如果不停止的话，将导致整个应用自行卸载。在此之前，组件会被保留在屏幕上，即使是样式错误和交互错误的。现在，在UI的一些无关紧要的部分，甚至是一些你无法控制的外部库中，一个未被捕获的错误也可以使整个页面挂掉，给用户呈现白屏。
    在此之前，前端开发人员从来没有过这样的破坏力。

还记得在js中是如何捕获错误信息的吗？

    在javascript里如何捕获错误？众所周知，我们可以使用try/catch语句：在try里做一些事情，在它们执行失败的时候catch这些错误来减少影响

try {
  // if we're doing something wrong, this might throw an error
  doSomething();
} catch (e) {
  // if error happened, catch it and do something with it without stopping the app
  // like sending this error to some logging service
}

相同的语法也适用于async函数

try {
  await fetch('/bla-bla');
} catch (e) {
  // oh no, the fetch failed! We should do something about it!
}

    如果我们正在使用旧的promises规范，它有专门的方法来捕获错误。我们可以基于promise的API来重写fetch例子，像下面这样：

fetch('/bla-bla').then((result) => {
  // if a promise is successful, the result will be here
  // we can do something useful with it
}).catch((e) => {
  // oh no, the fetch failed! We should do something about it!
})

    以上两种是相同的概念，只是实现方式稍有不同，因此在接下来的文章中，我将只对try/catch错误使用语法。

在React中的try/catch：如何操作和注意事项

    当一个错误被捕获时，我们需要对它做些什么？除了把它记录在某个地方之外，我们还能做什么？更准确地说：我们能为我们的用户做什么？仅仅让他们面对一个空屏幕或者一个不友好的界面。
    最明显和最直观的答案是在等待我们修复的时候渲染一些东西。幸运的是，我们可以在这个catch语句中做任何我们想做的事情，包括设置状态。所以我们可以做一些事情像这样：

const SomeComponent = () => {
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    try {
    } catch(e) {
      setHasError(true);
    }
  })

  if (hasError) return <SomeErrorScreen />

  return <SomeComponentContent {...datasomething} />
}

    我们试图发送一个获取请求，如果请求失败了--设置错误状态，如果错误状态为真，那么我们就渲染一个错误反馈的UI，为用户提供一些额外的信息，比如支持联系号码。
    这种方法非常简单，非常适合简单、可预测且范围狭窄的用例，例如捕获失败的fetch请求。
    但是如果你想捕捉一个组件中可能发生的所有错误，你将面临一些挑战和