PassFront
  1. PassFront
  2. База знаний
  3. Обработка ошибок

Есть ли в React возможность показывать пользователю ошибку если не работает JSX дерево?

Обработка ошибок

Да — для ошибок рендера («не работает JSX-дерево») в React есть Error Boundaries: специальные компоненты, которые ловят исключение в поддереве и показывают запасной UI вместо «белого экрана».

Проблема

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

Решение: Error Boundary

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

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

  componentDidCatch(error, info) {
    Sentry.captureException(error, info); // залогировать
  }

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

Использование — обернуть зоны приложения:

<ErrorBoundary fallback={<WidgetError />}>
  <RecommendationsWidget />
</ErrorBoundary>

Ошибся виджет — упал только виджет; страница работает. Границы ставят по смысловым блокам: маршрут, крупный виджет, модалка.

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

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

Практика

  • Хук-аналогов нет — это единственный «обязательный класс»; в реальных проектах берут react-error-boundary (fallbackRender, onReset, сброс по ключам).
  • Пара Suspense + ErrorBoundary покрывает «загрузку + провал» декларативно.
  • В dev React показывает оверлей ошибки; fallback виден в проде.

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

Да — Error Boundaries: классовый компонент с getDerivedStateFromError (переключить на fallback-UI) и componentDidCatch (лог в Sentry). Ловит ошибки рендера поддерева, не ловит события/async/SSR. Ставится по зонам приложения; на практике — библиотека react-error-boundary.

Другие вопросы раздела