Реагировать на глобальный ErrorBoundary изящный отказ - PullRequest
Новая
       30

Реагировать на глобальный ErrorBoundary изящный отказ

0 голосов
/ 15 марта 2019

Я только что создал компонент 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, заключается в том, чтобы регистрировать, а не выводить какие-то причудливые сообщения о сбое какого-либо компонента.Мне все равно, если что-то не получается, я просто хочу об этом узнать, чтобы я мог разобраться с этим, не думая о том, как я показываю что-то пользователю, когда происходит ошибка.Ошибка не обязательно означает, что дочерний компонент все равно не будет отображаться, поэтому я все же хочу дать ему возможность сделать это, не перезаписывая его сообщением «что-то пошло не так».Можно ли справиться с этим на глобальном уровне?

...