feat: Sentry 셋업

Sentry init완료 axios interceptors 사용해서 error시 에러 전송
boostcampwm2023 · Dec 12, 2023 · 7468902 · 7468902
1 parent 4704bb5
commit 7468902
Show file tree

Hide file tree

Showing 18 changed files with 225 additions and 76 deletions.
diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@react-three/drei": "^9.88.11",
     "@react-three/fiber": "^8.15.10",
+    "@sentry/react": "^7.86.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.29",
     "@types/three": "^0.158.1",

diff --git a/front/src/App.tsx b/front/src/App.tsx
@@ -9,6 +9,7 @@ import { SnowBallProvider } from '@pages/Visit/SnowBallProvider';
 import { MessageProvider } from '@pages/Visit/MessageProvider';
 import { DecoProvider } from '@pages/Visit/Deco/DecoProvider';
 import { MessageListProvider } from '@pages/Visit/MessageListProvider';
+import * as Sentry from '@sentry/react';
 
 const Outer = styled.div`
   position: relative;
@@ -21,75 +22,75 @@ const Outer = styled.div`
     width: ${theme.size['--desktop-width']};
   }
 `;
-
 const App = () => {
   return (
     <>
-      <GlobalStyles />
-      <ThemeProvider theme={theme}>
-        <Outer>
-          <Song />
-          <BrowserRouter>
-            <Routes>
-              <Route
-                path="/"
-                element={
-                  <MessageListProvider>
-                    <Pages.Intro />
-                  </MessageListProvider>
-                }
-              />
+      <Sentry.ErrorBoundary>
+        <GlobalStyles />
+        <ThemeProvider theme={theme}>
+          <Outer>
+            <Song />
+            <BrowserRouter>
+              <Routes>
+                <Route
+                  path="/"
+                  element={
+                    <MessageListProvider>
+                      <Pages.Intro />
+                    </MessageListProvider>
+                  }
+                />
+
+                <Route
+                  path="/visit/:user"
+                  element={
+                    <DecoProvider>
+                      <MessageProvider>
+                        <SnowBallProvider>
+                          <MessageListProvider>
+                            <Outlet />
+                          </MessageListProvider>
+                        </SnowBallProvider>
+                      </MessageProvider>
+                    </DecoProvider>
+                  }
+                >
+                  <Route path="" element={<Pages.Visit />} />
+                  <Route path="deco" element={<Pages.Deco />} />
+                </Route>
+
+                <Route
+                  path="/make"
+                  element={
+                    <SnowBallProvider>
+                      <HasSnowballData>
+                        <Outlet />
+                      </HasSnowballData>
+                    </SnowBallProvider>
+                  }
+                >
+                  <Route path="" element={<Pages.Nickname />} />
+                  <Route path="snowball" element={<Pages.Snowball />} />
+                </Route>
 
-              <Route
-                path="/visit/:user"
-                element={
-                  <DecoProvider>
+                <Route
+                  path="/main"
+                  element={
                     <MessageProvider>
                       <SnowBallProvider>
                         <MessageListProvider>
-                          <Outlet />
+                          <Pages.Main />
                         </MessageListProvider>
                       </SnowBallProvider>
                     </MessageProvider>
-                  </DecoProvider>
-                }
-              >
-                <Route path="" element={<Pages.Visit />} />
-                <Route path="deco" element={<Pages.Deco />} />
-              </Route>
-
-              <Route
-                path="/make"
-                element={
-                  <SnowBallProvider>
-                    <HasSnowballData>
-                      <Outlet />
-                    </HasSnowballData>
-                  </SnowBallProvider>
-                }
-              >
-                <Route path="" element={<Pages.Nickname />} />
-                <Route path="snowball" element={<Pages.Snowball />} />
-              </Route>
-
-              <Route
-                path="/main"
-                element={
-                  <MessageProvider>
-                    <SnowBallProvider>
-                      <MessageListProvider>
-                        <Pages.Main />
-                      </MessageListProvider>
-                    </SnowBallProvider>
-                  </MessageProvider>
-                }
-              />
-
-              <Route path="*" element={<Pages.Wrong />} />
-            </Routes>
-          </BrowserRouter>
-        </Outer>
-      </ThemeProvider>
+                  }
+                />
+                <Route path="*" element={<Pages.Wrong />} />
+              </Routes>
+            </BrowserRouter>
+          </Outer>
+        </ThemeProvider>
+      </Sentry.ErrorBoundary>
     </>
   );
 };

diff --git a/front/src/components/Modal/Modal.tsx b/front/src/components/Modal/Modal.tsx
@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { createPortal } from 'react-dom';
-import axios from 'axios';
+import axios from '@utils/axios';
 import styled from 'styled-components';
 import { theme } from '@utils';
 import {
@@ -157,8 +157,7 @@ const DeleteModal = (props: DeleteModalProps) => {
             setMessageList(messageList);
             setUserData(userData);
           })
-          .catch(e => {
-            console.error(e);
+          .catch(() => {
             navigate('*');
           });
       })

diff --git a/front/src/index.tsx b/front/src/index.tsx
@@ -1,5 +1,19 @@
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import * as Sentry from '@sentry/react';
+
+Sentry.init({
+  dsn: import.meta.env.VITE_APP_SENTRY_DSN,
+  integrations: [
+    new Sentry.BrowserTracing({
+      tracePropagationTargets: ['localhost', /^https:\/\/mysnowball\.kr\/api/]
+    }),
+    new Sentry.Replay()
+  ],
+  tracesSampleRate: 1.0,
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0
+});
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement

diff --git a/front/src/pages/Main/ListMsgs.tsx b/front/src/pages/Main/ListMsgs.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, useContext } from 'react';
 import { createPortal } from 'react-dom';
-import axios from 'axios';
+import axios from '@utils/axios';
 import styled from 'styled-components';
 import { useLogout } from '@hooks';
 import { ListMsg, Prev } from '@components';
@@ -98,7 +98,7 @@ const ListMsgs = (props: ListMsgProps) => {
         console.error(e);
         logout();
       });
-  }, []);
+  }, [userData]);
 
   return (
     <>

diff --git a/front/src/pages/Main/Main.tsx b/front/src/pages/Main/Main.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useContext, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useCookies } from 'react-cookie';
-import axios from 'axios';
+import axios from '@utils/axios';
 import styled from 'styled-components';
 import { Loading } from '@utils';
 import { useLogout } from '@hooks';
@@ -49,7 +49,7 @@ const moveSnowball = (
   const nextSnowBallID =
     userData.snowball_list[(nowSnowBallID + nextIdx) % userData.snowball_count];
 
-  axios(`/api/snowball/${nextSnowBallID}`)
+  axios(`/api/snowball/${nextSnowBallID + 1000}`)
     .then(res => {
       setSnowBallData(res.data as SnowBallData);
       setMessageListData(res.data.message_list as Array<Message>);

diff --git a/front/src/pages/Main/MainBody.tsx b/front/src/pages/Main/MainBody.tsx
@@ -1,5 +1,5 @@
 import { useContext, useEffect } from 'react';
-import axios from 'axios';
+import axios from '@utils/axios';
 import styled from 'styled-components';
 import { Msg } from '@components';
 import { MessageListContext, Message } from '@pages/Visit/MessageListProvider';

diff --git a/front/src/pages/Make/Nickname/Nickname.tsx b/front/src/pages/Make/Nickname/Nickname.tsx
@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import axios from 'axios';
+import axios from '@utils/axios';
 import styled from 'styled-components';
 import { theme } from '@utils';
 import { Button } from '@components';

diff --git a/front/src/pages/Make/Snowball/MainDeco/DecoEnroll.tsx b/front/src/pages/Make/Snowball/MainDeco/DecoEnroll.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import { NavigateFunction, useNavigate } from 'react-router-dom';
-import axios from 'axios';
+import axios from '@utils/axios';
 import styled from 'styled-components';
 import { theme, BlurBody } from '@utils';
 import { useLogout } from '@hooks';

diff --git a/front/src/pages/Make/Snowball/MainDeco/MakeButton.tsx b/front/src/pages/Make/Snowball/MainDeco/MakeButton.tsx
@@ -1,6 +1,6 @@
 import { useState, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
-import axios from 'axios';
+import axios from '@utils/axios';
 import styled from 'styled-components';
 import { LongButton } from '@utils';
 import { DecoContext } from './DecoProvider';

diff --git a/front/src/pages/Make/Snowball/Snowball.tsx b/front/src/pages/Make/Snowball/Snowball.tsx
@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
-import axios from 'axios';
+import axios from '@utils/axios';
 import { Loading, theme } from '@utils';
 import { SnowGlobeCanvas, Button } from '@components';
 import { MainDeco } from './MainDeco';