Xatolarni qayta ishlash va UX tushuntirish

1) Nima uchun bu muhim?

• Nima boʻlganini va bundan keyin nima qilish kerakligini tushuntiradi
• kiritilgan ma’lumotlarni saqlaydi va taraqqiyot yo’qolishining oldini oladi,
• xavfsiz takrorlash yoki muqobil yo’l beradi,
• (SR/klaviatura) mavjud boʻlib qoladi va ortiqcha narsani ochmaydi.

2) Xatolar tipologiyasi (interfeys uchun)

1. Maʼlumot validatsiyasi (4xx client): boʻsh/notoʻgʻri maydonlar, format, uzunlik, qoidalar toʻqnashuvi.
2. Biznes-qoidalar: limitlar, geo-cheklovlar, KYC/KYB, dubli, mavjud bo’lmagan slotlar.
3. Huquq/permissiyalar: roli, resursdan foydalanish, yosh chegaralari.
4. Tarmoq/server: taymaut, oflayn, 5xx, ortiqcha yuklash, rate limit.
5. Nizolar/holat: 409/412 (maʼlumotlar oʻzgardi), poyga, blokirovka.
6. Resursning yoʻqligi: 404/410, olib tashlandi/koʻchirildi.
7. To’lov va tavakkalchilik: bank/PSP tomonidan rad etilishi, antifrod, mas’uliyatli o’yin limitlari.

3) Kanallar va aks ettirish darajasi

Qoida: Tanqidchini tostga/hoverga yashirmang. Foydalanuvchi koʻrgan joyda xabar ham bor.

4) Xatolar nusxasi

Tuzilishi: sababi → oqibati → harakati.
Ohangda: halol, betaraf, aybsiz.
Aniqlik: maydon/shartni koʻrsating, kodlar va oynalardan qoching.
Harakat tugmasi: «Takrorlash», «Xaritani oʻzgartirish», «Filtrlarni tiklash», «Chat ochish».
Sezgir maʼlumotlar: koʻrsatilmasin (PAN kamuflyaj, shaxsiy atributlar).

Namunalar

Yaxshi: "To’lov o’tmadi: bank operatsiyani rad etdi. Boshqa usulni sinab koʻring yoki keyinroq takrorlang".
Yomon: "Xato 500. Nimadir notoʻgʻri boʻldi".
Yaxshi: "Kundalik xarajatlar limitiga erishildi. Yangi chegarani belgilang yoki ertaga urinib koʻring".
Yaxshi: "Fayl juda katta (maksimal 25 MB). Bir nechta faylni siqing yoki yuklab oling".

5) Xulq-atvor va fokus (A11y)

Xato fokus kontekstida koʻrsatiladi: fokusni birinchi xato maydoniga oʻtkazing.
Tirik mintaqalar:’role = «status»’(polite) axborot uchun,’role = «alert»’(assertive) tanqidiy mintaqalar uchun.
Koʻrinadigan’: focus-visible’, kontrast ≥ AA, rangga muqobil (ikona/matn).
Xabarni’aria-describedby’orqali bogʻlaymiz.

html
<label for = "pwd "> Password </label>
<input id="pwd" name="password" aria-describedby="pwd-err" aria-invalid="true">
<p id = "pwd-err" role = "alert"> Minimum 8 characters </p>

6) Retray, backoff va idempotentlik

Agar muvaffaqiyatga erishish ehtimoli boʻlsa, takrorlash taklif etiladi (tarmoq muvaffaqiyatsizliklari, 5xx, rate limit).
Eksponensial backoff 1-2-4-8 s, urinishlar limiti, tushunarli «Takrorlash» tugmasi.
Tanqidiy operatsiyalar (stavkalar/to’lovlar): majburiy Idempotency-Key → dublini istisno qilamiz.
Optimistik yangilanishlarning orqaga qaytishi - aniq vizual qaytish + tushuntirish.

js async function retry(fn, attempts=3){
let wait=1000; for(let i=0; i<attempts; i++){
try{ return await fn(); }catch(e){ if(i===attempts-1) throw e; await new Promise(r=>setTimeout(r,wait)); wait=2; }
}
}

7) Offlayn, taymautlar va qisman kontent

Oflayn: «Ulanish yo’q» bannerini ko’rsating, keshga kirish (read-only), sinxronlash navbati.
Taymautlar: UI taymaut (3-5 s) → «Tasdiqlashni kutmoqdamiz»... holati xavfsiz qaytarish/bekor qilish bilan.
Qisman muvaffaqiyat: biz erishganimizni saqlab qolamiz; «sinxronlanmagan».

8) Nizolar va raqobatbardoshlik

409/412: maʼlumotlar eskirgan. «Yangilash» ni taklif qilish va diffni koʻrsatish (nima oʻzgardi).
Bloklash: blokni kim va qancha vaqt ushlab turishi haqida «Kirish so’rash» tugmasi haqida ma’lumot bering.

9) UI-shablon namunalari

html
<div class="banner banner--error" role="alert">
<strong> Connection failed. </strong> Shows cached data.
<button class =" btn btn--ghost" id = "retry "> Retry </button>
</div>

html
<div role="alertdialog" aria-labelledby="err-title" aria-describedby="err-desc">
<h2 id = "err-title "> Session expired </h2>
<p id = "err-desc "> Sign in again to continue. </p>
<button class = "btn "> Sign in </button>
<button class =" btn btn--ghost"> Home </button>
</div>

tsx function Fallback({ id, onRetry }: { id: string; onRetry: ()=>void }) {
return (
<div role="alert" className="banner banner--error">
<strong> We couldn't load the page. </strong>
<div> Try again. Код: <code>{id}</code> <button onClick={()=>navigator. clipboard. writeText (id)}> Copy </button> </div>
<button onClick = {onRetry}> Retry </button>
</div>
);
}

10) Xato tokenlari (dizayn-tizim)

json
{
"error": {
"tones": { "danger": "#", "warning": "#", "info": "#" },
"aria": { "polite": true, "assertive": true },
"timing": { "toastMs": 3500, "retryBackoffMs": [1000,2000,4000] },
"layout": { "fieldGap": 8, "bannerIcon": 20 }
}
}

css
.banner--error { background: var(--bg-danger); color: var(--on-danger); padding: 12px 16px; border-radius: 12px; }
.field-error { color: var(--role-danger); margin-top: 6px; font-size:.875rem; }

11) Xavfsizlik va maxfiylik

Stek-treys, ichki ID, DB yo’llarini chiqarmaymiz.
Nozik qiymatlarni (xaritalar, hujjatlar) yashirish.
Xabarlar tajovuzkorga xabar bermasligi kerak (masalan, hisob mavjud).
Qo’llab-quvvatlash uchun - tafsilotlar o’rniga korrelyatsiya ID.

json
{"level":"error","event":"payment_fail","correlation_id":"c-8f1...","user_id":"u-","route":"/pay","psp_code":"DO_NOT_EXPOSE_TO_USER"}

12) Metrika va nazorat

Xato paytida INP va Long Tasks ulushi (xato UIni «osib qoʻymasligi» kerak).
Retry success rate, 1000 ta xato, tiklanish vaqti.
«Yordam/Chat» uchun CTR, tashlab ketilgan shakllar foizi.
Issiqlik xaritalari: ko’pincha field-errors paydo bo’ladi.

13) QA-chek-varag’i

Foydalanish imkoniyati

• Birinchi xato maydonida fokus:’aria-describedby ’/’ aria-invalid’.
• Tanqidiy xabarlar -’role =’alert’; kontrast ≥ AA.

Xulq-atvori

• Ushbu shakllar xato boʻlganda yoʻqolmaydi.
• Tushunarli’Retry’va to’g’ri backoff mavjud.
• Oflayn/kesh ishlamoqda; bannerni ko’ramiz.

Nusxa olish

• Sabab → Harakat; texnik jargonsiz va ayblovlarsiz.
• Matnlar lokalizatsiya qilinadi va toʻrni buzmaydi.

Xavfsizlik

• PII/sirlar sizib chiqmaydi; faqat xavfsiz/ID kodlarini koʻrsatamiz.
• Idempotentlik tanqidiy operatsiyalar uchun kiritilgan.

14) iGaming xususiyatlari

• UI darhol’busy’ni qayd etadi; kechiktirilganda> 3 s - «Tasdiqlashni kutmoqdamiz»....
• fail: halol maqom («bozor yopildi», «koeffitsiyent o’zgardi») + xavfsiz’Retry’.
• Ikki baravar stavkani istisno qilish uchun idempotent kalit.

• «Bank/PSP nosozligi» va «server nosozligi» farqlanadi. Birinchisi uchun - «Boshqa usulni tanlang», ikkinchisi uchun - «Retry».
• KYC/AML shaffof qadamlar; "Nima uchun kerak? ».

• G’amxo’rlik, bosim yo’q. «Chegaraga erishilsa, tanaffus qiling yoki chegarani yangilang».
• Chaqnashsiz/neonsiz; AAA kontrasti, SRda foydalanish imkoniyati.

• Cheklovlarni aniq tushuntiring va «Qoidalar/qoʻllab-quvvatlash bilan tanishish» ni taklif qiling.

15) Anti-patternlar

«Bir narsa noto’g’ri bo’ldi».
Xatodan keyin shaklni bekor qilish.
Tanqidiy tostni 3 soniya yashiring.
Faqat matn/ikonkasiz rang.
Bekor qilish imkonisiz cheksiz retrajlar.
Ichki kodlar/stek-treyslarni koʻrsatish.

16) Dizayn-tizimdagi hujjatlar

Компоненты: `FieldError`, `FormError`, `PageBanner`, `AlertDialog`, `ErrorBoundary`.
Tonlar/kontrast/tayming tokenlari, a11y presetalari va ARIA misollari.
Matn shablonli namunaviy ssenariylar xaritasi (validatsiya, tarmoq, huquqlar, to’lovlar).
«Do/Don’t»: muvaffaqiyatsizliklar/muvaffaqiyatlar metrikasi bilan real ekranlar.

Qisqacha xulosa

Xatolarni tushunarli va boshqariladigan qiling: inson tilida gapiring, kiritilgan ma’lumotlarni saqlang, xavfsiz takrorlash va muqobillarni taklif qiling, maxfiylikni hurmat qiling. Shunda hatto g’ayritabiiy vaziyatlar ham ishonchni saqlaydi va foydalanuvchi yo’lini to’xtatmaydi - ayniqsa, stavkalar va to’lovlarning tanqidiy stsenariylarida.