[FE] react-query에 맞는 error handling 적용

client/jest.config.ts

@@ -19,6 +19,8 @@ const config: Config = {
     '<rootDir>/src/errors/',
     '<rootDir>/src/components/',
     '<rootDir>/src/store/',
+    '<rootDir>/src/pages/',
+    '<rootDir>/src/hooks/queries',
   ],
 
   verbose: true,
@@ -29,6 +31,7 @@ const config: Config = {
     '@/(.*)$': '<rootDir>/src/$1', // path alias를 적용하기 위함
     '^@apis/(.*)$': '<rootDir>/src/apis/$1',
     '^@constants/(.*)$': '<rootDir>/src/constants/$1',
+    '^@components/(.*)$': '<rootDir>/src/components/$1',
     '^@hooks/(.*)$': '<rootDir>/src/hooks/$1',
     '^@utils/(.*)$': '<rootDir>/src/utils/$1',
     '^@pages/(.*)$': '<rootDir>/src/pages/$1',

client/src/App.tsx

@@ -1,30 +1,27 @@
 import {Outlet} from 'react-router-dom';
 import {HDesignProvider} from 'haengdong-design';
 import {Global} from '@emotion/react';
-import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 
 import {ToastProvider} from '@hooks/useToast/ToastProvider';
-import {ErrorProvider} from '@hooks/useError/ErrorProvider';
+import QueryClientBoundary from '@components/QueryClientBoundary/QueryClientBoundary';
+import ErrorCatcher from '@components/AppErrorBoundary/ErrorCatcher';
 
+import UnhandledErrorBoundary from './UnhandledErrorBoudnary';
 import {GlobalStyle} from './GlobalStyle';
-import UnhandledErrorBoundary from './UnhandledErrorBoundary';
-
-const queryClient = new QueryClient();
 
 const App: React.FC = () => {
   return (
     <HDesignProvider>
-      <QueryClientProvider client={queryClient}>
-        <UnhandledErrorBoundary>
-          <Global styles={GlobalStyle} />
-          <ErrorProvider>
-            {/* <ErrorProvider callback={toast}> */}
-            <ToastProvider>
+      <UnhandledErrorBoundary>
+        <Global styles={GlobalStyle} />
+        <ToastProvider>
+          <ErrorCatcher>
+            <QueryClientBoundary>
               <Outlet />
-            </ToastProvider>
-          </ErrorProvider>
-        </UnhandledErrorBoundary>
-      </QueryClientProvider>
+            </QueryClientBoundary>
+          </ErrorCatcher>
+        </ToastProvider>
+      </UnhandledErrorBoundary>
     </HDesignProvider>
   );
 };

client/src/apis/fetcher.ts

@@ -1,4 +1,4 @@
-import {ErrorInfo} from '@hooks/useError/ErrorProvider';
+import {ErrorInfo} from '@components/AppErrorBoundary/ErrorCatcher';
 
 import objectToQueryString from '@utils/objectToQueryString';
 

client/src/components/AppErrorBoundary/ErrorCatcher.test.tsx

@@ -0,0 +1,92 @@
+import {render, screen, waitFor} from '@testing-library/react';
+import {act, ReactNode} from 'react';
+import {MemoryRouter} from 'react-router-dom';
+import {HDesignProvider} from 'haengdong-design';
+
+import FetchError from '@errors/FetchError';
+import {ToastProvider} from '@hooks/useToast/ToastProvider';
+
+import {useAppErrorStore} from '@store/appErrorStore';
+
+import {SERVER_ERROR_MESSAGES} from '@constants/errorMessage';
+
+import UnhandledErrorBoundary from '../../UnhandledErrorBoudnary';
+
+import ErrorCatcher from './ErrorCatcher';
+
+// 테스트용 헬퍼 컴포넌트
+const TestComponent = ({triggerError}: {triggerError: () => void}) => {
+  return <button onClick={triggerError}>Trigger Error</button>;
+};
+
+const setup = (ui: ReactNode) =>
+  render(
+    <HDesignProvider>
+      <UnhandledErrorBoundary>
+        <ToastProvider>
+          <ErrorCatcher>
+            <MemoryRouter>{ui}</MemoryRouter>
+          </ErrorCatcher>
+        </ToastProvider>
+      </UnhandledErrorBoundary>
+    </HDesignProvider>,
+  );
+
+describe('ErrorCatcher', () => {
+  jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useNavigate: jest.fn(),
+  }));
+
+  it('핸들링 가능한 에러인 경우 토스트가 표시된다.', async () => {
+    const errorCode = 'EVENT_NOT_FOUND';
+    const error = new FetchError({
+      errorInfo: {errorCode, message: '서버의 에러메세지'},
+      name: errorCode,
+      message: '에러메세지',
+      status: 200,
+      endpoint: '',
+      method: 'GET',
+      requestBody: '',
+    });
+
+    const {updateAppError} = useAppErrorStore.getState();
+
+    setup(<TestComponent triggerError={() => updateAppError(error)} />);
+
+    act(() => {
+      screen.getByText('Trigger Error').click();
+    });
+
+    const errorMessage = SERVER_ERROR_MESSAGES[errorCode];
+
+    await waitFor(() => {
+      expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    });
+  });
+
+  it('핸들링 불가능한 에러인 경우 에러 바운더리가 표시된다.', async () => {
+    const errorCode = '모르겠는 에러';
+    const error = new FetchError({
+      errorInfo: {errorCode, message: '모르겠는 에러메세지'},
+      name: errorCode,
+      message: '에러메세지',
+      status: 400,
+      endpoint: '',
+      method: 'GET',
+      requestBody: '',
+    });
+
+    const {updateAppError} = useAppErrorStore.getState();
+
+    setup(<TestComponent triggerError={() => updateAppError(error)} />);
+
+    act(() => {
+      screen.getByText('Trigger Error').click();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('알 수 없는 오류입니다.')).toBeInTheDocument();
+    });
+  });
+});

client/src/components/AppErrorBoundary/ErrorCatcher.tsx

@@ -0,0 +1,62 @@
+import {useEffect} from 'react';
+
+import FetchError from '@errors/FetchError';
+import {useToast} from '@hooks/useToast/useToast';
+
+import {useAppErrorStore} from '@store/appErrorStore';
+
+import {captureError} from '@utils/captureError';
+
+import {SERVER_ERROR_MESSAGES, UNKNOWN_ERROR} from '@constants/errorMessage';
+
+export type ErrorInfo = {
+  errorCode: string;
+  message: string;
+};
+
+const convertAppErrorToErrorInfo = (appError: Error) => {
+  if (appError instanceof Error) {
+    const errorInfo =
+      appError instanceof FetchError ? appError.errorInfo : {errorCode: appError.name, message: appError.message};
+
+    return errorInfo;
+  } else {
+    const errorInfo = {errorCode: UNKNOWN_ERROR, message: JSON.stringify(appError)};
+
+    return errorInfo;
+  }
+};
+
+const isUnhandledError = (errorInfo: ErrorInfo) => {
+  if (errorInfo.errorCode === 'INTERNAL_SERVER_ERROR') return true;
+
+  return SERVER_ERROR_MESSAGES[errorInfo.errorCode] === undefined;
+};
+
+const ErrorCatcher = ({children}: React.PropsWithChildren) => {
+  const {appError} = useAppErrorStore();
+  const {showToast} = useToast();
+
+  useEffect(() => {
+    if (appError) {
+      const errorInfo = convertAppErrorToErrorInfo(appError);
+      captureError(appError, errorInfo);
+
+      if (!isUnhandledError(errorInfo)) {
+        showToast({
+          showingTime: 3000,
+          message: SERVER_ERROR_MESSAGES[errorInfo.errorCode],
+          type: 'error',
+          position: 'bottom',
+          bottom: '8rem',
+        });
+      } else {
+        throw appError;
+      }
+    }
+  }, [appError]);
+
+  return children;
+};
+
+export default ErrorCatcher;

client/src/components/QueryClientBoundary/QueryClientBoundary.tsx

@@ -0,0 +1,24 @@
+import {MutationCache, QueryCache, QueryClient, QueryClientProvider} from '@tanstack/react-query';
+
+import {useAppErrorStore} from '@store/appErrorStore';
+
+const QueryClientBoundary = ({children}: React.PropsWithChildren) => {
+  const {updateAppError} = useAppErrorStore();
+
+  const queryClient = new QueryClient({
+    queryCache: new QueryCache({
+      onError: (error: Error) => {
+        updateAppError(error);
+      },
+    }),
+    mutationCache: new MutationCache({
+      onError: (error: Error) => {
+        updateAppError(error);
+      },
+    }),
+  });
+
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+};
+
+export default QueryClientBoundary;

client/src/components/Toast/Toast.tsx

@@ -19,7 +19,7 @@ const Toast = ({
   bottom = '0px',
   isClickToClose = true,
   position = 'bottom',
-  showingTime,
+  showingTime = 3000,
   message,
   onUndo,
   onClose,

client/src/components/Toast/Toast.type.ts

@@ -12,7 +12,7 @@ export interface ToastOptionProps {
   onUndo?: () => void;
   isClickToClose?: boolean;
   onClose?: () => void;
-  showingTime: number;
+  showingTime?: number;
 }
 
 export interface ToastRequiredProps {