Merge pull request #198 from prgrms-web-devcourse-final-project/feat/191-error-boundary

[feat] error boundary 추가

Author: yoo-nji

dev-dist/sw.js

@@ -79,7 +79,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "index.html",
-    "revision": "0.koc340e0a3g"
+    "revision": "0.08jje88gm9"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

package-lock.json

@@ -23,6 +23,7 @@
     "lottie-react": "^2.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-error-boundary": "^5.0.0",
     "react-intersection-observer": "^9.15.1",
     "react-router": "^7.1.5",
     "react-spinners": "^0.15.0",

package.json

@@ -0,0 +1,16 @@
+import ErrorFallback from '@/components/ErrorFallback';
+import { ErrorBoundary } from 'react-error-boundary';
+
+const logError = (error: Error, info: React.ErrorInfo) => {
+  console.error(error, info);
+  // error: 발생한 에러 객체
+  // info: 추가 정보 (어떤 컴포넌트에서 발생했는지)
+};
+
+export default function MyErrorBoundary({ children }: { children: React.ReactNode }) {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback} onError={logError}>
+      {children}
+    </ErrorBoundary>
+  );
+}

src/components/ErrorBoundary.tsx

@@ -0,0 +1,19 @@
+import ErrorPage from '@/components/ErrorPage';
+
+interface ErrorFallbackProps {
+  error: Error;
+  resetErrorBoundary: () => void;
+}
+
+export default function ErrorFallback({ error, resetErrorBoundary }: ErrorFallbackProps) {
+  console.log(error);
+
+  return (
+    <ErrorPage
+      title="500 Server Error"
+      message={['서비스 이용에 불편을 드려 죄송합니다.', '잠시 후 다시 시도해 주세요.']}
+      onClick={resetErrorBoundary}
+      buttonText="다시 시도하기"
+    />
+  );
+}

src/components/ErrorFallback.tsx

@@ -0,0 +1,34 @@
+import Button from '@/components/Button';
+import sad from '@/assets/icons/sad-icon.svg';
+
+interface ErrorPageProps {
+  title: string;
+  message: string | string[];
+  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void;
+  buttonText: string;
+}
+
+const messageText = (message: string | string[]) => {
+  if (Array.isArray(message)) return message.map((text, index) => <p key={index}>{text}</p>);
+  return <p>{message}</p>;
+};
+
+export default function ErrorPage({ title, message, onClick, buttonText }: ErrorPageProps) {
+  return (
+    <div className="relative w-full max-w-[600px] px-3 bg-background flex flex-col justify-center items-center">
+      <div className="flex flex-col gap-5 justify-center items-center">
+        <p className="text-[28px] font-bold text-primary-normal">{title}</p>
+        <div className="flex flex-col justify-center items-center text-gray-60">
+          {messageText(message)}
+        </div>
+        <img src={sad} className="w-[80px] h-[80px]" alt="sad" />
+      </div>
+
+      <div className="absolute bottom-10 flex px-3 w-full">
+        <Button onClick={onClick} variant="primary">
+          {buttonText}
+        </Button>
+      </div>
+    </div>
+  );
+}

src/components/ErrorPage.tsx

@@ -5,6 +5,7 @@ import HeaderWithBack from '@/layouts/header/HeaderWithBack';
 import HeaderChat from '@/layouts/header/HeaderChat';
 import { twMerge } from 'tailwind-merge';
 import PostButton from '@/components/PostButton';
+import MyErrorBoundary from '@/components/ErrorBoundary';
 import { useEffect, useRef } from 'react';
 import { useScrollStore } from '@/store/scrollStore';
 
@@ -77,7 +78,9 @@ function Layout() {
           showNav && 'pb-[62px] ', // 하단 네비게이션 숨길때만 padding주기
         )}
       >
-        <Outlet />
+        <MyErrorBoundary>
+          <Outlet />
+        </MyErrorBoundary>
       </div>
 
       {/* 하단 네비게이션 */}

src/layouts/Layout.tsx

@@ -1,22 +1,14 @@
-import Button from '@/components/Button';
-import sad from '@/assets/icons/sad-icon.svg';
+import ErrorPage from '@/components/ErrorPage';
+import { useNavigate } from 'react-router';
 
 export default function NotFound() {
+  const navigate = useNavigate();
   return (
-    <div className="relative w-full max-w-[600px] px-3 bg-background flex flex-col justify-center items-center">
-      <div className="flex flex-col gap-5 justify-center items-center">
-        <p className="text-[28px] font-bold text-primary-normal">404 Not Found</p>
-        <div className="flex flex-col justify-center items-center text-gray-60">
-          <p>페이지를 찾을 수 없어요</p>
-          <p>새로운 감정을 발견하러 가볼까요?</p>
-        </div>
-
-        <img src={sad} className="w-[80px] h-[80px]" alt="sad" />
-      </div>
-
-      <div className="absolute bottom-10 flex px-3 w-full">
-        <Button variant="primary">홈으로 가기</Button>
-      </div>
-    </div>
+    <ErrorPage
+      title="404 Not Found"
+      message={['페이지를 찾을 수 없어요', '새로운 감정을 발견하러 가볼까요?']}
+      onClick={() => navigate('/')}
+      buttonText="홈으로 가기"
+    />
   );
 }