[FE] public assets 에러 로그 및 og 커버 버그, 그리고 센트리 작동 안함 이슈를 해결한다. (#874)

woowacourse-teams · Oct 24, 2024 · 5cad0bb · 5cad0bb
1 parent 4f8ac6b
commit 5cad0bb
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 11 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -9,19 +9,19 @@
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://bang-ggood.com" />
     <meta property="og:title" content="방끗 - 방 구하기 끝 그래서 방끗!" />
-    <meta property="og:image" content="https://bang-ggood.com/images/bang-ggood-thumbnail.png" />
+    <meta property="og:image" content="https://bang-ggood.com/static/images/bang-ggood-thumbnail.png" />
     <meta
       property="og:description"
       content="자취 초보를 위한 방 보러 다닐 때 꼭 필요한 체크리스트! 내 방 찾기, 이제 걱정 없이 준비하세요."
     />
     <meta property="og:site_name" content="방끗" />
     <meta property="og:locale" content="ko-KOR" />
     <!-- Preload -->
-    <link href="../src/assets/fonts/SUITE-Variable.woff2" rel="preload" as="font" type="font/woff2" />
-    <link href="../src/assets/images/category-sprite.webp" rel="preload" as="image" />
-    <link href="../src/assets/images/checkingPageScreen.webp" rel="preload" as="image" />
-    <link href="../src/assets/images/customPageScreen.webp" rel="preload" as="image" />
-    <link href="../src/assets/images/mainPageScreen.webp" rel="preload" as="image" />
+    <link href="https://bang-ggood.com/static/fonts/SUITE-Variable.woff2" rel="preload" as="font" type="font/woff2" />
+    <link href="https://bang-ggood.com/static/images/category-sprite.webp" rel="preload" as="image" />
+    <link href="https://bang-ggood.com/static/images/checkingPageScreen.webp" rel="preload" as="image" />
+    <link href="https://bang-ggood.com/static/images/customPageScreen.webp" rel="preload" as="image" />
+    <link href="https://bang-ggood.com/static/images/mainPageScreen.webp" rel="preload" as="image" />
     <base href="/" />
   </head>
   <body>

diff --git a/frontend/src/apis/fetcher.ts b/frontend/src/apis/fetcher.ts
@@ -1,3 +1,5 @@
+import { captureException } from '@sentry/react';
+
 import APIError from '@/apis/error/APIError';
 import { deleteToken, postReissueAccessToken } from '@/apis/user';
 import { API_ERROR_MESSAGE } from '@/constants/messages/apiErrorMessage';
@@ -38,7 +40,9 @@ const handleError = async (response: Response, requestProps: RequestProps) => {
     return handleUnauthorizedError(response, requestProps, errorCode);
   }
 
-  throw new APIError(response.status, errorCode);
+  const apiError = new APIError(response.status, errorCode);
+  captureException(apiError);
+  throw apiError;
 };
 
 const handleUnauthorizedError = async (response: Response, requestProps: RequestProps, errorCode: string) => {

diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
@@ -6,6 +6,7 @@ import FirstSection from '@/components/Landing/FirstSection';
 import FourthSection from '@/components/Landing/FourthSection';
 import SecondSection from '@/components/Landing/SecondSection';
 import ThirdSection from '@/components/Landing/ThirdSection';
+import useAutoLogin from '@/hooks/useAutoLogin';
 import useMoveSection from '@/hooks/useMoveSection';
 import { flexColumn } from '@/styles/common';
 import theme from '@/styles/theme';
@@ -38,7 +39,7 @@ const LandingPage = () => {
   const sectionRefs = useRef<(HTMLElement | null)[]>([]);
 
   const { handleSectionClick } = useMoveSection(sectionRefs);
-  // useAutoLogin();
+  useAutoLogin();
 
   return (
     <S.Container>

diff --git a/frontend/src/sentry.ts b/frontend/src/sentry.ts
@@ -28,4 +28,5 @@ Sentry.init({
   // plus for 100% of sessions with an error
   replaysSessionSampleRate: 0.1,
   replaysOnErrorSampleRate: 1.0,
+  enabled: process.env.API_ENV === 'production',
 });
diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js
@@ -37,7 +37,7 @@ module.exports = {
       patterns: [
         {
           from: 'src/assets/images/og',
-          to: 'images',
+          to: 'static/images',
         },
       ],
     }),
@@ -52,11 +52,26 @@ module.exports = {
           },
         ],
       },
-      { test: /\.(eot|ttf|woff|woff2)$/i, type: 'asset' },
-      { test: /\.(png|jpg|gif|webp|mp4)/i, type: 'asset/resource' },
+      {
+        test: /\.(eot|ttf|woff|woff2)$/i,
+        type: 'asset',
+        generator: {
+          filename: 'static/fonts/[name][ext]',
+        },
+      },
+      {
+        test: /\.(png|jpg|gif|webp|mp4)/i,
+        type: 'asset/resource',
+        generator: {
+          filename: 'static/images/[name][ext]',
+        },
+      },
       {
         test: /\.svg$/i,
         issuer: /\.[jt]sx?$/,
+        generator: {
+          filename: 'static/images/[name][ext]',
+        },
         use: [
           {
             loader: '@svgr/webpack',