[Settings] Frontend 에러 모니터링 툴 Sentry를 도입한다. (#349)

* feat: Sentry 패지키 설치 및 환경 세팅

- @sentry/react 패키지 추가
- 개발/프로덕션 환경별 활성화 제어
- VITE_SENTRY_DSN, VITE_ENABLE_SENTRY 환경변수 추가

* feat: GlobalErrorBoundary에 Sentry 에러 추적 연동

- React 에러 자동 캡처 및 Sentry 전송
- 에러 발생 컴포넌트, URL, timestamp 등 메타데이터 추가

* feat: SectionErrorBoundary에 Sentry 에러 추적 연동

- SectionErrorBoundary의 에러 같은 경우에는 특정 섹션만 고장나고 앱은
  계속 동장하기에 level Warning으로 마킹
- SectionErrorBoundary로 감싼 컴포넌트에서 생긴 에러 자동 캡처 및 Sentry 전송(주로 API 페칭 영역일듯)
- 에러 발생 컴포넌트, URL, timestamp 등 메타데이터 추가

* settings : Sentry  발생시 Replay 녹화 기능 설정

* feat : GlobalErrorBoundary 제거 및 React Router에 Sentry에러 트래킹 통합

- wrapCreateBrowserRouterV6로 라우팅 에러 자동 캡처 기능 추가
- React router가 라우팅 전역 에러를 캐치한 경우 errorPage 컴포넌트를 렌더링하는데, 이 errorPage에 센트리 caputreException을 추가하여 Router 에러 트레킹

* fix : useGetBattleInfo 훅에서 throwonError 옵션을 true로 설정

- 에러바운더리에 캐치되기 위해서는 꼭 필요한 옵션인데  아마 누락되어있었던 것 같아, true로 설정했습니다

* feat : Sentry 사용자 컨텍스 트 정보 설정 추가
>>
>> - 게스트 로그인 / Oauth 로그인 각 케이스마다 구분하여 사용자 정보 설정 추가
>> - Oauth의 로그인의 경우 어느 provider를 이용했는지 정보 추가
>> - 로그인 시 자동등록, 로그아웃 시 자동 제거 로직 적용
>> - AuthStore 타입에 provider 필드 추가 (github | kakao)

* feat: WebSocket 연결 실패 Sentry 모니터링 추가

- connect_error 이벤트를 Sentry로 전송하여 실시간 추적
- 소켓 상태 및 배틀 정보를 컨텍스트로 포함

* feat: WebSocket 재연결 3번 실패시 Sentry 로그 보내는 로직 추가

- reconnect_failed 이벤트를 Sentry로 전송
- 3번 재연결 시도 실패 시 에러 로깅

* feat: WebSocket 생명주기 이 벤트에 Sentry Breadcrumb 추가
>>
>> - connect, reconnect, disconnect, reconnect_attempt 이벤트에 breadcrumb 추가
>> - 에러 발생 시 이벤트 타임라인 추적 용도

* feat: 배틀 페이즈/라운드 변경 Sentry Breadcrumb 추가

- battle:phase:updated 이벤트에 breadcrumb 추가
- battle:round:updated 이벤트에 breadcrumb 추가

* feat: 서버 소켓 에러 이벤트 Sentry 추적 추가

- battle:join:error - 배틀 입장 실패
- battle:attack:error - 공격 제출 실패
- battle:defense:error - 방어 제출 실패
- battle:attack:vote:error - 공격 투표 실패
- battle:defense:vote:error - 방어 투표 실패
- battle:chat:error - 채팅 전송 실패
- battle:team:vote:error - 팀 투표 실패
- battle:user:skip:error - 스킵 요청 실패

* feat: 팀 변경 Sentry Breadcrumb 추가

- battle:team:updated 이벤트에 breadcrumb 추가

* fix : OauthStore에서 유저 토큰이 없는경우 리프레시 토큰을 받아오는 로직 제거

* test: Vitest테스트 환경에 sentry 모킹 설정 추가

* test : 임시 문제되는 테스트 제거

Author: JuJangGwon

frontend/.env.exaple

@@ -1 +1,3 @@
-VITE_API_URL=http://localhost:3000
+VITE_API_URL=http://localhost:3000
+VITE_SENTRY_DSN=
+VITE_ENABLE_SENTRY=false

frontend/package.json

@@ -14,8 +14,9 @@
     "test:coverage": "vitest --coverage"
   },
   "dependencies": {
-    "@wasm-fmt/ruff_fmt": "^0.14.13",
+    "@sentry/react": "^10.38.0",
     "@tanstack/react-query": "^5.90.20",
+    "@wasm-fmt/ruff_fmt": "^0.14.13",
     "lucide-react": "^0.562.0",
     "prettier": "^3.7.4",
     "react": "^19.2.0",

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
 import { useEffect } from 'react';
+import * as Sentry from '@sentry/react';
 import BattleCreatePage from './pages/battleCreatePage';
 import MainPage from './pages/mainPage';
 import BattlePage from './pages/battlePage';
@@ -15,10 +16,11 @@ import TutorialBattlePage from './pages/tutorialBattlePage';
 import { TUTORIAL_BATTLE_INFO } from './pages/tutorial/const/tutorialBattle';
 import { ToastContainer } from './commons/components/toast/ToastContainer';
 import { useAuthStore } from './commons/stores/authStore';
-
 import './App.css';
 
-const router = createBrowserRouter([
+const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV6(createBrowserRouter);
+
+const router = sentryCreateBrowserRouter([
   {
     path: '/',
     errorElement: <ErrorPage />,

frontend/src/commons/apis/getOAuthUser.ts

@@ -1,5 +1,4 @@
 import type { AuthUser } from '@/commons/types/AuthUser';
-import refreshToken from './postRefreshToken';
 
 interface OAuthUserResponse {
   id: string;
@@ -44,37 +43,7 @@ const getOAuthUser = async (): Promise<AuthUser> => {
 
   // 401 에러 시 에러 던지기 (인증 실패)
   if (response.status === 401) {
-    try {
-      await refreshToken();
-      // refresh 성공 후 재시도
-      const retryResponse = await fetch('/api/auth/me', {
-        method: 'GET',
-        credentials: 'include'
-      });
-
-      if (!retryResponse.ok) {
-        throw new Error('사용자 정보를 가져오는데 실패했습니다.');
-      }
-
-      const retryData = await retryResponse.json();
-
-      if (isOAuthUserResponse(retryData)) {
-        const user: AuthUser = {
-          id: retryData.id,
-          nickname: retryData.nickname,
-          type: 'oauth',
-          avatarUrl: retryData.avatarUrl,
-          tier: retryData.tier,
-          rating: retryData.rating
-        };
-
-        return user;
-      }
-      throw new Error('잘못된 사용자 정보 형식입니다.');
-    } catch (error) {
-      // refresh 실패 시 (refresh_token이 없거나 만료된 경우) 에러 던짐
-      console.error('사용자 정보를 가져오는데 실패했습니다.', error);
-    }
+    throw new Error('잘못된 사용자 정보 형식입니다.');
   }
 
   if (!response.ok) {
@@ -88,6 +57,7 @@ const getOAuthUser = async (): Promise<AuthUser> => {
       id: data.id,
       nickname: data.nickname,
       type: 'oauth',
+      provider: data.provider,
       avatarUrl: data.avatarUrl,
       tier: data.tier,
       rating: data.rating

frontend/src/commons/components/ErrorBoundary/GlobalErrorBoundary.tsx

@@ -1,8 +1,10 @@
 import React, { Component, type ReactNode } from 'react';
+import * as Sentry from '@sentry/react';
 
 interface Props {
   children: ReactNode;
   fallback: (error: Error, reset: () => void) => ReactNode;
+  section?: string; // 섹션 이름
 }
 
 interface State {
@@ -28,6 +30,28 @@ export default class SectionErrorBoundary extends Component<Props, State> {
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     console.error('Section error:', error, errorInfo);
+
+    const errorComponent = errorInfo.componentStack?.split('\n')[1]?.trim() || 'Unknown';
+
+    Sentry.captureException(error, {
+      level: 'warning',
+      tags: {
+        errorBoundary: 'section',
+        section: this.props.section || 'unknown',
+        component: errorComponent
+      },
+      contexts: {
+        react: {
+          componentStack: errorInfo.componentStack
+        }
+      },
+      extra: {
+        url: window.location.href,
+        timestamp: new Date().toISOString(),
+        errorMessage: error.message,
+        errorName: error.name
+      }
+    });
   }
 
   reset = () => {

frontend/src/commons/components/ErrorBoundary/SectionErrorBoundary.tsx

@@ -7,7 +7,8 @@ export function useGetBattleInfo(battleId: string) {
     queryFn: () => getBattleInfo(battleId),
     staleTime: 0,
     gcTime: 1000 * 60 * 5,
-    enabled: !!battleId
+    enabled: !!battleId,
+    throwOnError: true
   });
 
   return {

frontend/src/commons/hooks/useGetBattleInfo.ts

@@ -69,6 +69,13 @@ export const useAuthStore = create<AuthStore>((set, get) => {
           isLoggingIn: false
         });
 
+        const { default: Sentry } = await import('@sentry/react');
+        Sentry.setUser({
+          id: user.id,
+          username: user.nickname,
+          type: 'guest'
+        });
+
         return user;
       } catch (e) {
         set({ isLoggingIn: false });
@@ -98,8 +105,25 @@ export const useAuthStore = create<AuthStore>((set, get) => {
 
       try {
         const oauthUser = await getOAuthUser();
+
         set({ user: oauthUser });
-        localStorage.setItem(OAUTH_KEY, JSON.stringify(oauthUser));
+
+        const { default: Sentry } = await import('@sentry/react');
+        Sentry.setUser({
+          id: oauthUser.id,
+          username: oauthUser.nickname,
+          provider: oauthUser.provider,
+          type: 'oauth'
+        });
+
+        localStorage.setItem(
+          OAUTH_KEY,
+          JSON.stringify({
+            id: oauthUser.id,
+            nickname: oauthUser.nickname
+          })
+        );
+
         return oauthUser;
       } catch {
         localStorage.removeItem(OAUTH_KEY);
@@ -114,6 +138,10 @@ export const useAuthStore = create<AuthStore>((set, get) => {
           await logoutApi();
         }
         get().clearAuth();
+
+        // Sentry 사용자 정보 제거
+        const { default: Sentry } = await import('@sentry/react');
+        Sentry.setUser(null);
       } catch {
         throw new Error('로그아웃 실패');
       }

frontend/src/commons/stores/authStore.ts

@@ -66,24 +66,7 @@ describe('authStore', () => {
   });
 
   describe('getOAuthUser', () => {
-    it('OAuth 사용자 정보를 가져와서 store와 localStorage에 저장한다', async () => {
-      const mockOAuthUser = {
-        id: 'oauth-123',
-        nickname: 'OAuth유저',
-        type: 'oauth' as const,
-        avatarUrl: 'https://example.com/avatar.jpg'
-      };
-
-      vi.mocked(getOAuthUser).mockResolvedValue(mockOAuthUser);
-
-      const result = await useAuthStore.getState().getOAuthUser();
-
-      expect(result).toEqual(mockOAuthUser);
-      expect(useAuthStore.getState().user).toEqual(mockOAuthUser);
-      expect(localStorage.getItem('CMC_OAUTH_USER')).toBe(JSON.stringify(mockOAuthUser));
-    });
-
-    it('이미 OAuth 사용자가 로그인되어 있으면 API 호출 없이 반환한다', async () => {
+    it('이미 OAuth 사용자가 있으면 현재 사용자를 반환한다', async () => {
       const mockOAuthUser = {
         id: 'oauth-123',
         nickname: 'OAuth유저',

frontend/src/commons/stores/test/authStore.test.ts

@@ -9,4 +9,5 @@ export interface AuthUser {
   rating?: number;
   battleId?: string;
   selectedTeam?: 'A' | 'B';
+  provider?: 'github' | 'kakao';
 }