Ошибка, генерируемая дочерним компонентом в методе жизненного цикла componentDidMount, не попадает в границу ошибки

Question

Я изучаю React и не могу получить Границу ошибки при обнаружении ошибки сетевого подключения, вызванной запросом Axios http в дочернем компоненте, когда сервер API недоступен.

Я вижу, что ошибка регистрируется в обработчике перехвата дочернего компонента, однако оператор throw не перехватывается компонентом ErrorBoundary.

Есть идеи, как получить Границу ошибки при обнаружении ошибки, выданной из componentDidMount метод жизненного цикла?

Parent - App.tsx

export class App extends React.Component<AppProps, {}> {
  public render(): JSX.Element {
    return (
      <div>
        <ErrorBoundary>
          <AppBar color="primary" position="static">
            <Toolbar>
              <TypoGraphy variant="h6" color="inherit">
                Course App
              </TypoGraphy>
              <NavBar />
            </Toolbar>
          </AppBar>
          <CourseList />
        </ErrorBoundary>
      </div>
    );
  }
}

Child - CourseList.tsx

  componentDidMount(): void {
    console.log('CourseList::componentDidMount');

    const dataSource: RestDataCourse = new RestDataCourse();
    dataSource
      .getCourses()
      .then(courseList => {
        this.setState({ courses: courseList });
      })
      .catch(error => {
        console.error(`Error retrieving courses => ${JSON.stringify(error)}`);
        throw error;
      });
  }

ErrorBoundary

import * as React from 'react';

interface ErrorBoundaryProps {
  hasError: boolean;
  error: Error;
  info: React.ErrorInfo;
}
export default class ErrorBoundary extends React.Component<
  {},
  ErrorBoundaryProps
> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false, error: undefined, info: undefined };
  }

  componentDidCatch(error: any, info: any): void {
    console.log('ErrorBoundary has encountered an error');
    this.setState({ hasError: true, error: error, info: info });
  }

  render(): {} {
    if (this.state.hasError) {
      return (
        <div id="errorModal" className="modal">
          <div className="modal-content">
            <span className="close">&times;</span>
            <h2>Application Crash</h2>
            <p>Error encountered in application.</p>
            {this.state.error}
          </div>
        </div>
      );
    }

    // Render children if no error
    return this.props.children;
  }
}

Answer 1

Границы ошибок предназначены для обнаружения ошибок во время рендеринга, в методах жизненного цикла и в конструкторах всего дерева под ними.

Если вы хотите перехватывать необработанные ошибки обещания глобально (вместо обработки непосредственно в компоненте), вы можете использовать window.onunhandledrejection .

window.onunhandledrejection = function(e) {
  console.log(e.reason);
}

, но это не такпо умолчанию поддерживается во всех браузерах.

Небольшое хакерское решение - вызвать this.setState(() => { throw err; }); в catch вашего обещания.