React 错误边界Error Boundary使用示例解析

//ErrorBoundary.tsx
import * as React from 'react';
interface PropsType {
    children: React.ReactNode;
}
interface StateType {
    hasError: boolean,
    Error?: null | Error,
    ErrorInfo?: null | React.ErrorInfo,
}
export class ErrorBoundary extends React.Component<PropsType, StateType> {
    constructor(props: PropsType) {
        super(props);
        this.state = {
            hasError: false,
            Error: null,
            ErrorInfo: null
        };
    }
    //控制渲染降级UI
    static getDerivedStateFromError(error: Error): StateType {
        return {hasError: true};
    }
    //捕获抛出异常
    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
        //传递异常信息
        this.setState((preState) => 
            ({hasError: preState.hasError, Error: error, ErrorInfo: errorInfo})
        );
                //可以将异常信息抛出给日志系统等等
                //do something....
    }
    render() {
        //如果捕获到异常，渲染降级UI
        if (this.state.hasError) {
            return <div>
                <h1>{`Error:${this.state.Error?.message}`}</h1>
                <details style={{whiteSpace: 'pre-wrap'}}>
                    {this.state.ErrorInfo?.componentStack}
                </details>
            </div>;
        }
        return this.props.children;
    }
}

//main.tsx
import ReactDOM from 'react-dom/client';
import {ErrorBoundary} from './ErrorBoundary.jsx';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <ErrorBoundary>
        <App/>
    </ErrorBoundary>
);

//app.tsx
import * as React from 'react';
function App() {
    const [count, setCount] = useState(0);
    if (count>0){
        throw new Error('count>0!');
    }
    return (
        <div>
            <button onClick={() => setCount((count) => count + 1)}>
                count is {count}
            </button>
        </div>
    );
}
export default App;