前言
页面加载时,有时会出现异常错误。为了更好的用户体验,这时候就可以使用Error Boundary来捕捉这些渲染错误
一、在src/components中创建errorBoundary函数组件
// @/components/errorBoundary/index.jsx
//ErrorBoundary.jsx
import * as React from "react";
export class ErrorBoundary extends React.Component {
/**
* 构造函数用于ErrorBoundary组件的初始化
* @param props - 传递给组件的属性
* @return 没有返回值
*/
constructor(props) {
super(props);
this.state = {
hasError: false,
Error: null,
ErrorInfo: null,
};
}
/**
* 捕获错误并更新状态以指示发生了错误
* @param error - 发生的错误。
* @return 更新后的状态,其中hasError设置为true。
*/
static getDerivedStateFromError(error) {
return { hasError: true };
}
/**
* 在渲染过程中捕获错误并使用错误信息更新状态的生命周期
* @param error - 被捕获的错误。
* @param errorInfo - 关于错误的额外信息。
*/
componentDidCatch(error, errorInfo) {
this.setState((preState) => ({ hasError: preState.hasError, Error: error, ErrorInfo: errorInfo }));
}
/**
* 根据错误状态渲染组件
* @return 基于错误状态渲染的内容
*/
render() {
const { hasError, Error, ErrorInfo } = this.state;
const { children } = this.props;
// 如果捕获到异常,渲染降级UI
if (hasError) {
return (
<div>
{/* 错误信息 */}
<h1>{`Error:${Error?.message}`}</h1>
{/* 错误栈 */}
<details style={{ whiteSpace: "pre-wrap" }}>{ErrorInfo?.componentStack}</details>
</div>
);
}
return children;
}
}
二、在入口文件index.js中使用,包裹在外层
// @/components/auth/index.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { ErrorBoundary } from "@/components/errorBoundary/index.jsx";
import "./index.css";
import "./styles/main.scss";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ConfigProvider } from "antd";
import zhCN from "antd/es/locale/zh_CN";
process.env.REACT_APP_MODE === "mock" && require("./mock/index");
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
// <React.StrictMode>
<BrowserRouter>
<ConfigProvider locale={zhCN}>
<ErrorBoundary>
<App />
</ErrorBoundary>
</ConfigProvider>
</BrowserRouter>
// </React.StrictMode>
);
reportWebVitals();
总结
下一篇讲【状态管理工具mobx安装以及本项目登录,表格,用户信息状态管理封装使用】。关注本栏目,会实时更新!