Аудит error-state и fallback UI

Happy path занимает 80% дизайн-времени и 20% реального продакшена. Error states — наоборот: 5% дизайна и 60% того что видит реальный пользователь когда что-то идёт не так. Этот промт — структурированный аудит error/fallback UI.

Site: {{site_url}}

1. 10 состояний которые нужно покрыть

1. Loading

• Skeleton matched layout
• Spinner если данных нет вообще
• Timeout > 10s → «still loading…» сообщение
• Cancel-кнопка для долгих операций

2. Empty

• Page без данных вообще («No items yet»)
• Filter, который вернул 0 («No matches for X. Try Y»)
• Search 0 results («Did you mean Z?»)
• New user / first-time («Start by creating Y»)
• Все варианты пустоты дизайнят отдельно — нельзя одной фразой

3. Validation error (client-side)

• Inline error per field
• Not generic «Form invalid»
• Disappears когда user editing

4. Server error (5xx)

• «Something went wrong on our side, we're looking. Try again in a minute.»
• Retry-кнопка
• Don't leak stack traces или internal info

5. Network error / offline

• «Check connection, retry»
• Cached data shown с indicator «offline mode»
• Queue pending actions для replay при восстановлении

6. Timeout

• Different message от network error
• «Server is slow. Retry или try a smaller request»
• Не infinite spinner

7. Permission denied (403)

• «You don't have access. Contact admin / upgrade plan»
• Не вести на 404 (security through obscurity often makes UX hard)
• Hide UI элементы которые user can't use, не just disable

8. Not found (404)

• Custom 404 page с навигацией обратно
• Search-by-mistake? → suggest similar
• Common typos в URL — redirect

9. Auth expired (401)

• Redirect to login с return-URL
• Save form data перед redirect
• After login → back to that page и state

10. Rate limited (429)

• «Too many attempts. Wait X seconds»
• Counter / retry-button после timeout
• Не блокировать UX без warning

2. Структура аудита

Для каждого route / surface, проверь:

ROUTE: /pricing

State          | Implemented | UX quality | Has retry? | Notes
loading        | yes         | skeleton   | n/a        | ✓
empty          | n/a         | —          | —          | nothing to be empty
validation     | n/a         | —          | —          | no forms
500            | NO          | —          | NO         | white screen, bug
network down   | NO          | —          | NO         | ditto
timeout        | NO          | —          | NO         | ditto
403            | partial     | redirect   | NO         | sends to login, lossy
404            | yes         | custom     | yes        | ✓
401            | yes         | toast      | n/a        | ✓
429            | NO          | —          | NO         | doesn't happen, but if backend rate-limits...

Сделай эту таблицу для каждой key route. 10-20 routes × 10 states = ~100-200 ячеек.

3. Как ловить error states

Намеренно

• Откинуть JS off → что показывает (SSR без JS)
• DevTools Network → Throttle to Slow 3G → loading states видны
• DevTools Network → Offline → network errors
• DevTools Application → Storage → очистить → empty states + auth flow
• Logged-out incognito → 401 flow
• Manually break URL (/pricing-typo) → 404 flow

Через DevTools

• Network → request → right-click → «Block request URL» → server-down симуляция
• Network → request → right-click → «Edit and resend» → return 500 → see UI

Через API

• curl -X POST /api/x → invalid body → как client обрабатывает 400
• Direct API call с expired token → как UI ведёт себя

4. Quality bar для error UI

Не каждый error state нуждается в Pixar-уровне дизайне, но minimum:

• Контекст: что сломалось (без stack trace)
• Что делать: retry / try alternative / contact support
• Не пугать: красный текст для critical only; не каждое empty состояние с «❌»
• Сохранять state: на retry — не сбрасывай form / scroll / filters
• A11y: error читаемый screen-reader'ом (role="alert" или aria-live)
• Дать выход: link back to home / safer place

5. Network / offline resilience

Для PWA или mobile-heavy продукта:

• Service worker cache strategy: что доступно offline
• Optimistic UI: locally сохранить → sync когда back online
• Pending queue: показать pending actions
• Conflict resolution: если две версии есть, как разрешать
• Background sync (Service Worker API)

6. Anti-patterns

• ❌ «Что-то пошло не так» как универсальный error — useless
• ❌ Stack trace или JSON dump в UI — security leak + ugly
• ❌ Error red colour для empty state — empty не есть error
• ❌ Loading spinner forever на timeout — без retry-кнопки
• ❌ Validation error: «invalid» без detail — что именно invalid?
• ❌ 403 → 404 redirect (security through obscurity) — UX hard, юзер думает «moved»
• ❌ 401 → login → lose return-URL — user приходит на home, теряет context
• ❌ Empty state с «Add item» CTA, но CTA disabled (permissions нет) — frustrating
• ❌ Не локализовать error messages — англоязычный «Network error» в русском интерфейсе

7. Output

1. Матрица routes × 10 states заполнена
2. Top-15 missing states в приоритете
3. Quick wins — что добавить за 1 час (e.g. retry-кнопка, network detect)
4. Network-resilience score — для каких функций offline-ready
5. Дизайн-система error UI — переиспользуемые компоненты (<ErrorState />, <EmptyState />, <NetworkError />)