Fe/feature/#560 error boundary적용

frontend/package.json

@@ -21,6 +21,7 @@
     "html2canvas": "^1.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.12",
     "react-router-dom": "^6.20.1",
     "socket.io-client": "^4.7.2",
     "zustand": "^4.4.7"

frontend/src/App.tsx

@@ -1,13 +1,13 @@
 import { RouterProvider } from 'react-router-dom';
-import { rootRouter } from 'rootRouter';
+import { router } from 'router';
 
 import { BackgroundMusic, Cursor } from '@components/common';
 
 export function App() {
   return (
     <>
       <Cursor />
-      <RouterProvider router={rootRouter} />
+      <RouterProvider router={router} />
       <BackgroundMusic />
     </>
   );

frontend/src/business/services/SocketManager/SocketManager.ts

@@ -29,6 +29,16 @@ export class SocketManager<T1 extends EventsMap, T2 extends EventsMap> {
       return;
     }
     this.#socket = io(this.#url, { path: this.#path, withCredentials });
+
+    this.socket?.on('disconnect', () => {
+      alert('서버와 연결이 끊겼습니다. 메인 페이지로 이동합니다.');
+      window.location.href = '/';
+    });
+
+    this.socket?.on('connect_error', () => {
+      alert('서버와 연결할 수 없습니다. 메인 페이지로 이동합니다.');
+      window.location.href = '/';
+    });
   }
 
   disconnect() {

frontend/src/errors/APIErrorBoundary.tsx

@@ -0,0 +1,41 @@
+import { useQueryErrorResetBoundary } from '@tanstack/react-query';
+import { isAxiosError } from 'axios';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+
+import { SomethingWrongErrorPage } from '@pages/ErrorPage';
+
+const APIErrorFallback = ({ error }: FallbackProps) => {
+  if (
+    isAxiosError<{
+      errorCode: string;
+      message: string;
+    }>(error)
+  ) {
+    const responseBody = error.response?.data;
+
+    // TODO: 에러코드 정의되면 여기서 에러 코드에 따른 작업을 해줘야함.
+    switch (responseBody?.errorCode) {
+    }
+
+    // 에러 코드에 따른 작업 처리후 에러 페이지로 이동
+    return <SomethingWrongErrorPage />;
+  } else {
+    // 그 외의 에러의 경우 상단 바운더리에서 처리
+    throw error;
+  }
+};
+
+export function APIErrorBoundary({ children }: { children: React.ReactNode }) {
+  const { reset } = useQueryErrorResetBoundary();
+
+  return (
+    <ErrorBoundary
+      FallbackComponent={APIErrorFallback}
+      onReset={reset}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+}
+
+export default APIErrorBoundary;

frontend/src/errors/UnknownErrorBoundary.tsx

@@ -0,0 +1,20 @@
+import { useQueryErrorResetBoundary } from '@tanstack/react-query';
+import type { PropsWithChildren } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+import { SomethingWrongErrorPage } from '@pages/ErrorPage';
+
+export function UnknownErrorBoundary({ children }: PropsWithChildren) {
+  const { reset } = useQueryErrorResetBoundary();
+
+  return (
+    <ErrorBoundary
+      FallbackComponent={SomethingWrongErrorPage}
+      onReset={reset}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+}
+
+export default UnknownErrorBoundary;

frontend/src/errors/index.ts

@@ -0,0 +1,2 @@
+export * from './APIErrorBoundary';
+export * from './UnknownErrorBoundary';

frontend/src/pages/ErrorPage/SomethingWrongErrorPage.tsx

@@ -0,0 +1,8 @@
+export function SomethingWrongErrorPage() {
+  return (
+    <div>
+      <h1>에러가 발생했습니다.</h1>
+      <p>잠시 후 다시 시도해주세요.</p>
+    </div>
+  );
+}

frontend/src/pages/ErrorPage/index.ts

@@ -0,0 +1 @@
+export * from './SomethingWrongErrorPage';

frontend/src/rootRouter.tsx → frontend/src/router.tsx

@@ -1,4 +1,6 @@
-import { Route, createBrowserRouter, createRoutesFromElements } from 'react-router-dom';
+import { UnknownErrorBoundary } from 'errors';
+import APIErrorBoundary from 'errors/APIErrorBoundary';
+import { Outlet, Route, createBrowserRouter, createRoutesFromElements } from 'react-router-dom';
 
 import {
   AIChatPage,
@@ -10,9 +12,18 @@ import {
   SettingPage,
 } from './pages';
 
-export const rootRouter = createBrowserRouter(
+export const router = createBrowserRouter(
   createRoutesFromElements(
-    <Route path="/">
+    <Route
+      path="/"
+      element={
+        <UnknownErrorBoundary>
+          <APIErrorBoundary>
+            <Outlet />
+          </APIErrorBoundary>
+        </UnknownErrorBoundary>
+      }
+    >
       <Route
         index
         path=""