Səhv emalı və UX izahları

1) Niyə vacibdir

• nə baş verdiyini və bundan sonra nə edəcəyini izah edir,
• daxil edilmiş məlumatları saxlayır və irəliləyiş itkisinin qarşısını alır,
• təhlükəsiz təkrar və ya alternativ yol verir,
• əlçatan qalır (SR/klaviatura) və lazımsız açıqlayır.

2) Səhv tipologiyası (interfeys üçün)

1. Data validation (4xx client): boş/səhv sahələr, format, uzunluq, qaydalar toqquşması.
2. Biznes qaydaları: limitlər, geo məhdudiyyətlər, KYC/KYB, dubllar, mövcud olmayan yuvalar.
3. Hüquqlar/permissiyalar: rolu, resurslara çıxış, yaş məhdudiyyətləri.
4. Şəbəkə/server: vaxt, oflayn, 5xx, həddindən artıq yükləmə, rate limit.
5. Münaqişələr/vəziyyət: 409/412 (məlumatlar dəyişib), yarış, bloklama.
6. Resurs yoxdur: 404/410, silindi/köçürüldü.
7. Ödəniş və risk: Bank/PSP-nin kənara çıxması, antifrod, məsuliyyətli oyun limitləri.

3) Kanallar və ekran səviyyəsi

Qayda: tost/hover kritik gizlətməyin. İstifadəçi baxdığı yerdə mesaj var.

4) Səhvlərin kopyalanması

Struktur: səbəb → nəticə → hərəkət.
Ton: dürüst, neytral, günahsız.
Spesifikasiya: sahə/şərt göstərin, kodlardan və yığınlardan çəkinin.
Hərəkət düyməsi: «Təkrarla», «Xəritəni dəyişdirin», «Filtrləri sıfırla», «Chat aç».
Həssas məlumatlar: göstərməyin (PAN maskası, şəxsi atributlar).

Nümunələr

Yaxşı: "Ödəniş keçmədi: bank əməliyyatı rədd etdi. Başqa bir yol edin və ya daha sonra təkrarlayın".
Pis: "Səhv 500. Bir şey səhv oldu".
Yaxşı: "Gündəlik xərclərin limiti çatır. Yeni limit təyin edin və ya sabah cəhd edin".
Yaxşı: "Fayl çox böyükdür (maksimum 25 MB). Bir neçə faylı sıxın və ya yükləyin".

5) Davranış və diqqət (A11y)

Səhv fokus kontekstində ortaya çıxır: fokusu ilk səhv sahəyə çeviririk.
Canlı bölgələr: 'role = "status"' (polite) üçün, 'role = "alert' (assertive) - kritik bölgələr üçün.
Görünür ': focus-visible', kontrast ≥ AA, rəng alternativləri (ikona/mətn).
Mesaj 'aria-describedby' vasitəsilə sahəyə bağlanır.

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 və idempotent

Müvəffəqiyyət şansı varsa təkrar təklif olunur (şəbəkə uğursuzluqları, 5xx, rate limit).
Eksponensial backoff 1-2-4-8 s, cəhd limiti, başa düşülən «Təkrarla» düyməsi.
Kritik əməliyyatlar (dərəcələr/ödənişlər): məcburi Idempotency-Key → double istisna.
Optimist yeniləmələrin geri qaytarılması - aydın vizual qayıdış + izahat.

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) Offline, taymaut və qismən məzmun

Offline: «Qoşulma yoxdur» bannerini, cache (read-only) girişini, sinxronizasiya növbəsini göstəririk.
Taymautlar: UI-taymaut (3-5 s) → state «Təsdiq gözləyirik»... təhlükəsiz dönüş/ləğv ilə.
Qismən uğur: bacardığımızı saxlayırıq; «sinxronlaşdırılmayıb».

8) Münaqişələr və rəqabət

409/412: məlumatlar köhnəlib. «Update» təklif və diff göstərmək (nə dəyişdi).
Bloklama: Bloku kimin saxladığını və nə qədər vaxt saxladığını bildirin.

9) UI şablon nümunələri

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) Səhv işarələri (dizayn sistemi)

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) Təhlükəsizlik və məxfilik

Biz yığın treys, daxili ID, DB yolları çıxarmaq deyil.
Həssas dəyərləri (xəritələr, sənədlər) maskalayırıq.
Mesajlar təcavüzkarı təhrik etməməlidir (məsələn, hesab mövcuddur).
Dəstək üçün - detallar əvəzinə korrelyasiya 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 və nəzarət

Səhv zamanı INP və Long Tasks payı (səhv UI-ni «asmamalıdır»).
Retry success rate, 1000 hərəkətlər səhvlər, bərpa qədər vaxt.
«Kömək/Chat» üçün CTR, tərk edilmiş formaların faizi.
İstilik kartları: field-errors ən çox baş verir.

13) QA-çek siyahısı

Mövcudluq

• İlk səhv sahəsinə diqqət; 'aria-describedby '/' aria-invalid' sərgilənir.
• Kritik mesajlar - 'role =' alert ''; AA ≥ kontrast.

Davranış

• Bu formalar səhv olduqda itirilmir.
• Aydın 'Retry' və düzgün backoff var.
• Offline/önbellek işləyir; banner görürük.

Kopyalama

• Səbəb → fəaliyyət; heç bir texniki jarqon və ittihamlar.
• Mətnlər lokallaşdırılır və şəbəkəni sındırmır.

Təhlükəsizlik

• PII sızması/sirləri yoxdur; yalnız təhlükəsiz kodlar/ID göstərir.
• İdempotentlik kritik əməliyyatlar üçün daxil edilmişdir.

14) iGaming xüsusiyyətləri

• UI dərhal 'busy' qeyd edir; gecikmə> 3 s - «təsdiq gözləyirik»....
• fail ilə: dürüst status («bazar bağlandı», «əmsal dəyişdi») + təhlükəsiz 'Retry'.
• İkiqat bahis istisna etmək üçün idempotent açar.

• «Bank/PSP nasazlığı» vs «server nasazlığı» fərqləndiririk. Birincisi üçün - «Başqa bir yol seçin», ikincisi üçün - «Retry».
• Şəffaf KYC/AML addımları; linklər "Niyə lazımdır? ».

• Ton qayğıkeş, heç bir təzyiq. «Limit çatdı - fasilə verin və ya limiti yeniləyin».
• Heç bir flaş/neon; AAA kontrastı, SR-də mövcudluq.

• Məhdudiyyətləri dəqiq izah edin və «Qaydalarla tanış olun/dəstək» təklif edin.

15) Anti-nümunələr

«Bir şey səhv oldu» hərəkət və kontekst olmadan.
Səhvdən sonra formanı sıfırlayın.
Kritik tost 3 saniyə gizlətmək.
Yalnız mətn/ikona olmadan rəng.
Ləğv etmək imkanı olmadan sonsuz retralar.
Daxili kodları/yığın ticarətlərini göstər.

16) Dizayn sistemində sənədləşmə

Компоненты: `FieldError`, `FormError`, `PageBanner`, `AlertDialog`, `ErrorBoundary`.
Ton/kontrast/tayming tokenləri, a11y presetləri və ARIA nümunələri.
Mətn şablonları ilə standart ssenarilərin xəritəsi (validasiya, şəbəkə, hüquqlar, ödənişlər).
«Do/Don 't»: uğursuzluq/uğur metrləri ilə əvvəl/sonra real ekranlar.

Qısa xülasə

Səhvləri başa düşülən və idarə edilə bilən edin: insan dilində danışın, daxil edilmiş məlumatları saxlayın, təhlükəsiz təkrarlama və alternativlər təklif edin, əlçatanlığa və məxfiliyə hörmət edin. Sonra hətta fövqəladə hallar etibarlı qalır və istifadəçi yolunu kəsmir - xüsusilə bahis və ödənişlərin kritik ssenarilərində.