हैंडलिंग और UX स्पष्टीकरण में त्रुटि

1) यह क्यों मायने रखता है

एक त्रुटि "लाल पाठ" नहीं है, बल्कि स्क्रिप्ट की निरंतरता है। अच्छी UX त्रुटि:

बताते हैं कि क्या हुआ और आगे क्या करना है,
दर्ज किए गए डेटा को बचाता है और प्रगति के नुकसान को रोकता है,
एक सुरक्षित दोहराव या वैकल्पिक रास्ता देता है,
उपलब्ध रहता है (एसआर/कीबोर्ड) और बहुत अधिक प्रकट नहीं करता है।

2) त्रुटि टाइपोलॉजी (इंटरफ़ेस के लिए)

1. डेटा सत्यापन (4xx क्लाइंट): खाली/अवैध क्षेत्र, प्रारूप, लंबाई, नियम विरोध.

2. व्यावसायिक नियम: सीमा, भू-बाधाएं, केवाईसी/केवाईबी, डुप्लिकेट, अनुपलब्ध स्लॉट।

3. अधिकार/अनुमति: भूमिका, संसाधन तक पहुंच, आयु प्रतिबंध।

4. नेटवर्क/सर्वर: टाइमआउट, ऑफ़ लाइन, 5xx, ओवरलोड, दर सीमा.

5. संघर्ष/स्थिति: 409/412 (डेटा बदल गया), दौड़, ताले।

6. कोई संसाधन नहीं: 404/410, मिटाया/स्थानांतरित.

7. भुगतान और जोखिम: बैंक/पीएसपी द्वारा अस्वीकृति, धोखाधड़ी विरोधी, जिम्मेदार खेल की सीमा।

3) चैनल और प्रदर्शन स्तर

हम संदर्भ के लिए "आयतन" चुनते हैं:

चैनल	क्वांडो	उदाहरण
क्षेत्र में इनलाइन	सत्यापन/संकेत	"न्यूनतम 8 वर्ण"
ब्लॉक/फॉर्म के तहत	चरण त्रुटि	"सहेजने में विफल। फिर से कोशिश करें"
टोस्ट (भूमिका = स्थिति)	गैर अवरोधक घटनाएँ	"त्रुटियों के साथ लोड फ़ाइल, विवरण नीचे"
पृष्ठ पर बैनर	महत्वपूर्ण लेकिन नेविगेशन अवरुद्ध नहीं	"ऑफ़लाइन। कैश किया हुआ डेटा दिखा रहा है"
मोडाल्का (भूमिका = अलर्टडायलॉग)	जोखिम भरे कदमों को अवरुद्ध करना	"सत्र समाप्त हो गया है। फिर से साइन इन करें"
त्रुटि पृष्ठ	404/5xx क्रिटिकल ड्रॉप्स	"पृष्ठ नहीं मिला "/" क्षमा करें, विफलता हमारी तरफ है "

नियम: टोस्ट/होवर में महत्वपूर्ण न छिपाएं। जहां उपयोगकर्ता देख रहा है, वहां एक संदेश है।

4) नकल लेखन त्रुटियाँ

संरचना: कारण - प्रभाव - क्रिया।

स्वर: ईमानदार, तटस्थ, अपराध-मुक्त।

विशिष्टताएँ: एक क्षेत्र/स्थिति निर्दिष्ट करें, कोड और ढेर से बचें।

बटन-एक्शन: "रिपीट", "चेंज कार्ड", "रीसेट फिल्टर", "ओपन चैट"।

संवेदनशील डेटा: दिखाएँ (पैन मास्किंग, व्यक्तिगत विशेषताएँ).

उदाहरण

अच्छा: "भुगतान विफल: बैंक ने लेनदेन को अस्वीकार कर दिया। किसी अन्य विधि का प्रयास करें या बाद में फिर

बुरा: "त्रुटि 500। कुछ गलत हुआ।"

अच्छा: "दैनिक खर्च सीमा तक पहुंच गया है। एक नई सीमा सेट करें या कल कोशिश करें।"

अच्छा: "फ़ाइल बहुत बड़ी है (अधिकतम 25 एमबी)। कृपया कुछ फ़ाइलें संपीड़ित करें या डाउनलोड करें।

5) व्यवहार और फोकस (A11y)

त्रुटि फोकस संदर्भ में प्रदर्शित है: हम फोकस को पहले गलत क्षेत्र में स्थानांतरित करते हैं।

रहने वाले क्षेत्र: जानकारी के लिए 'भूमिका = "स्थिति" (विनम्र), महत्वपूर्ण के लिए' भूमिका = "अलर्ट" (मुखर)।

दृश्यमान ': फोकस-दृश्यमान', कंट्रास्ट ≥ एए, रंग के विकल्प (आइकन/पाठ)।

हम 'आरिया-वर्णन' के माध्यम से संदेश को क्षेत्र में बांधते हैं।

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) रेट्राई, बैकऑफ और आइडेम्पोटेंसी

यदि सफलता की संभावना है तो पुनरावृत्ति की पेशकश की जाती है (नेटवर्क विफलताएं, 5xx, दर सीमा)।

घातीय बैकऑफ 1-2-4-8 एस, प्रयासों की सीमा, समझने योग्य बटन "दोहराएं।"

महत्वपूर्ण लेनदेन (दरें/भुगतान): अनिवार्य आइडेम्पोटेंसी-की - डुप्लिकेट को बाहर करना।

रोलिंग बैक आशावादी अपडेट - स्पष्ट दृश्य रिटर्न + स्पष्टीकरण।

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) ऑफ़ लाइन, टाइमआउट और आंशिक सामग्री

ऑफ़ लाइन: हम "नो कनेक्शन" बैनर दिखाते हैं, कैश (केवल पढ़ ने के लिए) तक पहुंच, सिंक्रनाइज़ेशन कतार।

टाइमआउट: यूआई टाइमआउट (3-5 सेकंड) → स्थिति "पुष्टि के लिए प्रतीक्षा"... सुरक्षित रेडो/पूर्ववत के साथ।

आंशिक सफलता: हम वही रखते हैं जो हम प्रबंधित करते हैं; चिह्नित "सिंक्रनाइज़नहीं"।

8) संघर्ष और प्रतिस्पर्धा

409/412: डेटा पुराना है। "अद्यतन" सुझाएँ और डिफ़दिखाएँ (जो बदल गया है).

ताले: हम सूचित करते हैं कि ब्लॉक कौन रखता है, और कब तक, "अनुरोध पहुंच" बटन।

9) नमूना यूआई टेम्पलेट्स

पृष्ठ बैनर:

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 क्रियाओं में त्रुटि, पुनर्स्थापित करने का समय।

"हेल्प/चैट" पर सीटीआर, फॉर्म का प्रतिशत गिरा।

गर्मी के नक्शे: जहां क्षेत्र-त्रुटियां सबसे अधिक बार होती हैं।

13) क्यूए चेकलिस्ट

उपलब्धता

पहले अवैध क्षेत्र पर ध्यान केंद्रित करें; 'एरिया-डिस्क्रिबेडबी '/' आरिया-अमान्य' सेट।
महत्वपूर्ण संदेश - 'भूमिका = "अलर्ट"; इसके विपरीत ≥ एए।

व्यवहार

फॉर्म डेटा त्रुटि पर खो नहीं है।
एक स्पष्ट 'रेट्री' और एक सही बैकऑफ है।
ऑफ़ लाइन मोड/कैश काम कर रहा है; बैनर देखें।

नकल लेखन

कारण → कार्रवाई; तकनीकी शब्दजाल और आरोपों के बिना।
ग्रंथ स्थानीयकृत हैं और ग्रिड को नहीं तोड़ ते हैं।

सुरक्षा

कोई पीआईआई रिसाव/रहस्य नहीं; केवल सुरक्षित कोड/आईडी दिखाएँ।
महत्वपूर्ण कार्यों के लिए पहचान सक्षम है।

14) iGaming की बारीकियां

दर:

यूआई तुरंत 'व्यस्त' रिकॉर्ड करता है; देरी> 3 s - "पुष्टि की प्रतीक्षा कर रहा है"...।
विफल: ईमानदार स्थिति ("बाजार बंद", "गुणांक बदल गया है") + सुरक्षित 'रेट्री'।
दोहरी बोली को खत्म करने के लिए पहचान कुंजी।

भुगतान/निकासी:

हम "बैंक विफलता/पीएसपी" बनाम "सर्वर विफलता के बीच अंतर करते हैं। "पहले के लिए - "दूसरी विधि चुनें", दूसरे के लिए - 'पुनरावृत्ति '।
पारदर्शी केवाईसी/एएमएल कदम; लिंक "यह क्यों आवश्यक है? ».

जिम्मेदार खेल और सीमाएं:

टोन देखभाल कर रहा है, कोई दबाव नहीं है। "सीमा तक पहुंच - सीमा को रोकें या अद्यतन करें।"
कोई प्रकोप/नीयन नहीं; एएए विपरीत, एसआर पर उपलब्धता।

जियो/लाइसेंस:

स्पष्ट रूप से प्रतिबंधों की व्याख्या करें और सुझाव दें "नियम/समर्थन पढ़

15) एंटी-पैटर्न

कार्रवाई और संदर्भ के बिना "कुछ गलत हुआ"।

एक त्रुटि के बाद फ़ॉर्म रीसेट करता है।

टोस्ट में 3 सेकंड के लिए महत्वपूर्ण छुपाएँ।

पाठ/प्रतीक के बिना सिर्फ रंग।

रद्द होने की संभावना के बिना अंतहीन रिट्रीट।

आंतरिक कोड/स्टैक ट्रेल्स दिखाएँ।

16) डिजाइन प्रणाली में प्रलेखन

: 'फील्डएरर', 'फॉर्मएरर', 'पेजबैनर', 'एलर्टडायलॉग', ' सीमा'।

टोन/कंट्रास्ट/टाइमिंग टोकन, a11y प्रीसेट और ARIA उदाहरण।

टेक्स्ट टेम्पलेट के साथ ठेठ परिदृश्यों (सत्यापन, नेटवर्क, अधिकार, भुगतान) का नक्शा।

"डू/डोंट": असफलता/सफलता मेट्रिक्स के साथ स्क्रीन से पहले/बाद में वास्तविक।

संक्षिप्त सारांश

गलतियों को समझने योग्य और प्रबंधनीय बनाएं: मानव भाषा बोलें, दर्ज किए गए डेटा को बचाएं, सुरक्षित पुनरावृत्ति और विकल्प प्रदान करें, सम्मान पहुंच और गोपनीयता। फिर भी आपातकालीन स्थितियां आत्मविश्वास बनाए रखती हैं और उपयोगकर्ता के रास्ते को बाधित नहीं करती हैं - विशेष रूप से दांव और भुगतान के महत्वपूर्ण परिदृश्यों में।

हैंडलिंग और UX स्पष्टीकरण में त्रुटि

उदाहरण

व्यवहार

नकल लेखन

सुरक्षा

संक्षिप्त सारांश

हमसे संपर्क करें

त्वरित संपर्क

वीडियो जल्द ही अपडेट किया जाएगा

हम इस समय परियोजनाओं में बहुत व्यस्त हैं