React之错误边界（ErrorBoundary）

文章目录

• componentDidCatch
• 注意
• 实现一个ErrorBoundary组件
• 错误边界的粒度

错误边界是一种React组件。它及其子组件形成一个树型结构，能捕获JavaScript中所有位置的错误，记录下错误，并且还能显示一个后备界面，避免让用户直接看到组件树的崩溃信息。

componentDidCatch

React 16 将提供一个内置函数 componentDidCatch，如果 render() 函数抛出错误，则会触发该函数。

  componentDidCatch(error, info) {}

注意

错误边界目前只在 Class Component 中实现了，没有在 hooks 中实现（因为Error Boundaries的实现借助了this.setState可以传递callback的特性，useState无法传入回调，所以无法完全对标）;

错误边界 无法捕获 以下四种场景中产生的错误：

• 事件处理函数（因为 Error Boundaries 实现的本质是触发更新，但是事件处理函数不在render或者commit阶段，所以无法进行捕获，如果你需要在事件处理器内部捕获错误，可以使用原生的 try / catch 语句）
• 异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
• 服务端渲染（因为触发更新只能在客户端进行，不能在serve端进行）
• 它自身抛出来的错误（因为错误抛出要向父节点冒泡寻找 Error Boundaries 处理，无法处理自身产生的错误）

实现一个ErrorBoundary组件

import React from "react";interface Props {children: any
}interface State {error: any,errorInfo: any
}//类组件建立方式
class ErrorBoundary extends React.Component<Props, State> {//初始化生命周期constructor(props:Props){super(props);this.state = {error: null, errorInfo: null};}//捕获错误边界，在render时错误会执行componentDidCatch(error: any, errorInfo: any) {this.setState({error: error,errorInfo: errorInfo});}render() {if (this.state.errorInfo) {return (<div><h2>Something went wrong.</h2><details style={{whiteSpace: "pre-wrap"}}>{this.state.error && this.state.error.toString()}<br/>{this.state.errorInfo.componentStack}</details></div>);}return this.props.children;}
}export default ErrorBoundary;

错误边界的粒度

错误边界的粒度由你来决定，可以将其包装在最顶层的路由组件中，并为用户展示一个 “xxx” 的错误信息，就像服务端框架经常处理崩溃一样。

也可以将单独的组件包装在错误边界，从而保护其它组件不会崩溃。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！