如何处理React中的错误

使用错误边界处理React中错误的最佳实践

当使用一个组件时，如果该组件代码内部发生任何错误，React将卸载整个React组件树，渲染没有。这是处理崩溃的React方法。

您不希望错误显示给您的用户。 React决定显示一个空白页。

但是，这只是默认设置。显示空白页仅比向用户显示隐秘消息更好，但是您应该有更好的方法。

如果您处于开发模式，则任何错误都将触发详细的堆栈跟踪信息，打印到浏览器DevTools安慰。但是，当然不在生产环境中，您实际上并不希望向用户打印错误。

在生产中，您应该拦截错误，并向使用该应用的人员显示某种有用的信息。

这是哪里错误边界参加进来。

通过错误边界，您可以隔离应用程序的各个部分并在本地处理错误。

错误边界是一个React组件，它实现了componentDidCatch()生命周期事件，并包装其他组件：

class ErrorHandler extends React.Component {
  constructor(props) {
    super(props)
    this.state = { errorOccurred: false }
  }
componentDidCatch(error, info) {
this.setState({ errorOccurred: true })
logErrorToMyService(error, info)
}
render() {
return this.state.errorOccurred ? <h1>Something went wrong!</h1> : this.props.children
}
}

在组件JSX中，您可以像这样使用它：

<ErrorHandler>
  <SomeOtherComponent />
</ErrorHandler>

内部发生错误时SomeOtherComponent或其他子组件，以及它们所拥有的整个组件子树中，ErrorHandler将要拦截它，并且您可以优雅地处理该错误。

在上述情况下，受React官方文档的启发，我们有一个errorOccurred状态属性，当设置为true时，将使接口呈现错误处理UI，否则将呈现常规应用程序UI树。

里面componentDidCatch()，它接收2个描述错误的参数，我们也将其称为logErrorToMyService()这只是一些功能的存根，该功能使用的服务如Sentry，Roller，Airbrake或其他可以很好地记录错误以供您查看的服务，因此您不必依赖用户告诉您存在错误来注意一个问题。

免费下载我的反应手册

如何处理React中的错误

使用错误边界处理React中错误的最佳实践

更多反应教程：