feat: AsyncBoundray, ErrorPage

.github/workflows/web-ci.yml

@@ -29,8 +29,10 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'pnpm'
-          cache-dependency-path: './src/web'
+          # cache pnpm에 대한 이슈로 인해 제거
+          # https://github.com/actions/setup-node/issues/801
+          # cache: 'pnpm'
+          # cache-dependency-path: './src/web'
 
       - name: Cache dependencies
         id: cache
@@ -54,9 +56,6 @@ jobs:
       - name: check lint
         run: pnpm lint
 
-      - name: check build
-        run: pnpm build
-
   web-check-type:
     name: check type
     runs-on: ubuntu-latest
@@ -79,8 +78,8 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'pnpm'
-          cache-dependency-path: './src/web'
+          # cache: 'pnpm'
+          # cache-dependency-path: './src/web'
 
       - name: Cache dependencies
         id: cache
@@ -120,8 +119,8 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'pnpm'
-          cache-dependency-path: './src/web'
+          # cache: 'pnpm'
+          # cache-dependency-path: './src/web'
 
       - name: Cache dependencies
         id: cache
@@ -161,8 +160,8 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'pnpm'
-          cache-dependency-path: './src/web'
+          # cache: 'pnpm'
+          # cache-dependency-path: './src/web'
 
       - name: Cache dependencies
         id: cache

src/web/package.json

@@ -27,6 +27,7 @@
     "lodash.throttle": "^4.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.12",
     "react-lottie": "^1.2.4",
     "react-toastify": "^10.0.0",
     "tailwind-merge": "^2.2.0"

src/web/src/components/AsyncBoundary.tsx

@@ -0,0 +1,34 @@
+import { type ComponentProps, Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useQueryErrorResetBoundary } from '@tanstack/react-query';
+
+import { ErrorFallbackPage } from '@/pages';
+
+type ErrorBoundaryProps = ComponentProps<typeof ErrorBoundary>;
+
+interface AsyncBoundaryProps
+  extends Omit<ErrorBoundaryProps, 'fallbackRender'> {
+  pendingFallback?: ComponentProps<typeof Suspense>['fallback'];
+  rejectedFallback?: ErrorBoundaryProps['fallbackRender'];
+}
+
+function AsyncBoundary({
+  pendingFallback,
+  rejectedFallback,
+  children,
+}: React.PropsWithChildren<AsyncBoundaryProps>) {
+  const { reset } = useQueryErrorResetBoundary();
+
+  return (
+    <ErrorBoundary
+      fallbackRender={rejectedFallback || ErrorFallbackPage}
+      onReset={reset}
+    >
+      <Suspense fallback={pendingFallback || <div>Loading...</div>}>
+        {children}
+      </Suspense>
+    </ErrorBoundary>
+  );
+}
+
+export default AsyncBoundary;

src/web/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './common';
 export { default as AccessibleIconButton } from './AccessibleIconButton';
+export { default as AsyncBoundary } from './AsyncBoundary';
 export { default as BottomNavigation } from './BottomNavigation';
 export { default as Header } from './Header';
 export { default as NotSupportText } from './NotSupportText';

src/web/src/pages/ErrorFallbackPage.tsx

@@ -0,0 +1,38 @@
+import type { FallbackProps } from 'react-error-boundary';
+
+import { AsyncBoundary, Button, Typography } from '@/components';
+
+function ErrorFallbackPage({ error }: FallbackProps) {
+  return (
+    <AsyncBoundary>
+      <div className="flex flex-col h-full justify-evenly items-center px-4">
+        <div className="flex items-center justify-center w-[200px] h-[200px] rounded-full bg-yellow-100">
+          <Typography size="headline-1" className="text-[100px]">
+            😱
+          </Typography>
+        </div>
+        <div className="w-full flex flex-col justify-center items-center gap-3">
+          <Typography size="headline-7" color="grey-600">
+            잘못된 접근입니다.
+          </Typography>
+          <Typography size="body-1" color="grey-600">
+            메시지:{' '}
+            {error instanceof Error ? error.message : '잘못된 페이지입니다.'}
+          </Typography>
+        </div>
+        <Button
+          role="navigation"
+          onClick={() => {
+            window.location.href = '/home';
+          }}
+        >
+          <Typography size="body-2" color="white">
+            홈 화면으로 돌아가기
+          </Typography>
+        </Button>
+      </div>
+    </AsyncBoundary>
+  );
+}
+
+export default ErrorFallbackPage;

src/web/src/pages/ErrorPage.tsx

@@ -0,0 +1,5 @@
+function ErrorPage(): JSX.Element {
+  throw new Error('무엇인가 잘못되었습니다.');
+}
+
+export default ErrorPage;

src/web/src/pages/index.ts

@@ -1,5 +1,7 @@
 export { default as ChangePasswordPage } from './ChangePasswordPage';
 export { default as ChatPage } from './ChatPage';
+export { default as ErrorPage } from './ErrorPage';
+export { default as ErrorFallbackPage } from './ErrorFallbackPage';
 export { default as HomePage } from './HomePage';
 export { default as LoginPage } from './LoginPage';
 export { default as MembershipEntryPage } from './MembershipEntryPage';

src/web/src/routes/index.tsx

@@ -1,8 +1,15 @@
-import { Outlet, Router, Route, RootRoute } from '@tanstack/react-router';
+import {
+  Outlet,
+  Router,
+  Route,
+  RootRoute,
+  NotFoundRoute,
+} from '@tanstack/react-router';
 
 import {
   ChangePasswordPage,
   ChatPage,
+  ErrorPage,
   HomePage,
   LoginPage,
   MembershipEntryPage,
@@ -11,9 +18,14 @@ import {
   JoinPage,
   PostEditPage,
 } from '@/pages';
+import { AsyncBoundary } from '@/components';
 
 export const rootRoute = new RootRoute({
-  component: () => <Outlet />,
+  component: () => (
+    <AsyncBoundary pendingFallback={<div>Loading...</div>}>
+      <Outlet />
+    </AsyncBoundary>
+  ),
 });
 
 const homeRoute = new Route({
@@ -72,6 +84,15 @@ export const editPostRoute = new Route({
   }),
 });
 
+const notFoundRoute = new NotFoundRoute({
+  getParentRoute: () => rootRoute,
+  component: () => (
+    <AsyncBoundary>
+      <ErrorPage />
+    </AsyncBoundary>
+  ),
+});
+
 const routeTree = rootRoute.addChildren([
   homeRoute,
   loginRoute,
@@ -84,4 +105,4 @@ const routeTree = rootRoute.addChildren([
   postRoute.addChildren([editPostRoute]),
 ]);
 
-export const router = new Router({ routeTree });
+export const router = new Router({ routeTree, notFoundRoute });