Closed j2h30728 closed 2 months ago
Closes #82
에러바운더리를 사용하되 많은 기능을 사용하지않기때문에 라이브러리는 사용하지않는다. react-error-boundary라이브러리 코드를 참고하여 필요한 부분만 가져온다.
에러바운더리는 두 가지 종류의 에러바운더리를 생성한다.
custom error 인 ApiError 을 생성하고, axios intercepter 을 사용하여 공통으로 응답에 대한 에러핸들링을 처리한다. axios interceptor을 통해 axios에러일 경우에는 ApiError로 에러를 던진다.
QueryErrorResetBoundary와 Api 에러 바운더리를 결합하여 ErrorResetBoundaryWrapper생성한다. 각각의 서스펜스경계에 해당 에러바운더리를 씌워주는 것이 아닌, 페이지 당 에러바운더리를 감싸는 것으로 한다.
에러 폴백을 보여주지만 앱의 다른 동작들이 정상적으로 진행하는 것이 사용자에게 혼란을 야기하기 하는 것으로 판단하였다. 일관성이 유지하기 위해서 router의 상단에서 api 에러바운더리를 감싸서 전체화면으로 에러 폴백을 보여주도록한다.
기본 에러 폴백과 동일하며, 추후에 에러폴백에 대한 디자인은 변경될 수 있다.
관련 문서
Closes #82
변경사항:
에러바운더리 생성
에러바운더리를 사용하되 많은 기능을 사용하지않기때문에 라이브러리는 사용하지않는다. react-error-boundary라이브러리 코드를 참고하여 필요한 부분만 가져온다.
에러바운더리는 두 가지 종류의 에러바운더리를 생성한다.
axios 라이브러리의 interceptor를 사용하여 응답에러 핸들링
custom error 인 ApiError 을 생성하고, axios intercepter 을 사용하여 공통으로 응답에 대한 에러핸들링을 처리한다. axios interceptor을 통해 axios에러일 경우에는 ApiError로 에러를 던진다.
tanstack-query 의 QueryErrorResetBoundary와 API 에러 바운더리를 결합
QueryErrorResetBoundary와 Api 에러 바운더리를 결합하여 ErrorResetBoundaryWrapper생성한다. 각각의 서스펜스경계에 해당 에러바운더리를 씌워주는 것이 아닌, 페이지 당 에러바운더리를 감싸는 것으로 한다.
에러 폴백을 보여주지만 앱의 다른 동작들이 정상적으로 진행하는 것이 사용자에게 혼란을 야기하기 하는 것으로 판단하였다. 일관성이 유지하기 위해서 router의 상단에서 api 에러바운더리를 감싸서 전체화면으로 에러 폴백을 보여주도록한다.
확인할 목록:
api 에러 폴백
기본 에러 폴백과 동일하며, 추후에 에러폴백에 대한 디자인은 변경될 수 있다.
레퍼런스: