15-2 [FE] [에러 처리] 에러 상태코드 별 처리 (재요청, 에러페이지 등) #81
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…nto feature/error-handling
…nto feature/error-handling
leesungbin
approved these changes
Nov 30, 2022
Comment on lines
+18
to
+25
| static getDerivedStateFromError(error: Error) { | ||
| return { error }; | ||
| } | ||
|
|
||
| componentDidCatch(error: Error, errorInfo: ErrorInfo): void { | ||
| console.log('error: ', error); | ||
| console.log('errorInfo: ', errorInfo); | ||
| } |
There was a problem hiding this comment.
React에서 얼른 hook을 추가해줬으면 좋겠네요.
https://www.elastic.co/guide/en/elasticsearch/reference/current/sort-search-results.html
There was a problem hiding this comment.
ErrorBoundary가 Class component의 lifecycle을 사용하다보니.. 아직 hook이 없나봅니다. 🥲
(혹시 elastic 주소는 어떤걸까요?)
There was a problem hiding this comment.
| <Route path={'*'} element={<GlobalErrorFallback />} /> | ||
| </Routes> | ||
| </Suspense> | ||
| </ErrorBoundary> |
JunYupK
approved these changes
Dec 1, 2022
| @@ -17,26 +22,38 @@ const queryClient = new QueryClient({ | |||
| refetchOnMount: false, | |||
| refetchOnReconnect: false, | |||
| staleTime: 5 * 60 * 1000, | |||
| retry: (failureCount, error) => { | |||
| if (error instanceof AxiosError) { | |||
| return error.response?.status === 408 && failureCount <= 1 ? true : false; | |||
There was a problem hiding this comment.
failureCount 까지 체크하는 부분이 좋네요
# for free
to join this conversation on GitHub.
Already have an account?
# to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
개요
데이터를 불러와서 사용하는 컴포넌트를 Suspense와 ErrorBoundary로 감싸서 데이터 로딩이나 에러 발생 시 각각 로딩 컴포넌트와 에러 페이지를 보여주도록 했습니다.
react-query의 retry 기능을 이용해서 408(timeout) 에러 발생 시에는 3번 재요청 후 에러 페이지를 보여주고, 그 외의 에러는 재요청 없이 에러 페이지를 바로 보여주도록 설정했습니다.
컴포넌트에서 로딩, 에러 처리 로직을 분리함으로써 데이터를 불러오는 컴포넌트는 데이터를 불러오고 사용하는 데에만 집중할 수 있게 되었습니다.
추후 리팩토링을 통해 데이터를 불러오는 query 로직도 분리 예정입니다.
스크린샷
에러 페이지는 상태코드와 홈 이동 버튼을 보여주도록 간단하게 구성하였습니다.
작업사항
리뷰 요청사항