Что такое границы ошибок?

Границы ошибок React используются для отображения удобного пользовательского интерфейса для пользователей при возникновении неожиданных ошибок JavaScript.

Ошибка JavaScript в части пользовательского интерфейса обычно выводит белый экран и приводит к краху всего приложения. React версии 16 предлагает решение этой проблемы с помощью новой концепции «Граница ошибки».

Как реализовать границы ошибок?

Вы можете реализовать React Error Boundaries в своем приложении React в 2 простых шага

1. Создайте компонент с границами ошибок
2. Оберните компонент, подверженный ошибкам, компонентом границы ошибок

Создание компонента границы ошибок

Компонент класса становится границей ошибки, если он определяет один (или оба) из методов жизненного цикла static getDerivedStateFromError() или componentDidCatch(). Используйте static getDerivedStateFromError() для создания пользовательского интерфейса отката после возникновения ошибки. Используйте componentDidCatch() для регистрации информации об ошибке. (https://reactjs.org/docs/error-boundaries.html)

Вот пример компонента границы ошибки, приведенный в документации React.

import React from "react";

class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { error: null, errorInfo: null };
    }

    componentDidCatch(error, errorInfo) {
      // Catch errors in any components below and re-render with error message
      this.setState({
        error: error,
        errorInfo: errorInfo
      })
      // You can also log error messages to an error reporting service here
    }

    render() {
      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;
    }  
  }

export default ErrorBoundary;

Вы можете создать свою собственную границу ошибок с более причудливым пользовательским интерфейсом в соответствии с вашим сценарием использования.

Обертывание с помощью Error Boundary

Есть два способа обернуть компоненты с помощью границы ошибок

1. Вы можете обернуть компонент верхнего уровня
2. Можно обернуть отдельные компоненты

Обертывание компонента верхнего уровня

<ErrorBoundary>
    <App/>
</ErrorBoundary>

Обертывание отдельных компонентов

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

<ErrorBoundary>
    <BankingController/>
</ErrorBoundary>
<ErrorBoundary>
    <ProfileController/>
</ErrorBoundary>
<ErrorBoundary>
    <PolicyController/>
</ErrorBoundary>

Ошибка, возникшая в BankingController, не помешает пользователю использовать PolicyController или ProfileController.

Итак, может ли мое приложение React теперь быть свободным от «белого экрана»?

Ну, границы ошибок React могут поймать все ошибки, кроме следующих:

1. Обработчики событий
2. Асинхронный код
3. Рендеринг на стороне сервера
4. Ошибки, возникающие в самой границе ошибок

Но вы всегда можете использовать обычные блоки try/catch JavaScript, когда это необходимо.

Начиная с React 16, ошибки, которые не были пойманы ни одной границей ошибок, приведут к размонтированию всего дерева компонентов React.

Заключение

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

Спасибо, что нашли время прочитать мою статью. Надеюсь, она вам понравилась. Если вы узнали что-то новое, обязательно поставьте лайк и поделитесь статьей со своими коллегами-разработчиками.