React后台管理（四）-- 使用Error Boundary捕捉错误边界

---

前言

页面加载时，有时会出现异常错误。为了更好的用户体验，这时候就可以使用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安装以及本项目登录，表格，用户信息状态管理封装使用】。关注本栏目，会实时更新！