ErrorBoundary.tsx

/**
 * @file error boundary
 */
import {Button, Result} from 'antd';
import React, {Component} from 'react';
import {Link} from 'react-router-dom';

export default class ErrorBoundary extends Component<any, {hasError: boolean}> {
    constructor(props: any) {
        super(props);
        this.state = {hasError: false};
    }
    componentDidCatch(error: any, errorInfo: any) {
        this.setState({hasError: true});
        console.error(error);
        console.error(errorInfo);
    }
    reloadFn() {
        setTimeout(() => window.location.reload());
    }
    render() {
        if (this.state.hasError) {
            return (
                <>
                    <Result
                        status="500"
                        title="很抱歉，有一些异常，请尝试刷新页面"
                        extra={
                            <Link to="/">
                                <Button type="primary" key="console" onClick={() => this.reloadFn()}>
                                    返回首页
                                </Button>
                            </Link>
                        }
                    />
                </>
            );
        }
        return this.props.children;
    }
}