Hata işleme ve UX açıklamaları

1) Neden önemli

• Ne olduğunu ve daha sonra ne yapılacağını açıklar,
• girilen verileri kaydeder ve ilerleme kaybını önler,
• Güvenli bir tekrarlama veya alternatif bir yol verir,
• Kullanılabilir kalır (SR/klavye) ve çok fazla ortaya çıkarmaz.

2) Hata tipolojisi (arayüz için)

1. Veri doğrulama (4xx istemci): boş/geçersiz alanlar, biçim, uzunluk, kural çakışması.
2. İş kuralları: sınırlar, coğrafi kısıtlamalar, KYC/KYB, kopyalar, kullanılamayan yuvalar.
3. Haklar/izinler: rol, kaynağa erişim, yaş kısıtlamaları.
4. Ağ/sunucu: zaman aşımı, çevrimdışı, 5xx, aşırı yük, oran sınırı.
5. Çakışmalar/durum: 409/412 (veri değişti), ırklar, kilitler.
6. Kaynak yok: 404/410, silindi/aktarıldı.
7. Ödeme ve risk: Banka/PSP tarafından reddedilme, dolandırıcılıkla mücadele, sorumlu oyunun sınırları.

3) Kanallar ve ekran seviyesi

Kural: Kritik tost/hover saklamayın. Kullanıcının izlediği yerde, bir mesaj var.

4) Metin yazarlığı hataları

Yapı: neden - sonuç - eylem.
Ton: dürüst, tarafsız, suçsuz.
Özellikler: Bir alan/koşul belirtin, kodlardan ve yığınlardan kaçının.
Düğme eylemi: "Tekrarla", "Kartı değiştir", "Filtreleri sıfırla", "Sohbeti aç".
Hassas veriler: gösterme (PAN maskeleme, kişisel nitelikler).

Örnekler

İyi: "Ödeme başarısız oldu: banka işlemi reddetti. Başka bir yöntem deneyin veya daha sonra tekrar deneyin.
Kötü: "Hata 500. Bir şeyler yanlış gitti».

Güzel: "Günlük harcama limitine ulaşıldı. Yeni bir sınır belirleyin ya da yarın deneyin"

İyi: "Dosya çok büyük (maks. 25 MB). Lütfen bazı dosyaları sıkıştırın veya indirin.

5) Davranış ve odaklanma (A11y)

Hata odak bağlamında görüntülenir: odağı ilk hatalı alana aktarırız.
Yaşayan bölgeler: bilgi için 'rol =' status '(kibar), eleştirel için' rol = 'alert' (iddialı).
Görünür ': odak-görünür', AA ≥ kontrast, renk alternatifleri (simge/metin).
Mesajı 'aria-description by' yoluyla alana bağlıyoruz.

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) Retrai, backoff ve idempotency

Başarı şansı varsa tekrarlama teklif edilir (ağ arızaları, 5xx, oran sınırı).
Üstel geri dönüş 1-2-4-8 s, girişimlerin sınırı, anlaşılabilir düğme "Tekrarla".
Kritik işlemler (oranlar/ödemeler): Zorunlu Idempotency-Key - kopyaları hariç tutar.
İyimser güncellemeleri geri almak - net görsel geri dönüş + açıklama.

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) Çevrimdışı, zaman aşımları ve kısmi içerik

Çevrimdışı: "Bağlantı yok" afişini, önbelleğe erişimi (salt okunur), senkronizasyon kuyruğunu gösteriyoruz.
Zaman aşımları: UI zaman aşımı (3-5 saniye) - durum "Onay bekleniyor"... güvenli yineleme/geri alma.
Kısmi başarı: yönettiğimizi koruruz; "senkronize değil" işaretlemesi.

8) Çatışmalar ve rekabetçilik

409/412: Güncel olmayan veriler. "Update'i önerin ve diff'i (değişen) gösterin.
Kilitler: Bloğu kimin tuttuğunu ve ne kadar süreyle "Erişim iste" düğmesini bildiririz.

9) Örnek UI şablonları

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) Hata belirteçleri (tasarım 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) Güvenlik ve gizlilik

Yığın izlerini, dahili kimlikleri, veritabanı yollarını görüntülemiyoruz.
Hassas değerleri (haritalar, belgeler) maskeliyoruz.
Mesajlar bir saldırgana sorulmamalıdır (örneğin, bir hesabın var olduğu).
Destek için - parçalar yerine korelasyon kimliği.

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

12) Metrikler ve Kontrol

INP ve hata sırasında Uzun Görevlerin payı (hata UI'yi "asmamalıdır").
Başarı oranını yeniden deneyin, 1000 eylem başına hata, geri yükleme zamanı.
"Yardım/Sohbet" üzerine TO, formların yüzdesi düştü.
Isı haritaları: alan hatalarının en sık meydana geldiği yerler.

13) KG kontrol listesi

Kullanılabilirlik

• İlk geçersiz alana odaklanın; 'aria-describedby'/' aria-invalid' kümesi.
• Kritik mesajlar - 'role =' alert '; AA ≥ kontrast.

Davranış

• Form verileri hata ile kaybolmaz.
• Net bir 'yeniden deneme've doğru bir geri alma var.
• Çevrimdışı mod/önbellek çalışıyor; Banner bakın.

Metin Yazarlığı

• Sebep - Eylem; Teknik jargon ve suçlamalar olmadan.
• Metinler yerelleştirilir ve ızgarayı kırmaz.

Güvenlik

• PII sızıntısı/sırları yok; Yalnızca güvenli kodları/kimliği göster.
• Idempotency kritik işlemler için etkinleştirilmiştir.

14) iGaming'in özellikleri

• UI hemen 'meşgul' kaydeder; Gecikmede> 3 s - "Onay bekleniyor"....
• Başarısız olduğunda: dürüst durum ("piyasa kapalı", "katsayı değişti") + güvenli 'Yeniden deneme'.
• Çift teklifi ortadan kaldırmak için Idempotent anahtarı.

• "Banka hatası/PSP" vs "sunucu hatası arasında ayrım yapıyoruz. "Birincisi için -" Başka bir yöntem seç ", ikincisi için -" Yeniden dene ".
• Şeffaf KYC/AML adımları; Linkler "Neden gerekli? ».

• Ses tonu duyarlı, baskı yok. "Sınıra ulaşıldı - sınırı duraklatın veya güncelleyin".
• Hiçbir salgın/neon; AAA kontrastı, SR'de kullanılabilirlik.

• Kısıtlamaları açıkça açıklayın ve "Kuralları/desteği okuyun" önerisinde bulunun.

15) Anti-desenler

Eylem ve bağlam olmadan'bir şeyler ters gitti ".
Bir hatadan sonra formu sıfırlar.
Kritik tost 3 saniye boyunca gizleyin.
Metin/simge olmadan sadece renk.
İptal olasılığı olmayan sonsuz geri çekilmeler.
Dahili kodları/yığın izlerini göster.

16) Tasarım sistemindeki belgeler

Компоненты: 'FieldError', 'FormError', 'PageBanner', 'AlertDialog', 'ErrorBoundary'.
Ton/kontrast/zamanlama belirteçleri, a11y hazır ayarları ve ARIA örnekleri.
Metin şablonlarıyla tipik senaryoların (doğrulama, ağ, haklar, ödemeler) haritası.
"Yap/Yapma": Başarısızlık/başarı metrikleri olan ekranlardan önce/sonra gerçek.

Kısa Özet

Hataları anlaşılabilir ve yönetilebilir hale getirin: insan dili konuşun, girilen verileri kaydedin, güvenli tekrar ve alternatifler sunun, erişilebilirliğe ve gizliliğe saygı gösterin. Daha sonra acil durumlar bile güveni korur ve özellikle kritik bahis ve ödeme senaryolarında kullanıcının yolunu kesmez.