Как понять когда показать пользователю компонент об ошибке?

Показ ошибки — это решение о том, что сломалось и насколько это мешает пользователю. В React для разных случаев разные механизмы.

Ошибка рендера — Error Boundary

Исключение в компоненте роняет поддерево (а без границы — всё приложение). Граница ставится по зонам:

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

Правило: граница на уровне зоны, а не всего приложения, чтобы падал виджет, а не страница. Ловит только рендер — не события и не async.

Ошибка запроса — состояние данных

Показывать в месте, где ожидались данные, и с возможностью повтора:

if (error) return <ErrorState message="Не удалось загрузить" onRetry={refetch} />;

Различать: 404 → «ничего не найдено»; 401/403 → редирект/сообщение о доступе; 5xx и сеть → «повторить»; таймаут — ретраи автоматически (React Query).

Ошибка действия — тост/инлайн

Не удалось сохранить, поставить лайк: тост или сообщение рядом с кнопкой; UI не разрушать, ввод пользователя сохранить, оптимистичное обновление откатить.

Ошибка валидации — рядом с полем

Не тост: сообщение у поля, aria-describedby, role="alert", фокус на первое ошибочное поле.

Что показывать пользователю

Человеческий текст, что произошло и что делать («Повторить», «Обновить страницу»), без стектрейсов; технические детали — в Sentry. Не показывать ошибку там, где можно тихо восстановиться (фоновое обновление данных при наличии кеша).

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

Ошибка рендера — Error Boundary по зонам (виджет падает, страница живёт). Ошибка загрузки — состояние ошибки на месте данных с кнопкой «Повторить» (различая 404/403/5xx). Ошибка действия — тост с откатом оптимистичного апдейта. Валидация — рядом с полем и с aria. Всегда: понятный текст + действие, детали в мониторинг.