如何处理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或其他可以很好地记录错误以供您查看的服务,因此您不必依赖用户告诉您存在错误来注意一个问题。

免费下载我的反应手册


更多反应教程: