#error-boundary

리액트 쿼리 에러 핸들링 이슈

react query를 활용한 에러 핸들링이 안돼서 질문 올립니다... //mainpage.tsx const { data, refetch, isFetching } = FetchData(url); const handleSearch = () => { refetch(); } <QueryErrorResetBoundary> {({ reset }) => ( <ErrorBoundary onReset={reset} FallbackComponent={FallbackUI}> {resultVisible ? ( <Result searchData={searchData} isFetching={isFetching} /> ) : ( <EmptyResult /> )} </ErrorBoundary> )} </QueryErrorResetBoundary> react-error-boundary 라이브러리를 이용해 ErrorBoundary 컴포넌트를 가져왔습니다. ErrorBoundary 하위 컴포넌트 내에서 에러가 발생하면 FallbackComponent의 FallbackUI 컴포넌트가 렌더링 되도록 했습니다. //FallbackUI 컴포넌트 //에러가 발생히면 이 컴포넌트가 렌더링되어야합니다. const FallbackUI = ({ error, resetErrorBoundary }) => { return ( <div> <span>{error.message}...</span> <button onclick={resetErrorBoundary} /> 돌아가기 버튼 </div> ); }; export default FallbackUI; FallbackUI 에서 QueryErrorResetBoundary 에서 제공하는 resetErrorBoundary를 받아와 에러 발생 후 '돌아가기 버튼'을 클릭하면 쿼리오류를 처리하고 리셋해주도록 구현했습니다. //url을 파라미터값으로 받아와 api호출하는 함수 //위에 있는 mainpage.tsx 에서 사용하는 함수입니다. const FetchData = (url: string) => { const { error, data, refetch, isFetching } = useQuery({ queryKey: ["repoData"], queryFn: async () => { const res = await axios.get(url); console.log(res.data); return res.data; }, refetchOnWindowFocus: false, enabled: false, }); return { error, data, refetch, isFetching }; }; 리액트 쿼리를 이용해 api를 호출하는 함수입니다. //main.tsx const queryClient = new QueryClient({ defaultOptions: { queries: { retry: 0, throwOnError: true, }, }, }); ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <BrowserRouter> <GlobalStyles /> <Provider store={store}> <App /> </Provider> </BrowserRouter> </QueryClientProvider> </React.StrictMode> ); 마지막으로 전역으로 에러 관리를 하도록 세팅해놨습니다. 그리고 QueryClient에 throwOnError 속성이 있어야 에러를 ErrorBoundary로 전달할 수 있다해서 추가해줬습니다. 이렇게 세팅해놨는데 에러발생하면 그냥 하얀색 화면만 나오고 fallbackUI가 나오지 않습니다... 원인이 뭘까요...ㅠㅠㅠ 혹시 몰라서 콘솔 에러코드도 올립니다.. 추가로 궁금한 점 1. useQuery 에서 반환하는 객체중 error 객체는 어떤 존재인지 궁금합니다. 2. useQuery 속성과 QueryClient 속성 모두 throwOnError : true 를 가지고 있던데 어떤 차이점인지 궁금합니다. 답변주시면 정말 감사하겠습니다!!!

useSuspenseQuery 와 ErrorBoundary 궁금증입니다!

ReactQuery v5 와 ErrorBoundary를 공부하고 있습니다. 학습 과정에서 궁금한 점이 있는데용 Query 데이터를 가져올 때, 네트워크 오류 발생 시 오류 오버레이 UI가 렌더링되면서 uncaught errors 라고 메세지가 나오네요. 그러나 ErrorBoundary의 fallback UI는 렌더링이 제대로 됩니다. uncaught errors라면 ErrorBoundary에서 에러를 캐치하지 못한 걸까요? 그러기엔 fallback UI가 렌더링되니 오류를 잡은건가 헷갈립니다. 혹은 개발 환경에서는 오류 오버레이 UI가 렌더링되는 것이 정상적인건가요? 열심히 찾아봤는데 잘 나오지 않는 것같아 질문드립니다...!

프론트 경력 기술 면접 궁금한 것이 있습니다.

안녕하세요 주니어 프론트엔드 개발자 입니다. 1. 기술면접에서 어떤 프로젝트의 기술적인 부분을 설명해달라고 했을 때 아래와 같이 기본적인 내용도 말할만 한가요? - 리액트의 Suspense 와 Error Boundary 를 사용하여 선언적으로 Data Fetching 을 처리함 Error fallback 에는 refetch 가능한 로직도 포함하여 재시도 할 수 있게끔 함. 2. 제가 도입하지 않은 라이브러리에 대해 도입 이유를 물어본다면 제가 생각한 도입 이유를 말해도 될까요? - 제가 도입했다고 말하지도 않았는데 이런 질문을 종종 받습니다. 기록이 따로 없었기 때문에 회사에서 그 라이브러리를 도입한 이유는 알 수는 없습니다. - 이야기할 때 진짜 이유는 모르지만 저라면 ~해서 도입했을 것 같습니다. 처럼 이야기 하는 편입니다.

react에서 에러는 어떤 영역에서 처리해야하나요?

안녕하세요 React를 사용하고 있는 2년차 프론트엔드 개발자입니다. 기초적인 질문일 수 있지만 에러 처리 관련 조언을 얻고 싶습니다. 에러를 처리할 때 api 요청이면 요청하는 부분에 try, catch 또는 react-query를 사용하면 onError 처리를 해주고 있는데요. 이렇게 에러 처리하는게 맞을지 전역에서 에러를 캐치하는 ErrorBoundary 를 만들어서 한번에 처리하는 방식이 맞는지 궁금합니다. 다들 현업에서는 어떤 영역에서 에러를 처리하고 있으신가요? 소중한 답변 미리 감사드립니다