Что такое Error Boundary?

Error Boundary — компонент, перехватывающий ошибки рендера в своём поддереве и показывающий запасной UI вместо падения всего приложения.

Зачем нужен

С React 16 неперехваченная ошибка при рендере размонтирует всё дерево — пользователь видит белый экран. Граница ошибок локализует падение: сломался виджет — упал только виджет.

Реализация (только класс)

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };          // переключиться на fallback
  }

  componentDidCatch(error, info) {
    Sentry.captureException(error, { extra: info }); // логирование
  }

  render() {
    return this.state.hasError ? this.props.fallback : this.props.children;
  }
}

Хук-аналогов нет; на практике используют react-error-boundary (fallbackRender, onReset, resetKeys).

Что ловит и не ловит

Ловит: ошибки рендера, методов жизненного цикла и конструкторов дочерних компонентов. Не ловит: обработчики событий (try/catch), асинхронный код и промисы, ошибки самой границы, SSR.

Практика

• Ставить по зонам: маршрут, крупный виджет, модалка, а не одну на всё приложение.
• Пара с Suspense: Suspense — загрузка, ErrorBoundary — провал.
• Fallback с действием: «Повторить» / перезагрузить страницу; ошибки чанков (React.lazy) тоже ловятся здесь.
• Роутеры дают свои границы: errorElement (React Router), error.tsx (Next.js).

Коротко для собеседования

Error Boundary — классовый компонент с getDerivedStateFromError (показать fallback) и componentDidCatch (залогировать), перехватывающий ошибки рендера поддерева. Не ловит события, async и SSR. Ставится по зонам приложения, обычно в паре с Suspense; на практике — react-error-boundary.