sentry 설치 및 초기 설정

package.json

@@ -22,6 +22,7 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
+    "@sentry/react": "^10.33.0",
     "@supabase/supabase-js": "^2.76.1",
     "@tailwindcss/vite": "^4.1.14",
     "@tanstack/react-query": "^5.90.9",

src/lib/sentry.ts

@@ -0,0 +1,27 @@
+import * as Sentry from "@sentry/react";
+
+export function initializeSentry() {
+  const SENTRY_DSN = import.meta.env.VITE_SENTRY_DSN;
+
+  if (SENTRY_DSN) {
+    Sentry.init({
+      dsn: SENTRY_DSN,
+      // Setting this option to true will send default PII data to Sentry.
+      // For example, automatic IP address collection on events
+      sendDefaultPii: true,
+      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: ["localhost", /^https:\/\/yourserver\.io\/api/],
+      // 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.,
+      // Enable logs to be sent to Sentry
+      enableLogs: true,
+    });
+  }
+}

src/main.tsx

@@ -16,29 +16,57 @@
 import { QueryClientProvider } from "@tanstack/react-query";
 import { queryClient } from "@/lib/queryClient";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { initializeSentry } from "@/lib/sentry";
+import * as Sentry from "@sentry/react";
 
 import "./index.css";
 
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <ReactQueryDevtools initialIsOpen={false} />
-      <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
-        <BrowserRouter>
-          <Routes>
-            <Route element={<RootLayout />}>
-              <Route index element={<App />} />
-              <Route path="sign-up" element={<SignUp />} />
-              <Route path="sign-in" element={<SignIn />} />
-              <Route path="recruit" element={<Recruit />} />
-              <Route path="recruit/posts/:id" element={<PostDetail />} />
-              <Route path="recruit/posts/:id/edit" element={<PostCreate />} />
-              <Route path="find-teammates" element={<FindTeammates />} />
-            </Route>
-          </Routes>
-        </BrowserRouter>
-        <Toaster richColors position="top-center" />
-      </ThemeProvider>
-    </QueryClientProvider>
-  </StrictMode>,
+initializeSentry();
+
+const SentryErrorBoundary = Sentry.withErrorBoundary(
+  () => (
+    <StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <ReactQueryDevtools initialIsOpen={false} />
+        <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
+          <BrowserRouter>
+            <Routes>
+              <Route element={<RootLayout />}>
+                <Route index element={<App />} />
+                <Route path="sign-up" element={<SignUp />} />
+                <Route path="sign-in" element={<SignIn />} />
+                <Route path="recruit" element={<Recruit />} />
+                <Route path="recruit/posts/:id" element={<PostDetail />} />
+                <Route path="recruit/posts/:id/edit" element={<PostCreate />} />
+                <Route path="find-teammates" element={<FindTeammates />} />
+              </Route>
+            </Routes>
+          </BrowserRouter>
+          <Toaster richColors position="top-center" />
+        </ThemeProvider>
+      </QueryClientProvider>
+    </StrictMode>
+  ),
+  {
+    fallback: ({ error, resetError }) => (
+      <div className="flex min-h-screen items-center justify-center">
+        <div className="text-center">
+          <h1 className="mb-4 text-2xl font-bold">문제가 발생했습니다</h1>
+          <p className="mb-4 text-gray-600">잠시 후 다시 시도해주세요.</p>
+          <button
+            onClick={resetError}
+            className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+          >
+            다시 시도
+          </button>
+        </div>
+      </div>
+    ),
+  }
 );
+
+const container = document.getElementById("root");
+if (container) {
+  const root = createRoot(container);
+  root.render(<SentryErrorBoundary />);
+}