78. 에러 처리 분기

💻

클라이언트 에러

입력 검증, 네트워크 오류, 브라우저 문제

🖥️

서버 에러

API 오류, 데이터베이스 문제, 내부 오류

🔌

서드파티 에러

결제 게이트웨이, 외부 API, 통합 서비스

👤

사용자 에러

권한 문제, 인증 실패, 접근 거부

클라이언트 측 검증 플로우

입력 검증 실패

폼 필드 유효성 검사 실패 감지

인라인 에러 메시지 표시

해당 필드 아래 구체적인 오류 내용 표시

필드 포커스

첫 번째 오류 필드로 자동 포커스

제출 버튼 활성화

모든 오류 수정 시 제출 가능

HTTP 상태 코드별 처리

400 Bad Request

✓ 에러 상세 정보 파싱
✓ 필드별 에러 표시
✓ 디버깅용 로깅

401 Unauthorized

✓ 토큰 만료 확인
✓ 리프레시 토큰 시도
✓ 실패 시 로그인 리다이렉트

403 Forbidden

✓ 권한 거부 메시지 표시
✓ 업그레이드/관리자 문의 안내
✓ 접근 시도 로깅

404 Not Found

✓ 404 페이지 표시
✓ 대안 콘텐츠 제안
✓ 검색 기능 제공

500 Server Error

✓ 사용자 친화적 메시지
✓ 다시 시도 버튼
✓ 전체 에러 로깅

503 Service Unavailable

✓ 점검 중 안내
✓ 예상 복구 시간
✓ 대체 연락 방법

네트워크 에러 처리

연결 오류 감지

네트워크 연결 끊김 또는 타임아웃

오프라인 표시 알림

연결 상태 배너 표시

연결 복구 가능?

✅ 자동 재시도

• Exponential backoff 적용
• 최대 3회 재시도
• 성공 시 작업 재개

❌ 수동 재시도

• 폼 데이터 로컬 저장
• "다시 시도" 버튼 제공
• 연결 복구 대기

복구 전략

🔄

Exponential Backoff으로 재시도
1초 → 2초 → 4초 간격으로 재시도

💾

캐시된 데이터로 대체
이전 데이터를 임시로 표시하고 오류 안내

⬇️

기능 축소 (Graceful Degradation)
핵심 기능은 유지하고 부가 기능 비활성화

📞

고객 지원 연결
문제 해결 불가 시 지원팀 연락 방법 제공

에러 처리 분기

에러 카테고리

HTTP 상태 코드별 처리

디자인 프롬프트