Merge pull request #291 from manNomi/init/centry

manNomi · web-flow · commit f2fe4c068fad · 2025-10-26T00:28:25.000+09:00
feat: 센트리 적용
diff --git a/instrumentation.ts b/instrumentation.ts
@@ -0,0 +1,9 @@
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("./sentry.server.config");
+  }
+
+  if (process.env.NEXT_RUNTIME === "edge") {
+    await import("./sentry.edge.config");
+  }
+}
diff --git a/next.config.mjs b/next.config.mjs
@@ -24,6 +24,8 @@ const nextConfig = {
   experimental: {
     optimizeCss: true,
     gzipSize: true,
+    // Sentry instrumentation 활성화 (Web Vitals 수집에 필요)
+    instrumentationHook: true,
   },
   eslint: {
     // Warning: This allows production builds to successfully complete even if
diff --git a/sentry.client.config.ts b/sentry.client.config.ts
@@ -5,6 +5,10 @@ Sentry.init({
   environment: process.env.SENTRY_ENVIRONMENT || "development",
   tracesSampleRate: 1.0,
 
+  // Replay 샘플링 설정
+  replaysSessionSampleRate: 0.1, // 일반 세션의 10%
+  replaysOnErrorSampleRate: 1.0, // 에러 발생 시 100%
+
   integrations: [
     Sentry.browserTracingIntegration({
       tracePropagationTargets: [
@@ -14,6 +18,8 @@ Sentry.init({
         "solid-connect",
         /^https:\/\/(www\.)?solid[\-]?connection\.com/,
       ],
+      // Web Vitals 자동 수집 활성화
+      enableInp: true, // Interaction to Next Paint
     }),
     Sentry.replayIntegration({
       maskAllText: true,
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,6 +6,8 @@ import localFont from "next/font/local";
 import GlobalLayout from "@/components/layout/GlobalLayout";
 import ToastContainer from "@/components/ui/Toast";
 
+import { WebVitals } from "./web-vitals";
+
 import { AlertProvider } from "@/context/AlertContext";
 import QueryProvider from "@/lib/react-query/QueryProvider";
 import "@/styles/globals.css";
@@ -104,6 +106,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => (
       <body className={pretendard.className}>
         <AppleScriptLoader />
         <GoogleAnalytics gaId="G-V1KLYZC1DS" />
+        <WebVitals />
         <QueryProvider>
           <GlobalLayout>{children}</GlobalLayout>
           <ToastContainer />
diff --git a/src/app/web-vitals.tsx b/src/app/web-vitals.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useReportWebVitals } from "next/web-vitals";
+
+import * as Sentry from "@sentry/nextjs";
+
+/**
+ * Next.js Web Vitals를 Sentry로 전송하는 컴포넌트
+ *
+ * 측정되는 메트릭:
+ * - CLS (Cumulative Layout Shift): 레이아웃 안정성
+ * - FCP (First Contentful Paint): 첫 콘텐츠 표시 시간
+ * - FID (First Input Delay): 첫 입력 지연 (INP로 대체 예정)
+ * - INP (Interaction to Next Paint): 상호작용 응답성
+ * - LCP (Largest Contentful Paint): 최대 콘텐츠 표시 시간
+ * - TTFB (Time to First Byte): 첫 바이트까지의 시간
+ */
+export function WebVitals() {
+  useReportWebVitals((metric) => {
+    // Web Vitals를 Sentry 트랜잭션으로 전송
+    const { name, value, rating, navigationType, id } = metric;
+
+    // Sentry의 현재 트랜잭션에 measurement 추가 (v7 API)
+    const transaction = Sentry.getCurrentHub().getScope()?.getTransaction();
+    if (transaction) {
+      // CLS는 unitless 메트릭이므로 unit을 생략, 나머지는 millisecond
+      if (name === "CLS") {
+        transaction.setMeasurement(name, value);
+      } else {
+        transaction.setMeasurement(name, value, "millisecond");
+      }
+      transaction.setTag(`${name}.rating`, rating);
+      transaction.setTag("navigation.type", navigationType);
+    }
+
+    // 각 메트릭을 개별 컨텍스트 키로 저장 (덮어쓰기 방지)
+    Sentry.getCurrentScope().setContext(`web-vitals.${name}`, {
+      value,
+      rating,
+      navigationType,
+      id,
+    });
+
+    // 개발 환경에서는 콘솔에도 출력
+    if (process.env.NODE_ENV === "development") {
+      console.log(`[Web Vitals] ${name}:`, {
+        value: name === "CLS" ? value.toFixed(3) : `${Math.round(value)}ms`,
+        rating,
+        navigationType,
+      });
+    }
+  });
+
+  return null;
+}
