Error 에러 처리 컴포넌트별 역할 정리

[sgoldenbird]

1. GlobalErrorBoundary

• 라우터에서 처리되지 않은 예외나 예상치 못한 전역 에러를 처리.
• 루트 라우트(/)의 errorElement로 지정.
• 앱 전체가 멈출 때 fallback UI를 보여주는 마지막 수단.

---

2. ApiErrorBoundary

• 각 라우트의 loader 또는 action에서 발생하는 API 에러 처리. loader/action 안에서 발생한 HTTP 응답 오류 처리 (401, 403, 404, 500 등)
• 페이지 단위에서 errorElement로 지정.
• 예: 401, 404, 500 등 상태코드에 따라 다른 메시지와 재시도 버튼 제공.

---

3. RenderErrorBoundary

• 컴포넌트 렌더링 중 발생하는 런타임 에러(UI 오류)를 처리.
• 클래스 컴포넌트 또는 react-error-boundary를 사용.
• 전체 앱 중단 없이, 해당 영역만 fallback UI로 대체 가능.

---

4. try...catch

• fetch, JSON.parse, 계산 등 명령형 코드에서 발생한 에러 제어.
• JSX 내부에서 발생하는 렌더링 에러는 잡지 못함.
• 주로 useEffect, loader, action 내 비동기 작업에 사용.

---

실제 흐름 예시

export async function loader() {
  try {
    const res = await fetch("/api/items");

   // HTTP 응답이 실패한 경우를 명시 처리. HTTP 응답이 실패(예: 404, 500)해도 catch에는 안 걸림. fetch()는 응답이 오기만 하면 "성공"으로 간주.
    if (!res.ok) {
      throw new Response("API Error", { status: 500 });
    }
    return await res.json();

  } catch (err) {
   // 여기서는 fetch 자체가 실패하거나 네트워크가 끊기는 등 예외 상황 처리 
    console.error("에러 발생:", err);
    throw new Response("Internal Error", { status: 500 });
  }

• throw된 에러는 React Router가 감지해서 errorElement로 넘겨줍니다. ➡️ ApiErrorBoundary는 UI fallback을 담당
• 만약 ApiErrorBoundary가 없다면 fallback UI가 없어서 사용자는 흰 화면을 보거나 앱이 깨짐.
  이 경우 에러 메시지를 직접 loader 안에서 return <div>에러입니다</div> 이런 식으로 처리해야 하는데,
  이건 라우터 흐름에도 어긋나고 비효율적

---

요약 정리

도구	역할	사용 위치
GlobalErrorBoundary	전역 에러 fallback	루트 라우트 (/)
ApiErrorBoundary	API 요청 실패 처리	각 페이지 라우트
RenderErrorBoundary	UI 렌더링 오류 처리	컴포넌트 내부
try...catch	명령형 코드 오류 제어	async/await, useEffect 등