无法捕获编译时错误,Error Boundaries 主要用于 UI 运行时错误。
请参考 Compile time vs run time errors。
此外,您需要使用 getDerivedStateFromError
来在后备 UI 上添加额外的渲染内容:
class ErrorBoundary extends React.Component {
state = {
hasError: false,
error: { message: '', stack: '' },
info: { componentStack: '' }
};
static getDerivedStateFromError = error => {
return { hasError: true };
};
componentDidCatch = (error, info) => {
this.setState({ error, info });
};
render() {
const { hasError, error, info } = this.state;
const { children } = this.props;
return hasError ? <ErrorComponent/> : children;
}
}
为检查你的 ErrorBoundary
,需要从组件树中可达的部分抛出错误(但不能是下列情况)::
- 事件处理函数
- 异步代码(例如 setTimeout 或 requestAnimationFrame 回调函数)
- 服务器端渲染
- 在错误边界本身中抛出的错误(而不是它的子组件)
const ButtonComponent = () => {
throw Error("error!");
return <></>;
};
注意: 在开发环境中,除非您关闭或使用 X 按钮关闭它,否则始终会看到错误叠加。
完整示例:
const ErrorComponent = () => {
return <h1>Something went wrong</h1>;
};
class ErrorBoundary extends React.Component {
state = {
hasError: false,
error: { message: "", stack: "" },
info: { componentStack: "" }
};
static getDerivedStateFromError = error => {
return { hasError: true };
};
componentDidCatch = (error, info) => {
this.setState({ error, info });
};
render() {
const { hasError, error, info } = this.state;
console.log(error, info);
const { children } = this.props;
return hasError ? <ErrorComponent /> : children;
}
}
const ButtonComponent = () => {
throw Error("error!");
return <></>;
};
const App = () => {
return (
<ErrorBoundary>
<ButtonComponent />
</ErrorBoundary>
);
};
![Edit Error-Boundary Example](https://codesandbox.io/static/img/play-codesandbox.svg)
onClick
这样的事件处理程序中捕获错误,感谢你发现了这个问题。 - Dennis Vash