შეცდომების დამუშავება და UX ახსნა

1) რატომ არის მნიშვნელოვანი

• განმარტავს რა მოხდა და რა უნდა გააკეთოს შემდეგ
• ინარჩუნებს შემოღებულ მონაცემებს და ხელს უშლის პროგრესის დაკარგვას,
• უზრუნველყოფს უსაფრთხო გამეორებას ან ალტერნატიულ გზას,
• რჩება ხელმისაწვდომი (SR/კლავიატურა) და არ ავლენს ზედმეტი.

2) შეცდომების ტიპოლოგია (ინტერფეისისთვის)

1. მონაცემთა შესაბამისობა (4xx კლიენტი): ცარიელი/არასწორი ველები, ფორმატი, სიგრძე, კონფლიქტი წესებს.
2. ბიზნეს წესები: შეზღუდვები, გეო შეზღუდვები, KYC/KYB, დუბლები, მიუწვდომელი სლოტები.
3. უფლებები/შესრულება: როლი, რესურსზე წვდომა, ასაკობრივი შეზღუდვები.
4. ქსელი/სერვერი: Timaut, offline, 5xx, გადატვირთვა, rate limit.
5. კონფლიქტები/მდგომარეობა: 409/412 (მონაცემები შეიცვალა), რბოლა, ბლოკირება.
6. რესურსის ნაკლებობა: 404/410, ამოღებულია/გადაიდო.
7. გადახდა და სარისკო: ბანკის/PSP გადახრა, ანტიფროდი, საპასუხისმგებლო თამაშის ლიმიტები.

3) არხები და გამოსახულების დონე

წესი: ნუ დაიმალებით კრიტიკულად სადღეგრძელო/ჰოვერში. სადაც მომხმარებელი უყურებს შეტყობინებას.

4) შეცდომების საავტორო უფლებები

სტრუქტურა: მიზეზი - შედეგი - მოქმედება.
ტონი: პატიოსანი, ნეიტრალური, დანაშაულის გარეშე.
სპეციფიკა: მიუთითეთ ველი/პირობა, მოერიდეთ კოდებსა და დასტებს.
მოქმედების ღილაკი: „განმეორება“, „ბარათის შეცვლა“, „ფილტრების ამოღება“, „გახსნა ჩატი“.
მგრძნობიარე მონაცემები: არ აჩვენოთ (შენიღბვა PAN, პირადი ატრიბუტები).

მაგალითები

კარგია: "გადახდა არ დასრულებულა: ბანკმა უარყო ოპერაცია. სცადეთ სხვა გზა ან მოგვიანებით გაიმეორეთ".

ცუდი: "შეცდომა 500. რაღაც არასწორედ წარიმართა."

კარგია: "მიღწეულია დღის ხარჯების ლიმიტი. დაადგინეთ ახალი ზღვარი ან შეეცადეთ ხვალ."

კარგი: "ფაილი ძალიან დიდია (მაქს. 25 MB). დაწვა ან ატვირთეთ რამდენიმე ფაილი."

5) ქცევა და ხრიკი (A11y)

შეცდომა ნაჩვენებია ფოკუსურ კონტექსტში: ჩვენ გადავცემთ ფოკუსს პირველ არასწორად ველს.
ცოცხალი რეგიონები: 'role = „status“' (პოლიტი) ინფოსთვის, 'role = „alertive“ (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) Retrai, backoff და idempotence

გამეორება შემოთავაზებულია, თუ წარმატების შანსი არსებობს (ქსელის გაუმართაობა, 5xx, საბაზო ლიმიტი).
ექსპონენტური backoff 1-2-4-8 წმ, მცდელობების ლიმიტი, გასაგები ღილაკი „განმეორება“.
კრიტიკული ოპერაციები (განაკვეთები/გადასახადები): სავალდებულო Idempotence-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) ოფლაინი, ტაიმაუტები და ნაწილობრივი შინაარსი

Offline: ჩვენ ვაჩვენებთ ბანერს „არ არის კავშირი“, წვდომა kash (read-only), სინქრონიზაციის ხაზი.
Taimauts: UI-Taimaut (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- ს, BD- ს გზებს.
ჩვენ შენიღბავს მგრძნობიარე მნიშვნელობებს (ბარათები, დოკუმენტები).
შეტყობინებები არ უნდა უთხრას თავდამსხმელს (მაგალითად, რომ ანგარიში არსებობს).
მხარდასაჭერად - 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 „დახმარება/ჩატი“, მიტოვებული ფორმების პროცენტი.
თერმული ბარათები: სადაც ყველაზე ხშირად ველი-errors ჩნდება.

13) QA ჩეკის სია

წვდომა

• პირველი არასწორი ველის ფოკუსი; 'aria-describedby '/' aria-invalid' გამოიფინა.
• კრიტიკული შეტყობინებები - 'role = "alert" "; კონტრასტი AA.

ქცევა

• ეს ფორმები შეცდომით არ იკარგება.
• გასაგებია 'Retry' და სწორი backoff.
• ოფლაინ რეჟიმი/ქეში მუშაობს; ბანერი ვხედავთ.

საავტორო უფლებები

• მიზეზი - მოქმედება; ტექნიკური ჟარგონის და ბრალდების გარეშე.
• ტექსტები ლოკალიზებულია და არ არღვევს ბადეს.

უსაფრთხოება

• PII/საიდუმლოებების გაჟონვა არ არსებობს; ჩვენ ვაჩვენებთ მხოლოდ უსაფრთხო კოდებს/ID.
• Idempotence შედის კრიტიკულ ოპერაციებში.

14) iGaming სპეციფიკა

• UI დაუყოვნებლივ აფიქსირებს 'busy'; დაგვიანებით> 3 წმ - „ჩვენ ველოდებით დადასტურებას“....
• ყალბი: გულწრფელი სტატუსი („ბაზარი დაიხურა“, „კოეფიციენტი შეიცვალა“) + უსაფრთხო „რეტრი“.
• Idempotent გასაღები ორმაგი განაკვეთის აღმოსაფხვრელად.

• ჩვენ განვასხვავებთ „ბანკის/PSP“ - ს „სერვერის უკმარისობას“. პირველისთვის - „აირჩიე სხვა გზა“, მეორისთვის - 'Retry'.
• KYC/AML გამჭვირვალე ნაბიჯები; ბმულები "რატომ არის ეს აუცილებელი? ».

• ტონი არის მზრუნველი, ზეწოლის გარეშე. „მიღწეულია ლიმიტი - პაუზა ან ლიმიტი განაახლეთ“.
• ციმციმების/ნეონის გარეშე; AAA- ს კონტრასტი, ხელმისაწვდომი SR.

• ნათლად აუხსენით შეზღუდვები და შესთავაზეთ „გაეცნოთ წესებს/მხარდაჭერას“.

15) ანტი შაბლონები

„რაღაც არასწორედ წარიმართა“ ქმედებებისა და კონტექსტის გარეშე.
ფორმის გადინება შეცდომის შემდეგ.
კრიტიკული დამალვა სადღეგრძელოში 3 წამით.
მხოლოდ ფერი ტექსტის/ხატის გარეშე.
გაუთავებელი რელეები გაუქმების გარეშე.
აჩვენეთ შიდა კოდები/დასტის ტრეისი.

16) დოკუმენტაცია დიზაინის სისტემაში

Компоненты: `FieldError`, `FormError`, `PageBanner`, `AlertDialog`, `ErrorBoundary`.
ტონის/კონტრასტის/ტაიმინგის ნიშნები, a11y და ARIA- ს მაგალითები.
ტიპიური სცენარების რუკა (შესაბამისობა, ქსელი, უფლებები, გადახდები) ტექსტური შაბლონებით.
„Do/Don 't“: რეალური ეკრანები/შემდეგ წარუმატებლობის/წარმატების მეტრიკებით.

მოკლე რეზიუმე

გააკეთეთ შეცდომები გასაგები და კონტროლირებადი: ისაუბრეთ ადამიანურ ენაზე, შეინარჩუნეთ დანერგილი მონაცემები, შესთავაზეთ უსაფრთხო გამეორება და ალტერნატივა, პატივი სცეთ ხელმისაწვდომობას და კონფიდენციალურობას. შემდეგ საგანგებო სიტუაციებიც კი ინარჩუნებს ნდობას და არ წყვეტს მომხმარებლის გზას - განსაკუთრებით განაკვეთების და გადახდების კრიტიკულ სცენარებში.