Какой единственный классовый компонент нужен при работе с Hooks в React?

Классовый компонент при работе с Hooks: Error Boundary

В современном React с Hooks есть одна задача, которую невозможно решить функциональным компонентом — обработка ошибок (Error Boundary).

Почему нужен классовый компонент

Hooks работают только в функциональных компонентах. Но getDerivedStateFromError() и componentDidCatch() доступны только в классовых компонентах.

Это архитектурное ограничение React, которое может измениться в будущем.

Error Boundary

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

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

  componentDidCatch(error, errorInfo) {
    // Логирование ошибки в сервис (Sentry, LogRocket)
    console.error('Ошибка перехвачена:', error);
    console.error('Info:', errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-page">
          <h1>Что-то пошло не так</h1>
          <p>{this.state.error?.message}</p>
          <button onClick={() => this.setState({ hasError: false })}>
            Попробовать снова
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

// Использование
function App() {
  return (
    <ErrorBoundary>
      <Header />
      <MainContent /> {/* Если здесь ошибка, будет поймана */}
      <Footer />
    </ErrorBoundary>
  );
}

Что ловит Error Boundary

✅ Ловит:

• Ошибки в render методах
• Ошибки в жизненных циклах
• Ошибки в конструкторах
• Ошибки в дочерних компонентах

❌ НЕ ловит:

• Event handlers (используй try/catch)
• Асинхронный код (Promise rejection)
• Server-side rendering
• Сам Error Boundary

Правильный паттерн

// 1. Error Boundary на уровне приложения
class ErrorBoundary extends React.Component {
  // ...
}

// 2. Event handler с try/catch
function Button() {
  const handleClick = async () => {
    try {
      await fetchData();
    } catch (error) {
      console.error('Ошибка в обработчик:', error);
    }
  };
  return <button onClick={handleClick}>Click me</button>;
}

// 3. Async/await с обработкой
function Component() {
  useEffect(() => {
    (async () => {
      try {
        await fetchData();
      } catch (error) {
        console.error('Ошибка в fetch:', error);
      }
    })();
  }, []);
  return null;
}

// 4. Полная обертка
function App() {
  return (
    <ErrorBoundary>
      <Router>
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
        </Routes>
      </Router>
    </ErrorBoundary>
  );
}

Интеграция с Sentry

import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: 'https://your-sentry-dsn',
  environment: process.env.NODE_ENV
});

class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    Sentry.captureException(error, { extra: errorInfo });
  }
  // ...
}

export default Sentry.withErrorBoundary(App, {
  fallback: <ErrorPage />
});

Alternative: Error Boundary для React 19+

Теоретически в будущем может быть Hook для обработки ошибок:

// Это может появиться в React 19
function useErrorHandler() {
  try {
    // компонент
  } catch (error) {
    // обработка
  }
}

Но сейчас это не поддерживается.

Вывод

Error Boundary — единственный классовый компонент, который нужен при работе с Hooks для обработки ошибок на уровне компонентов.

Для всего остального используй функциональные компоненты + Hooks:

• useState
• useEffect
• useContext
• useReducer
• custom hooks

Для обработки ошибок в event handlers и async коде используй try/catch.

Для глобальной обработки используй Error Boundary на уровне приложения + интеграцию с Sentry.