react上增加错误边界 当存在错误时 不会显示白屏

定义：错误边界是一个 React 组件，它会在其子组件树中的任何位置捕获 JavaScript 错误，并显示一个备用的 UI 而不是崩溃的组件树

在总项目的组件中创建文件：

src/components/ErrorBoundary.tsx

// src/components/ErrorBoundary.tsx
import React, { Component } from 'react';interface ErrorBoundaryProps {children: React.ReactNode;
}interface ErrorBoundaryState {hasError: boolean;
}class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {constructor(props: ErrorBoundaryProps) {super(props);this.state = { hasError: false };}static getDerivedStateFromError(error: Error) {// 更新 state 使下一次渲染能够显示降级后的 UIreturn { hasError: true };}componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {// 你也可以将错误日志上报给服务器console.error("Caught an error:", error, errorInfo);}render() {if (this.state.hasError) {// 你可以自定义降级后的 UIreturn <h1>Something went wrong.</h1>;}return this.props.children; }
}export default ErrorBoundary;

在要使用的组件位置上加：

//引入错误边界组件
import ErrorBoundary from '@/components/ErrorBoundary' 
//使用：
<KeepAlive id={meta?.keepAlive}><Loading><ErrorBoundary>{Component}</ErrorBoundary> {/* 使用错误边界 */}</Loading></KeepAlive>//在要加的位置包裹住即可

报错时显示，可以自定义内容：