Қателерді өңдеу және UX-түсіндіру

1) Бұл не үшін маңызды

• не болғанын және одан әрі не істеу керектігін түсіндіреді,
• енгізілген деректерді сақтайды және прогресті жоғалтуды болдырмайды,
• қауіпсіз қайталау немесе балама жол береді,
• (SR/пернетақта) қол жетімді болып қалады және артық ашпайды.

2) Қателер типологиясы (интерфейс үшін)

1. Деректерді валидациялау (4xx client): бос/дұрыс емес өрістер, пішім, ұзындық, ережелер қайшылығы.
2. Бизнес-ережелер: лимиттер, гео-шектеулер, KYC/KYB, дублдер, қол жетімсіз слоттар.
3. Құқықтар/пермиссиялар: рөлі, ресурсқа қолжетімділігі, жас шектеулері.
4. Желі/сервер: таймаут, оффлайн, 5xx, жүктеме, rate limit.
5. Жанжалдар/жағдай: 409/412 (деректер өзгерді), жарыстар, бұғаттау.
6. Ресурстың болмауы: 404/410, жойылды/ауыстырылды.
7. Төлем және тәуекел: банктің/PSP ауытқуы, антифрод, жауапты ойын лимиттері.

3) Арналар және бейнелеу деңгейі

Ереже: тостағанды/hover ішіне жасырмаңыз. Пайдаланушы қараған жерде хабар да бар.

4) Қателерді көшіру

Құрылымы: себеп → салдары → әрекет.
Тон: адал, бейтарап, кінәсіз.
Нақтылығы: өрісті/шартты көрсетіңіз, кодтар мен ағындардан аулақ болыңыз.
Әрекет түймешігі: «Қайталау», «Картаны өзгерту», «Сүзгілерді қалпына келтіру», «Сөйлесуді ашу».
Сезімтал деректер: көрсетілмесін (PAN бүркемелеу, жеке төлсипаттар).

Мысалдар

Жақсы: "Төлем өтпеді: банк операцияны қабылдамады. Басқа жолмен көріңіз немесе кейінірек қайталаңыз".
Жаман: "Қате 500. Бірдеңе дұрыс болмай қалды".
Жақсы: "Күндізгі шығыстар лимитіне қол жеткізілді. Жаңа лимитті орнатыңыз немесе ертең көріңіз".
Жақсы: "Файл тым үлкен (25 МБ). Бірнеше файлды қысыңыз немесе жүктеңіз".

5) Мінез-құлық және фокус (A11y)

Қате фокустық мәтінмәнге шығарылады: фокусты бірінші қате өрісіне аударамыз.
Тірі аймақтар: 'role = «status»' (polite) үшін инфо, 'role = «alert»' (assertive) - сыни аймақтар үшін.
Көрінетін ': focus-visible', контраст ≥ AA, түс баламасы (белгішесі/мәтін).
Хабарды 'aria-describedby' арқылы өріске байланыстырамыз.

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) Ретраи, backoff және іспеттілік

Егер табысқа жету мүмкіндігі болса, қайталау ұсынылады (желілік ақаулар, 5xx, rate limit).
Экспоненциалды backoff 1-2-4-8 с, әрекеттер лимиті, түсінікті «Қайталау» түймесі.
Күрделі операциялар (ставкалар/төлемдер): міндетті Idempotency-Key → дубликаттарды алып тастаймыз.
Оптимистік жаңартулардың кері қайтарылуы - нақты визуалды қайтару + түсіндіру.

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) Оффлайн, таймауттар және ішінара контент

Оффлайн: «Қосылым жоқ» баннерін, кэшке қолжетімділікті (read-only), үндестіру кезегін көрсетеміз.
Таймауттар: UI-таймаут (3-5 с) → Күту күйі «Растау»... қауіпсіз қайталау/болдырмау.
Ішінара табысқа жету: қол жеткізгенімізді сақтаймыз; «үндестірілмеген» деп таңбалаймыз.

8) Жанжалдар және бәсекелестік

409/412: деректер ескірген. «Жаңарту» ұсынылсын және дифф көрсетілсін (не өзгерді).
Бұғаттау: блокты кім және қанша уақыт ұстайтынын хабарлаймыз, «Рұқсат сұраңыз» түймешігі.

9) UI үлгілерінің үлгілері

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) Қате белгілер (дизайн-жүйе)

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) Қауіпсіздік және құпиялылық

Стек-трестерді, ішкі ID, БД жолдарын шығарбаймыз.
Сезімтал мәндерді жасырыңыз (карталар, құжаттар).
Хабарлар шабуылдаушыға ескертпеуі керек (мысалы, аккаунт бар).
Қолдау үшін - бөлшектердің орнына корреляцияның ID.

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

12) Метрика және бақылау

INP және қате сәтіндегі Long Tasks үлесі (қате UI «ілуге» тиіс емес).
Retry success rate, 1000 әрекет қателері, қалпына келтіру уақыты.
CTR «Көмек/Чат», тасталған нысандардың пайызы.
Жылу карталары: field-errors жиі пайда болады.

13) QA-чек-парағы

Қол жетімділік

• Бірінші қате өрісіне назар аударыңыз; 'aria-describedby '/' aria-invalid' қойылған.
• Сыни хабарлар - 'role =' alert '; AA ≥ қарама-қарсылығы.

Мінез-құлық

• Пішін деректері қате пайда болғанда жоғалмайды.
• Түсінікті 'Retry' және дұрыс backoff бар.
• Оффлайн/кеш жұмыс істейді; баннерді көріп отырмыз.

Көшірме

• Себебі → әрекет; техникалық жаргонсыз және айыптаусыз.
• Мәтіндер оқшауланады және торды бұзбайды.

Қауіпсіздік

• PII/құпия таралу жоқ; тек қауіпсіз/ID кодтарын көрсетеміз.
• Тәуекелділік күрделі операциялар үшін қосылған.

14) iGaming ерекшелігі

• UI бірден 'busy' тіркейді; > 3 с кідіріс кезінде - «Растауды күтеміз»....
• fail кезінде: адал мәртебе («нарық жабылды», «коэффициент өзгерді») + қауіпсіз 'Retry'.
• Қос мөлшерлемені болдырмау үшін идемпотенттік кілт.

• «Банктің істен шығуы/PSP» vs «сервердің істен шығуы». Біріншісі үшін - «Басқа тәсілді таңдаңыз», екіншісі үшін - «Retry».
• KYC/AML мөлдір қадамдары; "Бұл не үшін қажет? ».

• Үні қамқор, қысымсыз. «Лимитке қол жеткізілді - үзіліс жасаңыз немесе лимитті жаңартыңыз».
• Жарқылдаусыз/неонсыз; AAA қарама-қайшылығы, SR кезінде қол жетімділік.

• Шектеулерді нақты түсіндіріп, «Ережелермен танысу/қолдау» ұсыныңыз.

15) Қарсы үлгілер

«Бір нәрсе қате болды» әрекетсіз және контекстсіз.
Пішінді қатеден кейін ысыру.
Сындарлы тостты 3 секундқа жасыру.
Тек мәтінсіз/белгішесіз түс.
Болдырмау мүмкіндігі жоқ шексіз ретраялар.
Ішкі кодтарды/стек-трестерді көрсету.

16) Дизайн-жүйедегі құжаттама

Компоненты: `FieldError`, `FormError`, `PageBanner`, `AlertDialog`, `ErrorBoundary`.
Тон/контраст/тайминг токендері, a11y пресеттері және ARIA мысалдары.
Мәтіндік үлгілері бар типтік сценарийлер картасы (валидация, желі, құқықтар, төлемдер).
«Do/Don 't»: істен шығу/табыс өлшемдеріне дейін/кейін нақты экрандар.

Қысқаша түйіндеме

Қателерді түсінікті және басқарымды етіңіз: адам тілінде сөйлеңіз, енгізілген деректерді сақтаңыз, қауіпсіз қайталауды және баламаларды ұсыныңыз, қол жетімділік пен құпиялылықты құрметтеңіз. Сонда тіпті штаттан тыс жағдайлардың өзі сенімді сақтап қалады және пайдаланушының жолын үзбейді - әсіресе мөлшерлемелер мен төлемдердің сыни сценарийлерінде.