← 목록으로

에러 처리 분기

다양한 에러 유형과 처리 전략을 시각화합니다

에러 카테고리

💻
클라이언트 에러
입력 검증, 네트워크 오류, 브라우저 문제
🖥️
서버 에러
API 오류, 데이터베이스 문제, 내부 오류
🔌
서드파티 에러
결제 게이트웨이, 외부 API, 통합 서비스
👤
사용자 에러
권한 문제, 인증 실패, 접근 거부
클라이언트 측 검증 플로우
1
입력 검증 실패
폼 필드 유효성 검사 실패 감지
2
인라인 에러 메시지 표시
해당 필드 아래 구체적인 오류 내용 표시
3
필드 포커스
첫 번째 오류 필드로 자동 포커스
4
제출 버튼 활성화
모든 오류 수정 시 제출 가능

HTTP 상태 코드별 처리

400 Bad Request
✓ 에러 상세 정보 파싱
✓ 필드별 에러 표시
✓ 디버깅용 로깅
401 Unauthorized
✓ 토큰 만료 확인
✓ 리프레시 토큰 시도
✓ 실패 시 로그인 리다이렉트
403 Forbidden
✓ 권한 거부 메시지 표시
✓ 업그레이드/관리자 문의 안내
✓ 접근 시도 로깅
404 Not Found
✓ 404 페이지 표시
✓ 대안 콘텐츠 제안
✓ 검색 기능 제공
500 Server Error
✓ 사용자 친화적 메시지
✓ 다시 시도 버튼
✓ 전체 에러 로깅
503 Service Unavailable
✓ 점검 중 안내
✓ 예상 복구 시간
✓ 대체 연락 방법
네트워크 에러 처리
1
연결 오류 감지
네트워크 연결 끊김 또는 타임아웃
2
오프라인 표시 알림
연결 상태 배너 표시
연결 복구 가능?
자동 재시도
• Exponential backoff 적용
• 최대 3회 재시도
• 성공 시 작업 재개
수동 재시도
• 폼 데이터 로컬 저장
• "다시 시도" 버튼 제공
• 연결 복구 대기
복구 전략
🔄
Exponential Backoff으로 재시도
1초 → 2초 → 4초 간격으로 재시도
💾
캐시된 데이터로 대체
이전 데이터를 임시로 표시하고 오류 안내
⬇️
기능 축소 (Graceful Degradation)
핵심 기능은 유지하고 부가 기능 비활성화
📞
고객 지원 연결
문제 해결 불가 시 지원팀 연락 방법 제공
에러 시나리오 시뮬레이터

디자인 프롬프트