Hatalary we UX düşündirişleri gaýtadan işlemek

1) Näme üçin bu möhüm?

• näme bolandygyny we indiki näme etmelidigini düşündirýär,
• girizilen maglumatlary saklaýar we ösüşiň ýitmeginiň öňüni alýar,
• howpsuz gaýtalamak ýa-da alternatiw ýol berýär,
• (SR/klawiatura) elýeterli bolup galýar we artykmaç zady açmaýar.

2) Ýalňyşlyklaryň tipologiýasy (interfeýs üçin)

1. Maglumatlary tassyklamak (4xx client): boş/nädogry meýdanlar, format, uzynlyk, düzgünleriň gapma-garşylygy.
2. Iş düzgünleri: çäklendirmeler, geo-çäklendirmeler, KYC/KYB, goşa, elýeterli däl slotlar.
3. Hukuklar/permissiýalar: roly, çeşmä elýeterliligi, ýaş çäklendirmeleri.
4. Tor/serwer: wagt, awtonom, 5xx, artykmaç ýük, rate limit.
5. Gapma-garşylyklar/ýagdaý: 409/412 (maglumatlar üýtgedi), ýaryşlar, blokirlemeler.
6. Çeşmäniň ýoklugy: 404/410, aýryldy/göçürildi.
7. Tölegler we töwekgelçilikler: bank/PSP tarapyndan ret edilmegi, antifrod, jogapkär oýnuň çäkleri.

3) Kanallar we görkeziş derejesi

Düzgün: möhüm tostlary gizlemäň/hower. Ulanyjy seredýän ýerinde, habar bar.

4) Ýalňyşlyklaryň göçürilmegi

Gurluşy: sebäp → derňew → hereket.
Äheň: dogruçyl, bitarap, günäsiz.
Aýratynlygy: meýdan/şert görkeziň, kodlardan we aýaklardan gaça duruň.
Hereket düwmesi: "Gaýtala", "Kartany üýtget", "Süzgüçleri taşla", "Söhbetdeşligi aç".
Duýgur maglumatlar: görkezme (PAN gizlemek, şahsy atributlar).

Mysallar

Gowy: "Töleg geçmedi: bank amaldan ýüz öwürdi. Başga bir usuly synap görüň ýa-da soňrak gaýtalaň".
Erbet: "Hata 500. Bir zat nädogry boldy".
Gowy: "Gündelik çykdajylaryň çäkleri ýetildi. Täze çäk goýuň ýa-da ertir synap görüň".
Gowy: "Faýl gaty uly (iň ýokary 25 MB). Birnäçe faýly gysyň ýa-da göçürip alyň".

5) Özüni alyp barşy we fokus (A11y)

Hata fokus kontekstine getirilýär: fokusy birinji fokus meýdanyna geçirýäris.
Diri sebitler: 'role = "status"' (polite) üçin, 'role = "alert"' (assertive) üçin.
Görünýän ': focus-visible', kontrast ≥ AA, reňk alternatiwalary (nyşan/tekst).
Bu habary 'aria-describedby' arkaly baglanyşdyrýarys.

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) Retraý, backoff we idempotentlik

Eger üstünlik gazanmak mümkinçiligi bar bolsa, gaýtalamak teklip edilýär (tor şowsuzlyklary, 5xx, rate limit).
Eksponensial backoff 1-2-4-8 s, synanyşyklaryň çäkleri, "Gaýtala" düşnükli düwmesi.
Kritiki amallar (nyrhlar/tölegler): hökmany Idempotency-Key → goşa harçlamak.
Optimistik täzelenmeleriň yzyna gaýtarylmagy - aýdyň wizual gaýdyp gelmek + düşündiriş.

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) Awtonom, wagtlar we bölekleýin mazmun

Awtonom: "Birikme ýok" bannerini, kese girişi (read-only), sinhronizasiýa nobatyny görkezýäris.
Taýmautlar: UI-taýmaut (3-5 s) → "Tassyklamaga garaşýarys" ýagdaýy... howpsuz yzyna gaýtarmak/ýatyrmak bilen.
Bölekleýin üstünlik: başaranlarymyzy saklaýarys; "sinhronlaşdyrylmady" diýip bellik edýäris.

8) Gapma-garşylyklar we bäsdeşlik ukyby

409/412: Maglumatlar köne. "Täzelemegi" teklip ediň we diffi görkeziň (näme üýtgedi).
Bloklar: Bloky kimiň saklaýandygyny we näçe wagt dowam edýändigini habar berýäris.

9) UI şablonlarynyň nusgalary

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) Ýalňyşlyk bellikleri (dizaýn ulgamy)

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) Howpsuzlyk we gizlinlik

Stek-treýsleri, içerki şahsyýetnamalary, DB ýollaryny çykarmaýarys.
Duýgur manylary (kartalary, resminamalary) gizleýäris.
Habarlar hüjümçini görkezmeli däldir (mysal üçin hasap bar).
Goldaw üçin - jikme-jiklikleriň ýerine baglanyşyk 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 we gözegçilik

INP we ýalňyşlyk wagtynda Long Tasks paýy (ýalňyşlyk UI-ni "asmaly" däldir).
Retry success rate, 1000 hereketde ýalňyşlyklar, dikeldiş wagty.
"Kömek/Söhbetdeşlik" üçin CTR, taşlanan görnüşleriň göterimi.
Ýylylyk kartalary: field-errors köplenç ýüze çykýar.

13) QA-çek-sanawy

Elýeterlilik

• Birinji ýalan meýdançada fokus; 'aria-describedby '/' aria-invalid' bar.
• Möhüm habarlar - 'role =' alert ''; AA ≥ kontrast.

Özüni alyp barşy

• Bu formalar ýalňyşlyk ýüze çyksa ýitmez.
• Düşnükli 'Retry' we dogry backoff bar.
• Offline/Kesh işleýär; banner görýäris.

Göçürmek

• Sebäp → Hereket; tehniki jargonsyz we aýyplamasyz.
• Tekstler lokallaşdyrylýar we tory bozmaýar.

Howpsuzlyk

• PII/syr syzdyrylmaýar; Diňe/ID kodlaryny görkezýäris.
• Idempotentlik möhüm amallar üçin goşuldy.

14) iGaming aýratynlyklary

• UI derrew "busy" düzedýär; gijikdirilende> 3 s - "Tassyklamaga garaşýarys"....
• Fail: dogruçyl statusy ("bazar ýapyldy", "koeffisiýent üýtgedi") + howpsuz 'Retry'.
• Goşa stawkany aýyrmak üçin idempotent açary.

• "Bankyň/PSP-iň şowsuzlygy" vs "serweriň şowsuzlygy". Birinjisi üçin - "Başga usuly saýlaň", ikinjisi üçin - "Retry".
• KYC/AML aç-açan ädimleri; Baglanyşyklar "Näme üçin gerek? ».

• Äheňi aladaly, basyşsyz. "Çäk ýetildi - duruzyň ýa-da çägi täzeläň".
• Çyrasyz/neon; AAA kontrast, SR-de elýeterlilik.

• Çäklendirmeleri anyk düşündiriň we "Düzgünler/goldaw bilen tanyşmak" diýip teklip ediň.

15) Anti-patternler

"Bir zat nädogry boldy" hereketsiz we kontekstsiz.
Hatadan soň formany täzelemek.
Möhüm tosty 3 sekunt gizläň.
Diňe tekst/nyşansyz reňk.
Ýatyryp bolmaýan tükeniksiz retralar.
Içerki kodlary/stek-treysleri görkez.

16) Dizaýn-ulgamdaky resminamalar

Компоненты: `FieldError`, `FormError`, `PageBanner`, `AlertDialog`, `ErrorBoundary`.
Äheň/kontrast/wagt bellikleri, a11y presetleri we ARIA mysallary.
Tekst şablonly nusgawy ssenariýalaryň (walidasiýa, tor, hukuklar, tölegler) kartasy.
"Do/Don 't": şowsuzlyk/üstünlik ölçegleri bilen öň/soň hakyky ekranlar.

Gysgaça gysgaça

Ýalňyşlyklary düşnükli we dolandyryşly ediň: adam dilinde gürläň, girizilen maglumatlary saklaň, ygtybarly gaýtalamalary we alternatiwalary hödürläň, elýeterlilige we gizlinlige hormat goýuň. Şonda hatda adatdan daşary ýagdaýlar hem ynamy saklaýar we ulanyjynyň ýoluny kesmeýär - esasanam jedelleriň we tölegleriň möhüm ssenariýalarynda.