feat: ErrorBoundary에 홈으로 가는 버튼 추가 및 에러 메세지 출력 #230

woowacourse-teams · Aug 28, 2024 · f265af1 · f265af1
1 parent 362bba0
commit f265af1
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 13 deletions.
diff --git a/frontend/src/components/common/ErrorBoundary/AsyncErrorBoundary.tsx b/frontend/src/components/common/ErrorBoundary/AsyncErrorBoundary.tsx
@@ -20,7 +20,9 @@ const AsyncErrorBoundary = ({
   return (
     <ErrorBoundary
       onReset={reset}
-      fallback={({ resetError }) => <AsyncErrorFallback resetError={resetError} />}
+      fallback={({ error, resetError }) => (
+        <AsyncErrorFallback error={error} resetError={resetError} />
+      )}
       onError={(error) => {
         if (error instanceof CustomError) {
           withScope((scope) => {

diff --git a/frontend/src/components/common/ErrorFallback/AsyncErrorFallback/AsyncErrorFallback.tsx b/frontend/src/components/common/ErrorFallback/AsyncErrorFallback/AsyncErrorFallback.tsx
@@ -1,21 +1,36 @@
+import { useNavigate } from 'react-router-dom';
+
 import Button from '../../Button/Button';
-import { errorFallbackLayout, errorImage, errorText } from '../ErrorFallback.styled';
+import {
+  errorFallbackLayout,
+  errorImage,
+  errorText,
+  fallbackButtonContainer,
+} from '../ErrorFallback.styled';
 
 import ErrorDdangkong from '@/assets/images/errorDdangkong.png';
+import { CustomError } from '@/utils/error';
 
 interface AsyncErrorFallback {
+  error: unknown;
   resetError: () => void;
 }
 
-const AsyncErrorFallback = ({ resetError }: AsyncErrorFallback) => {
+const AsyncErrorFallback = ({ error, resetError }: AsyncErrorFallback) => {
+  const navigate = useNavigate();
+
+  const goToHome = () => {
+    navigate('/');
+  };
+
   return (
     <section css={errorFallbackLayout}>
       <img src={ErrorDdangkong} alt="에러나서 슬픈 땅콩" css={errorImage} />
-      <h2 css={errorText}>
-        서버에 오류가 발생했어요.
-        <br /> 다시 시도해 주세요!
-      </h2>
-      <Button onClick={resetError} text="다시 시도" size="medium" radius="medium" />
+      <h2 css={errorText}>{error instanceof CustomError && error.message}</h2>
+      <div css={fallbackButtonContainer}>
+        <Button onClick={resetError} text="다시 시도" size="medium" radius="medium" />
+        <Button onClick={goToHome} text="홈으로" size="medium" radius="medium" />
+      </div>
     </section>
   );
 };

diff --git a/frontend/src/components/common/ErrorFallback/ErrorFallback.styled.ts b/frontend/src/components/common/ErrorFallback/ErrorFallback.styled.ts
@@ -21,3 +21,9 @@ export const errorText = css`
   text-align: center;
   word-break: keep-all;
 `;
+
+export const fallbackButtonContainer = css`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+`;
diff --git a/frontend/src/components/common/ErrorFallback/RootErrorFallback/RootErrorFallback.tsx b/frontend/src/components/common/ErrorFallback/RootErrorFallback/RootErrorFallback.tsx
@@ -1,7 +1,13 @@
 import { captureException, withScope } from '@sentry/react';
+import { useNavigate } from 'react-router-dom';
 
 import Button from '../../Button/Button';
-import { errorFallbackLayout, errorImage, errorText } from '../ErrorFallback.styled';
+import {
+  errorFallbackLayout,
+  errorImage,
+  errorText,
+  fallbackButtonContainer,
+} from '../ErrorFallback.styled';
 
 import ErrorDdangkong from '@/assets/images/errorDdangkong.png';
 
@@ -11,6 +17,12 @@ interface RootErrorFallbackProps {
 }
 
 const RootErrorFallback = ({ error, resetError }: RootErrorFallbackProps) => {
+  const navigate = useNavigate();
+
+  const goToHome = () => {
+    navigate('/');
+  };
+
   if (error instanceof Error) {
     withScope((scope) => {
       scope.setLevel('fatal');
@@ -26,7 +38,10 @@ const RootErrorFallback = ({ error, resetError }: RootErrorFallbackProps) => {
         서비스에 장애가 발생했습니다.
         <br /> 다음에 다시 이용해주세요!
       </h2>
-      <Button onClick={resetError} text="다시 시도" size="medium" radius="medium" />
+      <div css={fallbackButtonContainer}>
+        <Button onClick={resetError} text="다시 시도" size="medium" radius="medium" />
+        <Button onClick={goToHome} text="홈으로" size="medium" radius="medium" />
+      </div>
     </section>
   );
 };

diff --git a/frontend/src/components/common/ErrorFallback/RouterErrorFallback/RouterErrorFallback.tsx b/frontend/src/components/common/ErrorFallback/RouterErrorFallback/RouterErrorFallback.tsx
@@ -8,7 +8,7 @@ import ErrorDdangkong from '@/assets/images/errorDdangkong.png';
 const RouterErrorFallback = () => {
   const navigate = useNavigate();
 
-  const handleClick = () => {
+  const goToHome = () => {
     navigate('/');
   };
 
@@ -19,7 +19,7 @@ const RouterErrorFallback = () => {
         페이지 전환 시 에러가 발생하였습니다.
         <br /> 다시 접속해주세요!
       </h2>
-      <Button onClick={handleClick} text="메인으로 가기" size="medium" radius="medium" />
+      <Button onClick={goToHome} text="메인으로 가기" size="medium" radius="medium" />
     </section>
   );
 };

diff --git a/frontend/src/constants/message.ts b/frontend/src/constants/message.ts
@@ -49,5 +49,5 @@ export const ERROR_MESSAGE: Record<ErrorCode, string> = {
   METHOD_NOT_SUPPORTED: '허용되지 않은 메서드입니다.',
 
   // 서버 에러
-  INTERNAL_SERVER_ERROR: '서버 에러가 발생했어요!',
+  INTERNAL_SERVER_ERROR: '서버에 오류가 발생했어요. 다시 시도해 주세요!',
 };