UI-паттерны отображения ошибок

Разные типы ошибок требуют разных паттернов. Ошибка должна быть показана на минимально достаточном уровне.

---

Допустимые паттерны

1) Глобальные Error Boundaries

Используются для критических ошибок рендеринга.

MUST

• Глобальный fallback информирует пользователя и предлагает действие (перезагрузка, возврат).

Пример

<AppErrorBoundary fallback={<FatalErrorScreen />} />

---

2) Локальные Error Boundaries

Изолируют ошибки внутри блока или виджета.

MUST

• Локальный fallback не ломает всю страницу.

Пример

<WidgetErrorBoundary fallback={<WidgetError />}>
  <OrdersWidget />
</WidgetErrorBoundary>

---

3) Inline errors

Контекстные ошибки (например, валидация формы).

✅ Хорошо

<FieldError>{t('errors.invalidEmail')}</FieldError>

❌ Плохо

toast.error('Invalid email');

---

4) Toast/Snackbar

Некритичные, временные уведомления без блокировки сценария.

✅ Хорошо

toast.error(t('errors.network'));

---

Запрещено

FORBIDDEN

• Использовать toast/snackbar для ошибок валидации формы.
• Применять один паттерн для всех типов ошибок.
• Показывать пользователю технические детали.

---

Рекомендованная матрица

Сценарий	Паттерн
Ошибка в поле формы	Inline error
Ошибка загрузки виджета	Локальный Error Boundary
Критический сбой рендеринга	Глобальный Error Boundary
Временная ошибка сети	Toast + retry