feat: 에러 추적을 위한 Sentry 연결 (#76)

* feat: 에러 추적을 위한 @sentry/react 의존성 추가

* feat: Sentry 연동 코드 추가

* feat: Workflow에 Sentry DSN 환경 변수 추가

* fix: Sentry DSN 환경 변수 이름 수정

Author: 2wndrhs

.github/workflows/deploy.yml

@@ -31,6 +31,7 @@ jobs:
           VITE_API_URL: ${{ secrets.VITE_API_URL }}
           VITE_MIXPANEL_TOKEN: ${{ secrets.VITE_MIXPANEL_TOKEN }}
           VITE_CHANNEL_TALK_PLUGIN_KEY: ${{ secrets.VITE_CHANNEL_TALK_PLUGIN_KEY }}
+          VITE_SENTRY_DSN: ${{secrets.VITE_SENTRY_DSN}}
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v4

package.json

@@ -14,6 +14,7 @@
     "@channel.io/channel-web-sdk-loader": "^2.0.0",
     "@radix-ui/react-popover": "^1.1.5",
     "@radix-ui/react-toast": "^1.2.6",
+    "@sentry/react": "^9.0.1",
     "@stackflow/core": "^1.1.1",
     "@stackflow/plugin-basic-ui": "^1.11.1",
     "@stackflow/plugin-history-sync": "^1.7.1",

pnpm-lock.yaml

@@ -4,6 +4,9 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
 import './index.css';
+import './utils/channelTalk';
+import './utils/mixpanel';
+import './utils/sentry';
 
 const queryClient = new QueryClient();
 

src/main.tsx

@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/react';
+
+Sentry.init({
+  dsn: import.meta.env.VITE_SENTRY_DSN,
+  integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
+  // Tracing
+  tracesSampleRate: 1.0, //  Capture 100% of the transactions
+  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: [],
+  // Session Replay
+  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+});