Способы перенаправления пользователя после componentDidCatch

Question

Поймал ошибку в моем методе componentDidCatch (), и пользовательский интерфейс ошибки отображается.

Что было бы изящным способом избежать ошибки и не заставить пользователя принудительно обновить страницу?

import * as React from "react";

interface ErrorBoundaryState {
    hasError: boolean;
    errorInfo: React.ErrorInfo;
}

export class ErrorBoundary extends React.Component<{}, ErrorBoundaryState> {
    constructor(props: any) {
        super(props);
        this.state = {
            hasError: false,
            errorInfo: undefined,
        };
    }

    public componentDidCatch(error: Error, info: React.ErrorInfo) {
        this.setState({
            hasError: true,
            errorInfo: info
        });
        console.error(error, info);
    }

    public render() {
        if (this.state.hasError) {
            return (
                <h2>Something went wrong, please try again later.</h2>
            );
        }
        return this.props.children;
    }
}

Когда hasError установлен в true, он там и остается. Где было бы хорошее место, чтобы установить его в false и показать детям снова?

Answer 1

Я думаю, что пользователь хочет знать, почему его прервали. Таким образом, вы можете отобразить ошибку, извиняясь перед пользователем и сказав ему, что через 5 секунд он может повторно использовать приложение.

Вы можете использовать setTimeout для установки состояния hasError: false через 5 секунд.