Как создать Error Boundary в React?react-50

Error Boundary — это механизм в React для отлова JavaScript-ошибок в компонентах, их обработки и отображения резервного UI вместо "упавшего" компонента. Это помогает предотвратить полное crashes приложения из-за ошибок в отдельных частях интерфейса.

Основные принципы работы Error Boundary

1. Ловит только ошибки в компонентах (не в обработчиках событий, асинхронном коде или SSR).
2. Работает как JavaScript-аналог try/catch, но для React-компонентов.
3. Можно создать только с использованием классового компонента (до появления хуков аналогов для функциональных компонентов нет).

Реализация Error Boundary

Вот пример базового Error Boundary:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Обновляем состояние для отображения резервного UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Можно отправить ошибку в сервис мониторинга (Sentry, LogRocket)
    console.error('Caught error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Резервный UI
      return <h1>Что-то пошло не так.</h1>;
    }

    return this.props.children;
  }
}

Использование Error Boundary

Оберните компоненты, которые могут выбросить ошибку:

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

Важные нюансы

1. Позиционирование: Размещайте Error Boundary на разумном уровне вложенности — не слишком высоко (чтобы не скрывать весь UI), не слишком низко (чтобы не плодить много компонентов).
2. Восстановление: Можно добавить логику сброса ошибки через пропсы:

componentDidUpdate(prevProps) {
  if (prevProps.someKey !== this.props.someKey) {
    this.setState({ hasError: false });
  }
}

3. Типы ошибок: Error Boundary не ловит ошибки в:
   • Обработчиках событий
   • Асинхронном коде (setTimeout, requestAnimationFrame)
   • SSR
   • Самом Error Boundary (только в его детях)

Альтернативы для функциональных компонентов

Пока React не предоставляет хуков для Error Boundary, можно использовать:

1. Пакеты типа react-error-boundary
2. Обертку классового компонента

Резюмируем

Error Boundary — важный инструмент для обработки ошибок в React-приложениях. Его реализация требует классового компонента с методами getDerivedStateFromError и componentDidCatch. Правильное использование помогает улучшить UX при возникновении ошибок.