[Feat/#75] Sentry 도입

.gitignore

@@ -23,4 +23,9 @@ dist-ssr
 *.sln
 *.sw?
 
-.env
+# TypeScript 빌드 캐시 파일
+*.tsbuildinfo
+
+.env
+# Sentry Config File
+.env.sentry-build-plugin

package.json

@@ -14,6 +14,8 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.13.3",
+    "@sentry/react": "^8.54.0",
+    "@sentry/vite-plugin": "^3.1.2",
     "@tanstack/react-query": "^5.56.2",
     "@tanstack/react-query-devtools": "^5.62.16",
     "axios": "^1.7.7",

src/main.tsx

@@ -1,9 +1,25 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import * as Sentry from "@sentry/react";
+import App from "./App.tsx";
 
-createRoot(document.getElementById('root')!).render(
+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: ["localhost:5173", "https:yeolmae.store"],
+  // 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.
+});
+
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
-  </StrictMode>,
-)
+  </StrictMode>
+);

src/pages/Admin/page/AdminPage/DeliveryCheck/DeliveryCheck.tsx

@@ -66,6 +66,13 @@ const DeliveryCheck = () => {
           )}
         </div>
       </div>
+      <button
+        onClick={() => {
+          throw new Error("This is your first error!");
+        }}
+      >
+        Break the world
+      </button>
     </div>
   );
 };

vite.config.js

@@ -1,3 +1,4 @@
+import { sentryVitePlugin } from "@sentry/vite-plugin";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import tsconfigPaths from "vite-tsconfig-paths";
@@ -6,7 +7,7 @@ import svgr from "vite-plugin-svgr";
 export default defineConfig({
     plugins: [
         react({
-            jsxImportSource: '@emotion/react',
+            jsxImportSource: "@emotion/react",
         }),
         tsconfigPaths(),
         svgr({
@@ -15,5 +16,12 @@ export default defineConfig({
                 memo: true,
             },
         }),
+        sentryVitePlugin({
+            org: "taeseung-yoo",
+            project: "javascript-react",
+        }),
     ],
+    build: {
+        sourcemap: true,
+    },
 });

vite.config.ts

@@ -1,13 +1,13 @@
+import { sentryVitePlugin } from "@sentry/vite-plugin";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import tsconfigPaths from "vite-tsconfig-paths";
 import svgr from "vite-plugin-svgr";
-
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     react({
-      jsxImportSource: '@emotion/react',
+      jsxImportSource: "@emotion/react",
     }),
     tsconfigPaths(),
     svgr({
@@ -16,5 +16,13 @@ export default defineConfig({
         memo: true,
       },
     }),
+    sentryVitePlugin({
+      org: "taeseung-yoo",
+      project: "javascript-react",
+    }),
   ],
+
+  build: {
+    sourcemap: true,
+  },
 });