Есть ли в 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.