ErrorBoundary를 사용하여 캡처한 후에도 여전히 오류가 표시되는 반응

ErrorBoundary를 사용하여 캡처한 후에도 여전히 오류가 표시되는 반응

My React 앱은 오류를 감지하여 사용자 지정 오류 메시지를 올바르게 표시하지만, 1초 후에도 원래 오류 기록을 표시합니다.따라서 폴백 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 });
    }
}

에러에서는 컴포넌트 테스트가 정의되어 있지 않기 때문에 정의되어 있지 않은 에러가 발생합니다.

오류 경계:

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;
    }
}

먼저 다음과 같이 표시됩니다.

그 후 1초 후에 다음과 같이 표시됩니다.

어떻게 하면 해결할 수 있을까요?

컴포넌트가 크래쉬 하는 경우 ErrorBoundaries를 통해 모든 컴포넌트의 크래쉬를 방지하고 해당 컴포넌트에 커스텀메시지를 표시하여 다른 컴포넌트를 활성화 할 수 있습니다.

난 이해한 것 같아.그create-react-apppackage에는 react-display-error라는 도구가 있습니다.그러면 콘솔의 오류 메시지가 앱 위에 오버레이로 표시되므로 스택 추적 및 디버깅을 쉽게 확인할 수 있습니다.

이것은 프로덕션 모드에서는 표시되지 않습니다.일반 브라우저 콘솔을 복제하는 개발 도구일 뿐입니다.

Escape를 눌러 오버레이를 다시 표시하여 숨길 수 있습니다.

만약 당신이 그것을 없애고 싶다면, 이 대답이 도움이 될 것이다.

언급URL : https://stackoverflow.com/questions/52096804/react-still-showing-errors-after-catching-with-errorboundary