错误边界是一种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” 的错误信息,就像服务端框架经常处理崩溃一样。
也可以将单独的组件包装在错误边界,从而保护其它组件不会崩溃。