knu-matzip · leeleeleeleejun · Dec 24, 2025 · Dec 24, 2025 · coderabbitai · Dec 24, 2025
diff --git a/apps/web/.gitignore b/apps/web/.gitignore
@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# Sentry Config File
+.env.sentry-build-plugin
diff --git a/apps/web/app/_lib/axiosInstance.ts b/apps/web/app/_lib/axiosInstance.ts
@@ -3,6 +3,7 @@ import axios, {
   AxiosResponse,
   InternalAxiosRequestConfig,
 } from 'axios'
+import * as Sentry from '@sentry/nextjs'
 import { getToken } from '@/_apis/services/login'
 import { getCookie } from '@/_utils/getCookie'
 
@@ -33,6 +34,21 @@ axiosInstance.interceptors.response.use(
     const originalRequest = error.config as InternalAxiosRequestConfig & {
       _retry?: boolean
     }
+
+    // Todo: 상태 코드 400 전체 제외할지 말지 데이터를 보고 정하기
+    // error.response.status >= 500 &&
+    // error.response.status < 600
+    if (error.response?.status !== 401) {
+      Sentry.captureException(error, {
+        extra: {
+          url: originalRequest?.url,
+          method: originalRequest?.method,
+          status: error.response?.status,
+          data: error.response?.data,
+        },
+      })
+    }
-    if (error.response?.status !== 401) {
-      Sentry.captureException(error, {
-        extra: {
-          url: originalRequest?.url,
-          method: originalRequest?.method,
-          status: error.response?.status,
-          data: error.response?.data,
-        },
-      })
-    }
+    if (error.response?.status !== 401) {
+      Sentry.captureException(error, {
+        extra: {
+          url: originalRequest?.url,
+          method: originalRequest?.method,
+          status: error.response?.status,
+        },
+      })
+    }
-    if (error.response?.status !== 401) {
-      Sentry.captureException(error, {
-        extra: {
-          url: originalRequest?.url,
-          method: originalRequest?.method,
-          status: error.response?.status,
-          data: error.response?.data,
-        },
-      })
-    }
+    if (error.response?.status !== 401) {
+      Sentry.captureException(error, {
+        extra: {
+          url: originalRequest?.url,
+          method: originalRequest?.method,
+          status: error.response?.status,
+        },
+      })
+    }
+
     if (error.response?.status === 401 && !originalRequest._retry) {
       originalRequest._retry = true
 

diff --git a/apps/web/app/error.tsx b/apps/web/app/error.tsx
@@ -1,25 +1,44 @@
 'use client'
 
 import Link from 'next/link'
+import { useEffect } from 'react'
+import * as Sentry from '@sentry/nextjs'
 import { Text } from '@repo/ui/components/Text'
 import { Icon } from '@repo/ui/components/Icon'
 import { Button } from '@repo/ui/components/Button'
 import { Column } from '@repo/ui/components/Layout'
 import { CLIENT_PATH } from '@/_constants/path'
 
-export default function ErrorPage() {
+type Props = {
+  error: Error & { digest?: string }
+  reset: VoidFunction
+}
+
+export default function ErrorPage({ error, reset }: Props) {
+  useEffect(() => {
+    Sentry.captureException(error)
+  }, [error])
+
   return (
-    <Column className={'flex-1 items-center justify-center gap-20'}>
+    <Column className={'gap-30 flex-1 items-center justify-center'}>
       <Column className={'items-center gap-2'}>
         <Icon type={'logo'} size={150} />
         <div className={'text-center'}>
           <Text fontSize={'lg'}>에러가 발생했어요</Text>
           <Text fontSize={'lg'}>페이지를 새로고침해주세요</Text>
         </div>
       </Column>
-      <Button as={Link} size={'medium'} href={CLIENT_PATH.MAIN}>
-        홈으로
-      </Button>
+      <Column className={'items-center gap-2'}>
+        <Button size={'medium'} onClick={reset} className='mb-2'>
+          다시 시도
+        </Button>
+        <Link
+          href={CLIENT_PATH.MAIN}
+          className='text-sm text-gray-400 underline'
+        >
+          홈으로 이동
+        </Link>
+      </Column>
     </Column>
   )
 }
diff --git a/apps/web/app/global-error.tsx b/apps/web/app/global-error.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import * as Sentry from '@sentry/nextjs'
+import { useEffect } from 'react'
+import { Column } from '@repo/ui/components/Layout'
+import { Text } from '@repo/ui/components/Text'
+import { Button } from '@repo/ui/components/Button'
+
+export default function GlobalError({
+  error,
+}: {
+  error: Error & { digest?: string }
+}) {
+  useEffect(() => {
+    Sentry.captureException(error)
+  }, [error])
+
+  return (
+    <html lang='ko'>
+      <body>
+        <div className='flex h-screen w-full items-center justify-center bg-white'>
+          <Column className={'items-center gap-10'}>
+            <div className={'text-center'}>
+              <Text fontSize={'2xl'} fontWeight='bold'>
+                시스템에 문제가 발생했습니다
+              </Text>
+              <Text className='mt-2 text-gray-500'>
+                잠시 후 다시 시도해주세요.
+              </Text>
+            </div>
+            <Button size={'medium'} onClick={() => window.location.reload()}>
+              새로고침
+            </Button>
+          </Column>
+        </div>
+      </body>
+    </html>
+  )
+}
diff --git a/apps/web/instrumentation-client.ts b/apps/web/instrumentation-client.ts
@@ -0,0 +1,33 @@
+// This file configures the initialization of Sentry on the client.
+// The added config here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs'
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  enabled: process.env.NODE_ENV === 'production',
+
+  // Add optional integrations for additional features
+  integrations: [Sentry.replayIntegration()],
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
-  tracesSampleRate: 1,
+  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1,
-  tracesSampleRate: 1,
+  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1,
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // Define how likely Replay events are sampled.
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // Define how likely Replay events are sampled when an error occurs.
+  replaysOnErrorSampleRate: 1.0,
+
+  // Enable sending user PII (Personally Identifiable Information)
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+})
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart
diff --git a/apps/web/instrumentation.ts b/apps/web/instrumentation.ts
@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs'
+
+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')
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError
diff --git a/apps/web/next.config.ts b/apps/web/next.config.ts
@@ -1,3 +1,4 @@
+import { withSentryConfig } from '@sentry/nextjs';
 import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
@@ -66,4 +67,40 @@ const nextConfig: NextConfig = {
   },
 }
 
-export default nextConfig
+export default withSentryConfig(nextConfig, {
+  // For all available options, see:
+  // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+
+  org: "ss-vp",
+
+  project: "javascript-nextjs",
+
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
+
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  tunnelRoute: "/monitoring",
+
+  webpack: {
+    // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+    // See the following for more information:
+    // https://docs.sentry.io/product/crons/
+    // https://vercel.com/docs/cron-jobs
+    automaticVercelMonitors: true,
+
+    // Tree-shaking options for reducing bundle size
+    treeshake: {
+      // Automatically tree-shake Sentry logger statements to reduce bundle size
+      removeDebugLogging: true,
+    },
+  },
+});
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -21,6 +21,7 @@
     "@heroui/theme": "catalog:",
     "@hookform/resolvers": "^5.2.1",
     "@repo/ui": "workspace:*",
+    "@sentry/nextjs": "^10",
     "@suspensive/react": "^3.3.2",
     "@tanstack/react-query": "catalog:",
     "@tanstack/react-query-devtools": "catalog:",

diff --git a/apps/web/sentry.edge.config.ts b/apps/web/sentry.edge.config.ts
@@ -0,0 +1,22 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs'
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  enabled: process.env.NODE_ENV === 'production',
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
-  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-  tracesSampleRate: 1,
+  // Adjust this value based on your traffic volume and budget
+  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1,
-  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-  tracesSampleRate: 1,
+  // Adjust this value based on your traffic volume and budget
+  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1,
+
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // Enable sending user PII (Personally Identifiable Information)
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+})
diff --git a/apps/web/sentry.server.config.ts b/apps/web/sentry.server.config.ts
@@ -0,0 +1,21 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs'
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  enabled: process.env.NODE_ENV === 'production',
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
-  tracesSampleRate: 1,
+  // Adjust based on your traffic - 0.1 = 10% of transactions
+  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1,
-  tracesSampleRate: 1,
+  // Adjust based on your traffic - 0.1 = 10% of transactions
+  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1,
+
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // Enable sending user PII (Personally Identifiable Information)
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+})