COWERKER의 에러 핸들링 부분을 리펙토링 진행하였다!
우선 프론트에서 처리하는 에러핸들링을 살펴보면
프론트에서의 에러 핸들링
- JS의 try/catch문
- react-query의 onError옵션 (API에 관한 에러 처리)
- axios 설정 (API에 관한 에러 처리)
- Error boundary ( 클라이언트 쪽의 컴포넌트의 렌더링 문제가 발생했을 때 보여줄 컴포넌트 정의 및 경계 )
- next.js 에서 제공되는 에러핸들링 (404, 500, error 페이지)
1. 에러 관심사의 분리
앞서 정리한 에러처리들을 모두 사용한다면 중복된 에러처리를 하거나, 유지보수가 어려워질 수도 있다. (axios와 react-query, next의 error page등은 중복으로 에러핸들링을 하고 있을 수도 있음.)
어떤 에러를 기준으로 어떻게 에러처리를 할 것인지 기준을 새워야 코드가 보기 깔끔해지고 추후 유지보수가 쉬워질 것이다.
- Router 에러 - 페이지를 진입할 때 생기는 에러를 핸들링
- 지정되지 않은 경로로 들어가는 경우 : Next 제공 404페이지를 활용
- 페이지 내부 에러 (API)
- 사용자 상호작용 (useMutation) → useQuery의 onError옵션에 Toast 메세지
- 데이터 표현 (useQuery) → Fallback UI ( 대체 UI ) → ???
현재 프로젝트에서 useQuery(HTTP get요청)에서 발생되는 클라이언트 에러핸들링은 각각의 페이지마다 useQuery의 isError옵션으로 상태 정보를 검사해서 다른 컴포넌트를 폴백해주거나, 아예 에러 처리가 되어있지 않는 페이지들이 많았다.
그래서 각각의 페이지에서 에러 핸들링을 따로 해주지 않아도 되면서, 에러 바운더리를 사용할 것이다!
2. 에러 바운더리란?
리액트16에서 나온 개념으로 js에러를 기록하여 깨진 컴포넌트 대신 폴백 UI를 보여주는 리액트 컴포넌트다. ( 이벤트 핸들러, 비동기적 코드, 서버 사이드 렌더링 에러는 처리하지 않는다 )
getDerivedStateFromError()와 componentDidCatch()를 정의한 클래스형 컴포넌트를 만들어야 한며,
getDerivedStateFromError()를 사용해서 fallback component를 보여주고, componentDidCatch()를 사용해서 에러 내용을 기록하는 형태로 사용하면 된다.
하지만 react-error-boundary 라이브러리로 함수형 컴포넌트방식으로 에러바운더리를 사용할 수 있기 때문에 라이브러리를 이용하여 함수형 컴포넌트 방식으로 구현할 예정이다.
3. Next.js의 error 페이지?
현재 우리프로젝트는 Next.js 14버전, React Query v5를 사용하고 있다.
에러 바운더리를 적용하려고 알아보던 중 Next 13에서 제공하는 page.js, layout.js, error.js와 같은 파일들이 특수한 역할과 동작을 수행하게 된다.
위 이미지에서는 fallback에 Error(error.js) 컴포넌트를 배치한 것처럼 동작한다는 것을 보여주는 것 같다.
error.js 파일을 생성하고 ErrorBoundary 컴포넌트로 래핑 하면 동작하는 게 아닌 error.js 파일만 생성해도 계층에 맞게 간편히 자동으로 fallback이 동작한다는 것을 알 수 있다!
즉, error.js 파일에 작성하기만 하면 자동으로 에러 바운더리로 래핑되어, 중첩된 라우트에서도 효과적인 에러 핸들링이 가능하다.
하지만 내용과 다르게 실제로 error.js 파일에 처리를해도 먹히지를 않았다... 한참을 해매다가
공식문서를 다시 읽어보니 app라우터 단락에만 error.js 파일의 설명은 있었지만
페이지 라우터에선 404와 500페이지를 제외한 error.js 관련 내용은 존재하지 않았다…
즉, Next 버전 13 이상이라도 페이지 라우터는 error.js 파일을 사용할 수 없는거 같다.
“ Next 13이상 부터 error페이지를 사용하여 에러 핸들리을 할 수 있다! “ 라는 내용에 너무 치중되었고, 사용할 수 없는 이유가 이 부분때문일 것이라고 전혀 예상하지 못해서 삽질만 했던 것 같다…
그래서 결국 에러바운더리를 통한 에러핸들링을 진행할 예정이다.
관련 내용은 다음 포스트에 !
COWERKERS 에러 바운더리 (tistory.com)
'프로젝트 > COWERKERS' 카테고리의 다른 글
| COWERKERS 에러 바운더리 (1) | 2024.12.13 |
|---|---|
| 버추얼 스크롤 이슈 (0) | 2024.11.04 |