Question

我刚刚创建了一个React ErrorBoundary组件，如下所述：https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

我想用它来捕获我网站上所有未处理的错误，并将它们记录在Sentry中。我的ErrorBoundary组件如下所示：

import { PureComponent } from 'react';

class ErrorBoundary extends PureComponent {
    state = {
        hasError: false
    };

    componentDidCatch(error, errorInfo) {
        this.setState({ hasError: true });
        const captureError = async (error, errorInfo) => {
            const { logErrorWithInfo } = await import(/* webpackChunkName: "sentry" */ '../../utils/sentry');
            logErrorWithInfo(error, errorInfo);
        }
    }

    render() {
        if (this.state.hasError) {
          return <h1>Something went wrong.</h1>;
        }
        return this.props.children;
    }
}

export default ErrorBoundary

我已将此组件放置在App.js中，以便包装所有子组件：

class App extends Component {
  render() {
    return (
      <ErrorBoundary>
        <Router>
          <Header />
            <main className="main">
              <Redirects />
            <Routes />
          </main>
          <Footer />
        </Router>
      </ErrorBoundary>
    );
  }
}

出于测试目的，我在首页场景中强加一个错误，例如：throw "Test Error - Ignore!";。

我遇到的问题是，我不希望多个子组件之一中的一个错误只会破坏整个站点。我不想去将每个子组件都包装在<ErrorBoundary></ErrorBoundary>中。我实现ErrorBoundary组件的主要原因是为了记录日志，而不是使某些组件出现故障的消息显得苍白。我并不在乎是否会失败，我只是想知道它，因此我可以进行排序，而不必考虑发生错误时如何向用户显示事物。错误并不一定意味着子组件无论如何都将无法渲染，因此我仍然想给它提供机会，而不仅仅是用“出问题了”消息覆盖它。可以在全球范围内解决这个问题吗？

反应全局ErrorBoundary正常失败

0 个答案: