오류 처리 및 UX 설명

1) 왜 중요한가

• 다음에 무슨 일이 있었는지 어떻게해야하는지 설
• 입력된 데이터를 저장하고 진행 상황을 예방합니다
• 안전한 반복 또는 대체 경로를 제공합니다
• 사용 가능한 상태 (SR/키보드) 이며 너무 많이 드러나지 않습니다.

2) 오류 유형학 (인터페이스 용)

1. 데이터 유효성 검사 (4xx 클라이언트): 빈/유효하지 않은 필드, 형식, 길이, 규칙 충돌.
2. 비즈니스 규칙: 한계, 지리 제약, KYC/KYB, 중복, 사용할 수없는 슬롯.
3. 권한/권한: 역할, 리소스에 대한 액세스, 연령 제한.
4. 네트워크/서버: 타임 아웃, 오프라인, 5xx, 과부하, 속도 제한.
5. 충돌/상태: 409/412 (데이터 변경), 레이스, 잠금 장치.
6. 자원 없음: 404/410, 삭제/전송.
7. 지불 및 위험: 은행/PSP에 의한 거부, 사기 방지, 책임있는 플레이 제한.

3) 채널 및 디스플레이 레벨

컨텍스트에 대한 "볼륨" 을 선택합니다

규칙: 토스트/호버에 중요한 것을 숨기지 마십시오. 사용자가보고있는 곳에 메시지가 있습니다.

4) 카피 라이팅 오류

구조: → 효과 → 동작을 유발합니다.
톤: 정직하고 중립적이며 죄책감이 없습니다.
세부 사항: 필드/조건을 지정하고 코드와 스택을 피하십시오.
단추 동작: "반복", "카드 변경", "재설정 필터", "열린 채팅".
민감한 데이터: 표시하지 않음 (PAN 마스킹, 개인 속성).

예

Good: "지불이 실패했습니다. 은행은 거래를 거절했습니다. 다른 방법을 시도하거나 나중에 다시 시도하

나쁜 소식: "오류 500. 뭔가 잘못되었습니다. "

좋은 점: "일일 지출 한도에 도달했습니다. 새로운 한도를 설정하거나 내일 시도하십시오. "

좋습니다: "파일이 너무 큽니다 (최대 25MB). 일부 파일을 압축하거나 다운로드하십시오

5) 행동과 초점 (A11y)

초점 컨텍스트에 오류가 표시됩니다. 초점을 첫 번째 잘못된 필드로 전송합니다.
살아있는 지역: 정보의 경우 'role = "State"' (polite), 중요한 경우 'role = "arment"' (독단적).
보이는 ': 초점을 볼 수있는', 대비는 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, 백오프 및 demmpotency

성공 가능성이있는 경우 반복이 제공됩니다 (네트워크 장애, 5xx, 속도 제한).
지수 백오프 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) 오프라인, 타임 아웃 및 부분 콘텐츠

오프라인: "연결 없음" 배너, 캐시 액세스 (읽기 전용), 동기화 대기열을 표시합니다.
타임 아웃: UI 타임 아웃 (3-5 초) → 안전한 재실행/실행 취소 상태 "확인을 기다리는 중"...

부분적인 성공: 우리는 우리가 관리 한 것을 유지합니다. "동기화되지 않음" 표시

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) 보안 및 개인 정보 보호

스택 추적, 내부 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와 긴 작업의 비율 (오류는 UI를 "정지" 해서는 안됨).
성공률, 1000 개당 오류, 복원 시간을 다시 시작합니다.
"도움말/채팅" 의 CTR은 양식의 백분율이 떨어졌습니다.
히트 맵: 필드 오류가 가장 자주 발생하는 곳.

13) QA 체크리스트

가용성

• 첫 번째 유효하지 않은 필드에 집중; 'aria-describedby '/' aria-ununity' 세트.
• 중요한 메시지- '역할 = "경고"'; 대비 AA.

행동

• 오류시 양식 데이터가 손실되지 않습니다.
• 명확한 '재시도' 와 올바른 백오프가 있습니다.
• 오프라인 모드/캐시 작동; 배너를 참조하십시오.

카피 라이팅

• 이유 → 행동; 기술 전문 용어와 고발없이.
• 텍스트는 현지화되어 있으며 그리드를 깨뜨리지 않습니다.

보안

• PII 누출/비밀 없음; 보안 코드/ID 만 표시합니다.
• 중요한 작업을 위해 Idempotency가 활성화되었습니다

14) iGaming의 세부 사항

• UI는 즉시 '바쁜' 기록을합니다. 지연> 3 초- "확인을 기다리는 중"...
• 실패: 정직한 상태 ("시장 폐쇄", "계수가 변경되었습니다") + 안전한 '재시도'.
• 이중 입찰을 제거하는 이념적 열쇠.

• "뱅크 오류/PSP" 와 "서버 오류를 구분합니다. "첫 번째-" 다른 방법 선택 ", 두 번째- '재시도'.
• 투명한 KYC/AML 단계; 링크 "왜 필요합니까? ».

• 어조는 돌보고 압력이 없습니다. "한계에 도달-제한을 일시 중지하거나 업데이트하십시오"
• 발생/네온 없음; AAA 대비, SR에서의 가용성.

• 제한 사항을 명확하게 설명하고 "규칙/지원 읽기" 를 제안하십시오.

15) 반 패턴

행동과 맥락없이 "뭔가 잘못되었습니다".
오류 후 양식을 다시 설정합니다.
토스트에서 3 초 동안 중요한 것을 숨깁니다.
텍스트/아이콘이없는 색상 만.
취소 가능성없이 끝없이 후퇴합니다.

내부 코드/스택 트레일 보이기

16) 설계 시스템의 문서

'FieldError', 'FormError', 'PageBanner', 'AlertDialogue', 'ErrorBoundary'.
톤/콘트라스트/타이밍 토큰, a11y 사전 설정 및 ARIA 예.
텍스트 템플릿이있는 일반적인 시나리오 (검증, 네트워크, 권한, 지불) 지도.
"Do/Do n 't": 실패/성공 지표가있는 실제 전후 화면.

간략한 요약

실수를 이해하고 관리 할 수있게하십시오: 인간 언어 말하기, 입력 된 데이터 저장, 안전한 반복 및 대안 제공, 접근성 및 개인 정보 보호 존중. 그런 다음 긴급 상황조차도 자신감을 유지하고 특히 베팅 및 지불의 중요한 시나리오에서 사용자의 경로를 방해하지 않습니다.