✨ [Feature] 에러 전역 처리

[cloud0406]

#️⃣연관된 이슈

ex) #267, #268

📝작업 내용

에러 전역 처리 작업

에러 처리 흐름은 다음과 같습니다.

1. 클라이언트 사이드 에러 처리

ReactQueryProvider (throwOnError: true, 토스트 처리)
  ↓
ErrorHandlingWrapper
  ↓
QueryErrorResetBoundary (React Query 에러 상태 초기화)
  ↓
ErrorBoundary (클라이언트 에러 캐치)
  ↓
ErrorFallback (클라이언트 에러 UI)

2. 서버 사이드 에러 처리

Next.js 서버 컴포넌트 에러
  ↓
error.tsx (각 페이지 레벨)
  ↓
ErrorTemplate (서버 에러 UI 템플릿)

3. 특수한 에러 케이스

• global-error.tsx: 루트 레이아웃 에러 처리
• not-found.tsx: 404 에러 처리

4. 각 컴포넌트 역할:

• 클라이언트 사이드 컴포넌트:

  • ErrorBoundary: React 런타임 에러 캐치
  • ErrorFallback: 클라이언트 에러 UI
  • ErrorHandlingWrapper: React Query와 ErrorBoundary 통합

• 서버 사이드 컴포넌트:

  • error.tsx: Next.js 서버 컴포넌트 에러 처리
  • ErrorTemplate: 서버 에러 UI 템플릿
  • global-error.tsx: 전역 에러 처리
  • not-found.tsx: 404 페이지

5. React Query global callback:

- queryCache: 쿼리 에러 시 토스트 표시
- mutationCache: 뮤테이션 에러 시 토스트 표시
- throwOnError: true로 설정하여 ErrorBoundary로 전파

쿼리조회나 뮤테이션시 기본적으로 토스트 에러를 제공합니다. (단 이는 고정된 메시지이며 만약 이를 커스텀하고 싶을 땐, 기존 저희가 작성하던 코드 방식대로 onError 부분에 토스트 메시지를 작성해주면 해당 부분에서 설정한 토스트 값을 덮어 커스텀할 수 있습니다.)

---

미리보기, 사용방법 및 결과물

클라이언트 사이드 에러

오류가 나는 다른 부분들을 헤치지않고 오류나는 부분만 표시되고 있음

서버 사이드 에러

not found 에러

기타 참고사항

현재 에러 시스템 구현만 해둔 상태라 실제 처리는 각 페이지에서 추가로 진행되어야 합니다.

클라이언트 사이드 에러의 경우 '마이 페이지 - 참여한 모임' 쪽 ClubContents 파일에 예시를 작성해두었습니다.

return (
    <div>
   
     ....

      <div className="pt-[18px]">
        <ErrorHandlingWrapper
          fallbackComponent={ErrorFallback}
          suspenseFallback={<Loading />}
        >
          {renderList(selectedList)}
        </ErrorHandlingWrapper>
      </div>
    </div>
  );

이런식으로 에러바운더리로 감시할 부분을 ErrorHandlingWrapper로 감싸서 사용하면 됩니다!

서버 사이드 에러의 경우는 각 page.tsx 옆에 개별 에러 파일을 생성하면 되는데 ErrorTemplate.tsx 코드를 만들어두었으니 이를 사용하면 페이지별로 쉽게 커스텀하여 사용할 수 있습니다.
예시로 북클럽 생성 페이지 옆에 error.tsx 파일 하나 생성해두었습니다.

'use client';

import ErrorTemplate from '@/components/error/ErrorTemplate';

export default function BookClubCreateError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <ErrorTemplate
      error={error}
      reset={reset}
      title="북클럽 생성 오류"
      message="북클럽 생성 페이지 정보를 불러오던 중 에러가 발생했습니다."
    />
  );
}

테스트 코드 에러 사항

+++ 추가로 작업하면서 에러 처리 적용으로 @sunnwave 님이 개발하신 프로필 페이지쪽에서 나던 오류가 걸려서 화면이 제대로 보이지 않게 되어서 path값을 통해 사용자 정보를 받던 hook 파일을 임시로 조금 수정해두었는데 이 때문인지 Info.test.tsx에서 테스트 하나가 걸리게 되는 것 같습니다.
(로컬에서는 통과되는데 빌드시에만 통과를 못하는 것 같습니다)

it('수정하기 모달에서 수정 후 수정하기 버튼 클릭 시 onSubmitEditInfo 함수 호출 확인', async () => {
...
}

리팩토링 하면서 해당 로직이 어떻게 바뀔지 몰라서 우선 통과하지 못한 테스트 코드 부분을 주석처리 해두었는데 리팩토링 이후 다시 테스트해보고 안되면 같이 공유하면 될 것 같습니다!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
bookco	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 20, 2025 6:41am

[wynter24]

수고하셨습니다!