web-dev-qa-db-ja.com

React ErrorBoundaryでキャッチした後もエラーが表示される

私のReactアプリはエラーをキャッチし、カスタムエラーメッセージを正しく表示していますが、しばらくすると元のエラーログが表示されます。そのため、フォールバックUIは初期エラー画面に置き換えられます。

テストコンポーネント：

import React, { Component } from 'react';

export class Test extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
        <ErrorBoundary>

        <Error></Error>

        </ErrorBoundary>);
    }
}

エラーコンポーネント：

import React, { Component } from 'react';

export class Error extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return ({ test });
    }
}

エラーコンポーネントテストでは未定義なので、未定義のエラーがスローされます。

ErrorBoundary：

import React, { Component } from 'react';

export class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { error: null, errorInfo: null };
        console.log('initiated');
    }

    componentDidCatch(error, errorInfo) {
        // Catch errors in any components below and re-render with error message
        console.log('ERROR');
        this.setState({
            error: error,
            errorInfo: errorInfo
        })
        // You can also log error messages to an error reporting service here
    }

    render() {
        console.log('STATE');
        console.log(this.state.error);
        if (this.state.errorInfo) {
            // Error path
            return (
                <div>
                    <h2>Something went wrong.</h2>
                    <details style={{ whiteSpace: 'pre-wrap' }}>
                        {this.state.error && this.state.error.toString()}
                        <br />
                        {this.state.errorInfo.componentStack}
                    </details>
                </div>
            );
        }
        // Normally, just render children
        return this.props.children;
    }
}

まずこれが表示されます：

custom error

次に、1秒後にこれが表示されます。

initial error

どうすればこれを解決できますか？

コンポーネントがクラッシュした場合、ErrorBoundariesはすべてのクラッシュを防ぎ、そのコンポーネントにカスタムメッセージを表示し、他のコンポーネントを（そのまま）存続させることができます。

javascriptreactjscreate-react-app
21
Maikkeyy

わかったと思います。 create-react-appパッケージには react-overlay-error というツールがあります。これにより、コンソールからのエラーメッセージがアプリのオーバーレイとして表示されるため、スタックトレースを確認してデバッグすることが簡単にできます。

これはプロダクションモードでは表示されず、通常のブラウザコンソールを複製する開発ツールにすぎません。

これを非表示にするには、Escapeを押してオーバーレイをもう一度表示します。

あなたがそれを取り除きたいなら、 この答え が役立つかもしれません。

25
caffeinated.tech