web-dev-qa-db-ja.com

エラーページReactJSおよびreact-routerにリダイレクトします。

アプリが壊れたときにユーザーに一般的なエラーページを表示しようとしています。つまり、 ErrorBoundary メソッドを使用してリダイレクトをレンダリングしています。

export default class ErrorBoundary extends Component {
    state = { has_error: false }

    componentDidCatch(error, info)
        this.setState({ has_error: true });
    }


    render() {
        if (this.state.has_error)
            return <Redirect to="/somewhere/else" />
        }
        return this.props.children;
    }
};

そして、ErrorBoundaryを使用して、ルーター内のすべてのルートとサブコンポーネントをラップします。

<Router history={history}>
    <ErrorBoundary>
        <Header />
        <Switch>
            <Route exact path="/" component={Home} />
            <Route
                path="/createManager/:managerId"
                component={CreateManager}
            />
            <Route path="/login" component={LoginComp} />
            <Route path="/test" component={Test} />
            <Route path="/register" component={RegisterAccount} />
            <Route component={NotFound} />
        </Switch>
        <Footer />
    </ErrorBoundary>
</Router>

ComponentDidCatchはトリガーされないため、開発バージョンでも製品バージョンでも、現在のエラーページを離れることはありません。アプリが壊れたとき、またはエラーをスローしようとしたときに、ユーザーをXルートに送るにはどうすればよいですか？

エラーをトリガーするために、1つのコンポーネントを空の小道具に残し、後でクリックして小道具に渡す必要がある関数を使用しようとしました。

javascriptreactjsecmascript-6react-routerreact-dom
7
Nicolas M. Pardo

componentDidCatchは、errorがthrow内でrenderメソッド。

componentDidCatchがトリガーされない理由は、onClickのようなeventsがrenderライフサイクルにないためです。したがって、componentDidCatchはこの種のエラーをキャッチできません。

componentDidCatchをテストする1つの方法は、renderメソッド内でエラーをスローすることです。

Renderメソッド以外のエラーについては、注意して、アクションハンドラーにエラーがあると思われる場所にtry/catchesを追加する必要があります。

また、未定義のonClickを防ぐ良い方法は、flowまたはTypeScriptを追加することです。

https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html#component-stack-traces

React 16は、アプリケーションが誤ってそれらを飲み込んでも、rendering中に発生したすべてのエラーを開発中のコンソールに出力します。エラーメッセージとJavaScriptスタックに加えて、コンポーネントスタックトレースも提供します。これで、コンポーネントツリーのどこで障害が発生したかがわかります。

6
Kenneth Truong