Χειρισμός σφαλμάτων και εξηγήσεις UX

1) Γιατί έχει σημασία

• εξηγεί τι συνέβη και τι να κάνει στη συνέχεια,
• σώζει τα εισαγόμενα δεδομένα και αποτρέπει την απώλεια προόδου,
• παρέχει ασφαλή επαναλαμβανόμενη ή εναλλακτική διαδρομή,
• παραμένει διαθέσιμο (SR/πληκτρολόγιο) και δεν αποκαλύπτει πολλά.

2) Τυπολογία σφάλματος (για διεπαφή)

1. Επικύρωση δεδομένων (4xx πελάτη): κενά/άκυρα πεδία, μορφή, μήκος, σύγκρουση κανόνων.
2. Επιχειρηματικοί κανόνες: όρια, γεωγραφικοί περιορισμοί, KYC/KYB, διπλά, μη διαθέσιμα slots.
3. Δικαιώματα/άδειες: ρόλος, πρόσβαση στον πόρο, περιορισμοί ηλικίας.
4. Δίκτυο/εξυπηρετητής: timeout, offline, 5xx, υπερφόρτωση, όριο ταχύτητας.
5. Συγκρούσεις/κατάσταση: 409/412 (τα δεδομένα άλλαξαν), αγώνες, κλειδαριές.
6. Δεν υπάρχει πόρος: 404/410, διαγράφεται/μεταφέρεται.
7. Πληρωμή και κίνδυνος: απόρριψη από την τράπεζα/ΠΥΠ, καταπολέμηση της απάτης, όρια υπευθυνότητας.

3) Δίαυλοι και επίπεδο απεικόνισης

Κανόνας: Μην αποκρύπτετε κριτική σε τοστ/αιώρηση. Όπου ο χρήστης παρακολουθεί, υπάρχει ένα μήνυμα.

4) Σφάλματα copywriting

Δομή: αιτία → επίδρασης → δράσης.
Τόνος: ειλικρινής, ουδέτερος, χωρίς ενοχές.
Λεπτομέρειες: προσδιορίστε ένα πεδίο/κατάσταση, αποφύγετε τους κωδικούς και τις στοίβες.
«Επανάληψη», «Αλλαγή κάρτας», «Επαναφορά φίλτρων», «Ανοικτή συνομιλία».
Ευαίσθητα δεδομένα: δεν εμφανίζονται (συγκάλυψη PAN, προσωπικά χαρακτηριστικά).

Παραδείγματα

Καλό: "Η πληρωμή απέτυχε: η τράπεζα απέρριψε τη συναλλαγή. Δοκιμάστε άλλη μέθοδο ή δοκιμάστε ξανά αργότερα.

Κακό: "Error 500. Κάτι πήγε στραβά"

Καλό: "Το ημερήσιο όριο δαπανών έχει επιτευχθεί. Ορίστε ένα νέο όριο ή δοκιμάστε αύριο"

Καλό: "Το αρχείο είναι πολύ μεγάλο (μέγιστο 25 MB). Παρακαλώ συμπιέστε ή κατεβάστε μερικά αρχεία.

5) Συμπεριφορά και εστίαση (A11y)

Το σφάλμα εμφανίζεται στο πλαίσιο εστίασης: μεταφέρουμε την εστίαση στο πρώτο εσφαλμένο πεδίο.
Ζωντανές περιοχές: 'role =' status '' (ευγενική) for info, 'role =' alert '' (δυναμική) for critical.
Ορατή ': εστίαση ορατή', αντίθεση ≥ AA, εναλλακτικές του χρώματος (εικονίδιο/κείμενο).
Δεσμεύουμε το μήνυμα στο πεδίο μέσω του «aria-descripedby».

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 και idempotency

Η επανάληψη προσφέρεται εάν υπάρχει πιθανότητα επιτυχίας (αστοχίες δικτύου, 5xx, όριο ταχύτητας).
Εκθετική εφεδρεία 1-2-4-8 s, όριο προσπαθειών, κατανοητό κουμπί «Επανάληψη».
Κρίσιμες συναλλαγές (επιτόκια/πληρωμές): οι υποχρεωτικές → 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) Offline, timeouts και μερικό περιεχόμενο

Offline: δείχνουμε το πανό «No connection», πρόσβαση στην κρύπτη (μόνο ανάγνωση), σειρά συγχρονισμού.
Timeouts: timeout UI (3-5 δευτερόλεπτα) → κατάσταση αναμονής για επιβεβαίωση... με ασφαλή redo/undo.
Μερική επιτυχία: κρατάμε αυτά που καταφέραμε. σήμανση «μη συγχρονισμένη».

8) Συγκρούσεις και ανταγωνιστικότητα

409/412: παρωχημένα στοιχεία. Προτείνεται «Ενημέρωση» και εμφάνιση του diff (το οποίο έχει αλλάξει).
Κλειδαριές: ενημερώνουμε ποιος κρατάει το μπλοκ, και πόσο καιρό, το κουμπί «Ζητήστε πρόσβαση».

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) Ασφάλεια και ιδιωτικότητα

Δεν εμφανίζουμε ίχνη στοίβας, εσωτερικές ταυτότητες, μονοπάτια βάσεων δεδομένων.
Αποκρύπτουμε ευαίσθητες τιμές (χάρτες, έγγραφα).
Τα μηνύματα δεν πρέπει να προκαλούν επίθεση (για παράδειγμα, υπάρχει λογαριασμός).
Για υποστήριξη - αναγνωριστικός κωδικός συσχέτισης αντί για μέρη.

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

12) Μετρήσεις και έλεγχος

INP και το μερίδιο των μακρών καθηκόντων κατά τη στιγμή του σφάλματος (το σφάλμα δεν πρέπει να «κρεμάσει» τον UI).
Επαναπροσδιορισμός του ποσοστού επιτυχίας, σφάλματα ανά 1000 δράσεις, χρόνος αποκατάστασης.
CTR στο «Help/Chat», ποσοστό των εντύπων μειώθηκε.
Χάρτες θερμότητας: όπου τα σφάλματα πεδίου συμβαίνουν συχνότερα.

13) Κατάλογος ελέγχου QA

Διαθεσιμότητα

• Εστίαση στο πρώτο άκυρο πεδίο. 'aria-designedby '/' aria-avalid' set.
• Κρίσιμα μηνύματα - «ρόλος =» συναγερμός «», αντίθεση ≥ ΑΑ.

Συμπεριφορά

• Τα δεδομένα του εντύπου δεν χάνονται σε περίπτωση σφάλματος.
• Υπάρχει ένα σαφές 'Retry' και ένα σωστό backoff.
• Λειτουργία εκτός σύνδεσης/λειτουργία κρύπτης· πανό δείτε.

Copywriting

• Λόγος δράσης χωρίς τεχνική ορολογία και κατηγορίες.
• Τα κείμενα είναι εντοπισμένα και δεν σπάνε το πλέγμα.

Τίτλος

• Δεν υπάρχουν διαρροές/μυστικά PII. εμφανίζει μόνο ασφαλείς κωδικούς/ταυτότητα.
• Η ευελιξία είναι ενεργοποιημένη για κρίσιμες λειτουργίες.

14) Οι ιδιαιτερότητες του iGaming

• Ο UI καταγράφει αμέσως «απασχολημένος». σε καθυστέρηση> 3 s - «Αναμονή για επιβεβαίωση»....
• Σε περίπτωση αποτυχίας: τίμιο καθεστώς («κλειστό της αγοράς», «ο συντελεστής έχει αλλάξει») + ασφαλές 'Retry'.
• Idempotent κλειδί για την εξάλειψη της διπλής προσφοράς.

• Διαχωρίζουμε την αποτυχία του εξυπηρετητή «bank failure/PSP» έναντι της αποτυχίας του εξυπηρετητή. "Για την πρώτη - "Επιλέξτε μια άλλη μέθοδο", για τη δεύτερη - 'Retry '.
• Διαφανή στάδια KYC/AML. Συνδέει "Γιατί είναι απαραίτητο ».

• Ο τόνος είναι στοργικός, χωρίς πίεση. «Επιτυγχάνεται όριο - παύση ή επικαιροποίηση του ορίου».
• Δεν εκδηλώθηκαν εστίες/νέον· Αντίθεση AAA, διαθεσιμότητα σε SR.

• Εξηγήστε σαφώς τους περιορισμούς και προτείνετε «Διαβάστε τους κανόνες/υποστήριξη».

15) Αντι-μοτίβα

«Κάτι πήγε στραβά» χωρίς δράση και πλαίσιο.
Επαναφορά του εντύπου μετά από σφάλμα.
Απόκρυψη κρίσιμης σημασίας στην πρόποση για 3 δευτερόλεπτα.
Μόνο χρώμα χωρίς κείμενο/εικονίδιο.
Ατελείωτες υποχωρήσεις χωρίς δυνατότητα ακύρωσης.
Εμφάνιση εσωτερικών κωδικών/μονοπατιών στοίβας.

16) Τεκμηρίωση στο σύστημα σχεδιασμού

: 'FieldError', 'FormError', 'Pook Banner', 'AlertDialog', 'HatedBoundary'.
Tone/contrast/timing mokens, a11y presets, και παραδείγματα ARIA.
Χάρτης τυπικών σεναρίων (επικύρωση, δίκτυο, δικαιώματα, πληρωμές) με υποδείγματα κειμένου.
«Do/Don»: real before/after screens with failure/success metrics.

Σύντομη Περίληψη

Να καταστούν τα λάθη κατανοητά και διαχειρίσιμα: να μιλούν την ανθρώπινη γλώσσα, να αποθηκεύουν τα εισαγόμενα δεδομένα, να προσφέρουν ασφαλή επανάληψη και εναλλακτικές λύσεις, να σέβονται την προσβασιμότητα και την ιδιωτικότητα. Στη συνέχεια, ακόμη και καταστάσεις έκτακτης ανάγκης διατηρούν την εμπιστοσύνη και δεν διακόπτουν την πορεία του χρήστη - ιδίως σε κρίσιμα σενάρια στοιχημάτων και πληρωμών.