feat(monitoring): add Sentry error tracking integration

ryota-murakami · ryota-murakami · commit 1e2b329b53b9 · 2025-12-26T07:21:29.000+09:00
- Configure Sentry SDK for Next.js with edge and server support
- Add global error boundary for client-side error handling
- Enable source maps and session replay features
diff --git a/.gitignore b/.gitignore
@@ -73,3 +73,6 @@ tests/e2e/.auth/*.json
 # Git worktrees (Crystal)
 /worktrees/
 /worktree-*/
+
+# Sentry Config File
+.env.sentry-build-plugin
diff --git a/app/global-error.tsx b/app/global-error.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import * as Sentry from '@sentry/nextjs'
+import NextError from 'next/error'
+import { memo, useEffect } from 'react'
+
+/**
+ * Global Error Boundary
+ *
+ * Catches unhandled errors at the root level and reports to Sentry.
+ * This component wraps the entire application and provides fallback UI.
+ */
+const GlobalError = memo(function GlobalError({
+  error,
+}: {
+  error: Error & { digest?: string }
+}) {
+  useEffect(() => {
+    Sentry.captureException(error)
+  }, [error])
+
+  return (
+    <html lang="en">
+      <body>
+        {/* `NextError` is the default Next.js error page component. Its type
+        definition requires a `statusCode` prop. However, since the App Router
+        does not expose status codes for errors, we simply pass 0 to render a
+        generic error message. */}
+        <NextError statusCode={0} />
+      </body>
+    </html>
+  )
+})
+
+export default GlobalError
diff --git a/instrumentation-client.ts b/instrumentation-client.ts
@@ -0,0 +1,31 @@
+// 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: 'https://06b1775946774ab1527986b339ea85ed@o1245861.ingest.us.sentry.io/4510597804261376',
+
+  // 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,
+  // 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/instrumentation.ts b/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/next.config.ts b/next.config.ts
@@ -1,3 +1,4 @@
+import { withSentryConfig } from '@sentry/nextjs'
 import { codeInspectorPlugin } from 'code-inspector-plugin'
 import type { NextConfig } from 'next'
 
@@ -63,4 +64,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: 'laststance',
+
+  project: 'gitbix',
+
+  // 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/package.json b/package.json
@@ -50,6 +50,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "@reduxjs/toolkit": "^2.11.2",
+    "@sentry/nextjs": "^10.32.1",
     "@supabase/ssr": "^0.8.0",
     "@supabase/supabase-js": "^2.89.0",
     "@t3-oss/env-nextjs": "^0.13.10",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sentry.edge.config.ts b/sentry.edge.config.ts
diff --git a/sentry.server.config.ts b/sentry.server.config.ts
