에러 처리 시스템 가이드

📋 목차

🎯 개요

에러 발생 시에 흰 화면이 뜨거나 앱이 멈추는 일이 없도록 프론트엔드 전반에 에러 치리 시스템을 도입했습니다.

주요 기능

• ✅ 컴포넌트에서 발생하는 JavaScript 에러 자동 캐치
• ✅ 서버 에러 감지 후 자동 리다이렉트
• ✅ 사용자 친화적인 에러 페이지 제공
• ✅ 복구 옵션 제공 (다시 시도/이전 페이지/홈)
• ✅ 개발용 테스트 도구 포함

🛠 에러 처리 방식

1. ErrorBoundary(컴포넌트 에러 캐치)

파일 위치 : src/components/common/ErrorBoundary.jsx

렌더링 중 발생한 에러를 감지해서 자동으로 처리합니다.

<ErrorBoundary>
  <Router>{/* 전체 라우팅 */}</Router>
</ErrorBoundary>

캐치하는 에러 유형

• 렌더링 중 에러