feat(monitoring): add Sentry error tracking with user feedback widget

guillermoscript · claude · guillermoscript · commit 54243a543299 · 2026-03-30T16:51:59.000+02:00
- instrumentation.ts: server-side Sentry init (Node.js + Edge runtimes)
- instrumentation-client.ts: client-side Sentry init with replay, feedback widget
- next.config.ts: wrapped with withSentryConfig for source maps
- app/global-error.tsx: captures unhandled errors to Sentry

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/app/global-error.tsx b/app/global-error.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import { useEffect } from "react";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        <h2>Something went wrong!</h2>
+        <button onClick={() => reset()}>Try again</button>
+      </body>
+    </html>
+  );
+}
diff --git a/instrumentation-client.ts b/instrumentation-client.ts
@@ -0,0 +1,14 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://e40fdc0a3e5965c1862e6594a8c2631f@o4507789962706944.ingest.us.sentry.io/4507789965721600",
+  tracesSampleRate: 1.0,
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+  integrations: [
+    Sentry.replayIntegration(),
+    Sentry.feedbackIntegration({
+      colorScheme: "system",
+    }),
+  ],
+});
diff --git a/instrumentation.ts b/instrumentation.ts
@@ -0,0 +1,19 @@
+import * as Sentry from "@sentry/nextjs";
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    Sentry.init({
+      dsn: "https://e40fdc0a3e5965c1862e6594a8c2631f@o4507789962706944.ingest.us.sentry.io/4507789965721600",
+      tracesSampleRate: 1.0,
+    });
+  }
+
+  if (process.env.NEXT_RUNTIME === "edge") {
+    Sentry.init({
+      dsn: "https://e40fdc0a3e5965c1862e6594a8c2631f@o4507789962706944.ingest.us.sentry.io/4507789965721600",
+      tracesSampleRate: 1.0,
+    });
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError;
diff --git a/next.config.ts b/next.config.ts
@@ -1,5 +1,6 @@
 import type { NextConfig } from "next";
 import createNextIntlPlugin from 'next-intl/plugin';
+import { withSentryConfig } from "@sentry/nextjs";
 
 const withNextIntl = createNextIntlPlugin('./i18n.ts');
 
@@ -33,4 +34,11 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default withNextIntl(nextConfig);
+export default withSentryConfig(withNextIntl(nextConfig), {
+  org: "guillermoscript",
+  project: "lms-front",
+  silent: !process.env.CI,
+  widenClientFileUpload: true,
+  disableLogger: true,
+  automaticVercelMonitors: true,
+});
