Что такое Error Boundaries и как их использовать?react-59

Error Boundaries — это механизм в React, который позволяет перехватывать и обрабатывать ошибки JavaScript в дочерних компонентах, чтобы предотвратить "распад" (crash) всего приложения. Они работают как try-catch, но на уровне компонентов.

Как работают Error Boundaries?

Error Boundaries — это обычные React-компоненты, которые:

1. Перехватывают ошибки в методах жизненного цикла (lifecycle methods), рендеринге и конструкторах дочерних компонентов.
2. Не перехватывают ошибки в:
   • Обработчиках событий (event handlers)
   • Асинхронном коде (setTimeout, requestAnimationFrame)
   • SSR (Server-Side Rendering)
   • Ошибках внутри самого Error Boundary

Создание Error Boundary

Для создания Error Boundary нужно:

1. Создать классовый компонент (до версии React 17 это был единственный способ).
2. Реализовать один из методов жизненного цикла:
   • static getDerivedStateFromError()
   • componentDidCatch()

Пример:

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

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

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

  render() {
    if (this.state.hasError) {
      return <h1>Что-то пошло не так.</h1>;
    }
    return this.props.children;
  }
}

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

Оберните компоненты, которые могут вызывать ошибки, в Error Boundary:

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

Лучшие практики

1. Размещение: Размещайте Error Boundaries на стратегически важных уровнях приложения (например, вокруг маршрутов или сложных виджетов).
2. Информативность: Показывайте пользователю понятное сообщение об ошибке.
3. Логирование: Всегда логируйте ошибки для последующего анализа.
4. Восстановление: Предоставьте возможность восстановления (например, кнопку "Попробовать снова").

Пример с восстановлением

class ErrorBoundaryWithRetry extends React.Component {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  handleRetry = () => {
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2>Ошибка: {this.state.error.message}</h2>
          <button onClick={this.handleRetry}>Попробовать снова</button>
        </div>
      );
    }
    return this.props.children;
  }
}

Ограничения

1. Error Boundaries не заменяют обычную обработку ошибок в асинхронном коде и обработчиках событий.
2. В функциональных компонентах пока нет аналога (хотя есть предложения добавить useErrorBoundary в будущем).

Резюмируем

Error Boundaries — это мощный инструмент для обработки ошибок в React-приложениях, который помогает:

• Предотвращать полный крах приложения
• Показывать пользователю понятные сообщения об ошибках
• Логировать ошибки для разработчиков
• Предоставлять механизмы восстановления

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