React 하얀화면 처리방법?

Question

react로 모바일 웹 페이지를 개발 중에 있습니다.api 통신 도중에 서버가 내려가 있거나, 또는 API 통신은 정상적으로 이루어졌지만, API response 데이터를 가공중에 에러가 발생하는 경우 하얀화면만 뜨는 경우가 있습니다. 어떠한 경우에도 하얀화면만 뜨는 것이 아니라, 에러페이지로 이동하게끔 처리하려면 어떻게 해야하나요?** 추가 소스 코드입니다.const BASE_URL &#61; 'http://localhost:3000' const httpConfig &#61; { baseURL: BASE_URL, timeout: 30000, ... }; const createRequest &#61; config &#61;> { return axios.create(merge({}, httpConfig, config)); }; const axiosCommon &#61; ({url, method &#61; 'get', params, config, axiosInstance}) &#61;> { const token&#61; localStorage.getItem('token'); const headers &#61; { ... }; axiosInstance &#61; axiosInstance || createRequest(!isEmpty(config) ? config : {headers: headers}); axiosInstance.interceptors.request.use(async (request) &#61;> { const _token &#61; localStorage.getItem('token'); // Check the token valid ... return request; }, error &#61;> { return Promise.reject(error); }); axiosInstance.interceptors.response.use( response &#61;> { return response; }, err &#61;> { const error &#61; err && err.response; return Promise.reject(err); }, ); }; export default axiosCommon; export const useUserDetailQuery &#61; ({memId}) &#61;> { const { e } &#61; useError(); return useQuery({ enabled: !!memId, queryFn: () &#61;> axiosCommon({ url: 'http://localhost:8080/userDetail', method: 'post', params: { memId: memId }, }).then(result &#61;> { if (result.status &#61;&#61;&#61; 200) { // success } else { // fail } }), throwOnError: e, }); };

더미 · Answer

사실상 불가능합니다

팩트폭행범 · Answer

에러서버 따로 있는거 아니면 할 수 있는게 없죠보통 큰 회사는 에러서버로 에러 홈페이지 보여주는거 따로 있음

세브라이드 · Answer

두 경우 모두 ErrorBoundary 만들어서 처리하면 됩니다.

among · Answer

웹 서버에서 처리 가능합니다. ex) Nginx Error Pages

샵D · Answer

리액트와 리액트 생태계에 대한 이해 없이 막 답변을 던지시는 분이 많으시네요. https://github.com/bvaughn/react-error-boundary 이거 쓰면 되는거고, 쓸 수 있으시다면 app router 쓰시는걸 추천합니다. 앱 라우터 넥스트는 에러 핸들링이 기본적으로 내장되어 있습니다. 리액트도 Next.js 쓰는 것을 우선 권장합니다.

풍월상신(가니메디안) · Answer

React.Suspense 를 사용하면, 'loading state' 에 대해 fallback 컴포넌트를 지정해줄 수 있습니다.React-Router 의 loader 를 사용중이라면, useNavigation 훅의 리턴 상태를 참조해서, 컴포넌트를 출력 또는 로딩 컴포넌트로 분기해줄 수 있습니다.컴포넌트 내부에서 react-query 등 의 fetch 상태관리 라이브러리의 내부 state 를 사용해서 출력을 분기하는 방법도 있습니다.ErrorBoundary 와 fallback 은 그 역할이 다릅니다. 글쓴님의 문제는, 로직에서 fallback 처리가 빠져서 화면에 출력될 내용에 공백이 발생하는 것 같습니다. 네트워크 문제는 공백 이후에 발생하는 문제이겠죠. 윗 분이 지적하신 대로, react-query 의 옵션에서 retry: false 를 주면 일단 ErrorBoundary 로 지체 없이 에러가 전파되면서 화이트 스크린은 사라질 것 같습니다.1. 만일, 단일 컴포넌트 내에서 react-query 로 비동기 fetch 처리를 하는 설계라면, react-query 의 내부 state 인 isPending 상태를 참조해서, 컴포넌트 내부에서 isPending 상태에 따라 출력을 분기하는 방법을 사용할 수 있겠고, const { isPending } = useQuery(....) ... { isPending ? : }2. 비동기 컴포넌트에 fallback 을 지정해주는 방식으로 isPending 상태를 참조해서 분기하는 방식이라면, 비동기 Suspense 처리로 바꿔주는 방법도 있습니다. }> react-query 를 사용하는 컴포넌트의 useQuery 를 useSuspenseQuery 로 바꿔주면, 일반 컴포넌트를 비동기 컴포넌트로 사용할 수 있습니다. 제 기술 블로그에 해당 내용을 다룬 글이 있습니다. https://until.blog/@ganymedian/-6--suspense-and-next참고하시고, 도움이 되길 바랍니다.

React 하얀화면 처리방법?

6개의 답변

#error 목록