← Индекс руу буцах

Апп-ын тэсвэр — алдааны хуудас, offline, session, давхарга, хэвлэх, SPA

Яагаад

«Happy path» бэлэн болсны дараа апп хамгийн ихээр эвдэрдэг газрууд: 404/403, сүлжээ тасрах, session дуусах, rate limit, хуучирсан өгөгдөл, z-index дайн, scroll lock-оос layout үсрэх, хэвлэхэд sidebar гарч ирэх, SPA-д route солиход screen reader чимээгүй. Энэ файл тэр бүгдэд нэг л шийдэл өгнө. Компонентын 5 төлөв (06) ба dashboard-ын урсгал (10)-ын үргэлжлэл.

Алдааны хуудсууд

Код Гарчиг (h1) Body Үйлдэл
404 «Хуудас олдсонгүй» URL буруу эсвэл хуудас зөөгдсөн; юу бичснийг давтахгүй [Нүүр хуудас] + хайлт (апп-д); landing-д алдартай 3 линк
403 «Танд энэ хуудсыг үзэх эрх алга» Хэн эрх өгч болох (admin, багийн эзэн) [Эрх хүсэх] (primary) + [Буцах]; нэвтрээгүй бол 403 биш login руу redirect + ?next=
500 «Алдаа гарлаа» «Бид мэдээллийг авлаа»; request ID жижиг muted (req_8f3a…) — support-д хэлэх; stack/техник текст хэзээ ч биш [Дахин оролдох] + [Нүүр]
Maintenance (503) «Түр засвартай» Хэзээ дуусах (yyyy-MM-dd HH:mm хүртэл), статус хуудасны линк Автомат retry 60с; Retry-After header

Сүлжээ, session, хязгаар

Давхарга (layering)

Хэвлэх (print)

@media print {
  nav, aside, .sidebar, .topbar, .toast, .no-print, [data-print="hide"] { display: none !important; }
  main { max-width: none; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  table { break-inside: auto; } tr, img, figure { break-inside: avoid; }
  thead { display: table-header-group; }
  * { box-shadow: none !important; color-scheme: light; }
  @page { margin: 16mm; }
}

SPA route солигдоход

  1. document.title = «Хуудасны нэр — Апп» (h1-тэй ижил).
  2. Фокусыг h1 (tabindex="-1") эсвэл <main> руу; scroll дээш (history.back-д байрлал сэргээх — router-ийн scroll restoration).
  3. aria-live="polite" бүсэд «{Хуудасны нэр} хуудас ачаалагдлаа» — бүс app shell-д байнга байна.
  4. Skip link («Гол контент руу») shell-ийн эхний элемент; route бүрт <main id="main">.
  5. Route-level loading: 300ms-ээс хурдан бол юу ч биш; удаан бол дээд талд 2px progress bar (--accent) + хуучин хуудас үлдэнэ, бүтэн skeleton биш.
  6. Route алдаа (chunk load fail — deploy дараах хуучин hash): нэг удаа автоматаар location.reload(), давтвал «Шинэ хувилбар гарсан — [Шинэчлэх]».

Mobile shell — bottom tab bar, PWA

Шалгах

  1. /abc, эрхгүй /admin, серверийг унтраагаад, offline болгоод — 4 дэлгэц зөв, shell зөв эсэх.
  2. Session дуусахыг 3 минут болгоод modal → сунгах → дуусах → login → draft сэргэх.
  3. Modal + доторх select + toast зэрэг нээгдэхэд дараалал зөв, scroll lock-оос layout үсрэхгүй (scrollbar-gutter).
  4. Cmd+P — sidebar алга, table толгой хуудас бүрт, dark-д цагаан.
  5. Route солиход VoiceOver гарчгийг уншиж, фокус h1 дээр.
  6. 375px-д bottom bar safe-area, keyboard гарахад нуугдана; Lighthouse PWA installable.

Эх сурвалж