api 호출 등에 대한 에러 로직 보완 및 추가

[j2h30728]

Feature

api 호출에 대한 에러 로직 추가

Description

현재, api 호출 로직은 구현 되어있으나 에러 처리 로직이 명확하게 구현되어있지 않다. api 호출 및 ui에러 에 대한 에러 처리 로직을 보완 및 추가한다.

To do list

• [x] api 호출 에러 로직 추가
• [x] ui 에러 로직 추가

추가 컨텍스트

[j2h30728]

필수로 에러바운더리 추가가 필요한 세팅 페이지의 에러 로그

[j2h30728]

실제 구현사항

1. 기본 에러바운더리 생성
2. 사용하고 있는 axios 라이브러리의 interceptor를 사용하여 응답에러 핸들링, Api Errror를 커스텀으로 생성하여 throw
3. 기본 에러바운더리를 확장시켜 API 에러 바운더리 생성, 커스텀 에러인 Api Error 캐치하도록함
4. react-query 의 QueryErrorResetBoundary와 API 에러 바운더리를 결합하여 사용

레퍼런스

• https://github.com/bvaughn/react-error-boundary
• https://yiyb-blog.vercel.app/posts/error-boundary-with-react-query
• https://tanstack.com/query/v4/docs/framework/react/reference/QueryErrorResetBoundary

[j2h30728]

고려사항

서스펜스를 사용하여 데이터 페칭상태를 나타내고 있기 때문에 각 서스펜스마다 에러 바운더리를 설정할지, 앱의 전체적으로 에러바운더리를 설정할 지 고려.

1차안	2차안(결정)

결정

에러 폴백을 보여주지만 앱의 다른 동작들이 정상적으로 진행하는 것이 일관성이 떨어지며, 사용자에게 혼란을 야기하기 하는 것으로 판단. 2차안으로 앱의 전체화면으로 에러폴백을 보여준다.