javascript - React global felhanterare fungerar inte för asynkron componentDidMount. Har försökt både componentDidCatch och window.onerror

Jag har följande kod i index.tsx:

window.onerror = function(msg, url, line, col, error) {
   debugger;
   // Note that col & error are new to the HTML 5 spec and may not be 
   // supported in every browser.  It worked for me in Chrome.
   var extra = !col ? '' : '\ncolumn: ' + col;
   extra += !error ? '' : '\nerror: ' + error;

   // You can view the information in an alert to see things working like this:
   alert("Error: " + msg + "\nurl: " + url + "\nline: " + line + extra);

   // TODO: Report this error via ajax so you can keep track
   //       of what pages have JS issues

   var suppressErrorAlert = true;
   // If you return true, then error alerts (like in older versions of 
   // Internet Explorer) will be suppressed.
   return suppressErrorAlert;
};

Källa :

https://stackoverflow.com/a/10556743/3850405

Om jag kastar ett fel som detta i en annan komponent kommer jag att fånga det som förväntat:

componentDidMount() {
    throw new Error();
}

Om den kastas så här:

async componentDidMount() {
    throw new Error();
}

Felet fångas inte och ett Unhandled Rejection (Error): visas.

Jag försökte sedan skapa en global felgräns i React.

import React, { ErrorInfo } from 'react';

interface IProps {

}

interface IState {
    hasError: boolean
}

class ErrorBoundary extends React.PureComponent<IProps, IState> {
    constructor(props: IProps) {
        super(props);
        this.state = { hasError: false };
    }

    componentDidCatch(error: Error, info: ErrorInfo) {
        // Display fallback UI
        debugger;
        console.warn(error);
        console.warn(info);

        this.setState({ hasError: true });
        // You can also log the error to an error reporting service
        //logErrorToMyService(error, info);
    }

    render() {
        if (this.state.hasError) {
            // You can render any custom fallback UI
            return <h1>Something went wrong.</h1>;
        }
        return this.props.children;
    }
}

export default ErrorBoundary

index.tsx:

<React.StrictMode>
    <Provider store={store}>
        <ConnectedIntlProvider>
            <Router>
                <ErrorBoundary>
                    <App />
                </ErrorBoundary>
            </Router>
        </ConnectedIntlProvider>
    </Provider>
</React.StrictMode>,

Källor :

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

https://stackoverflow.com/a/51764435/3850405

Effekten var dock densamma, async componentDidMount fångades inte men annars fungerade det som förväntat.

Jag har hittat denna tråd som nämner problemet men ingen verklig lösning.

https://stackoverflow.com/a/56800470/3850405

Hur kan jag skapa en global felhanterare i React som verkligen fångar allt?

Svar #1

Efter diskussion med @Pointy beslutade jag att lösa det på det här sättet:

window.onerror = (msg, url, line, col, error) => {
    // Note that col & error are new to the HTML 5 spec and may not be 
    // supported in every browser.  It worked for me in Chrome.
    var extra = !col ? '' : '\ncolumn: ' + col;
    extra += !error ? '' : '\nerror: ' + error;

    // You can view the information in an alert to see things working like this:
    console.error("Error: " + msg + "\nurl: " + url + "\nline: " + line + extra);

    // TODO: Report this error via ajax so you can keep track
    //       of what pages have JS issues

    var suppressErrorAlert = true;
    // If you return true, then error alerts (like in older versions of 
    // Internet Explorer) will be suppressed.
    return suppressErrorAlert;
};

window.onunhandledrejection = (e: PromiseRejectionEvent) => {
    console.error(e);
    throw new Error(e.reason.stack);
}

Källa :

https://stackoverflow.com/a/58267314/3850405

Relaterade artiklar