dubinc · devkiran · Jun 11, 2025 · Jun 11, 2025 · Jun 11, 2025 · Jun 11, 2025
diff --git a/.gitignore b/.gitignore
@@ -44,4 +44,7 @@ packages/stripe-app/.build/*
 .vscode
 *.csv
 *.ndjson
-.vitest
+.vitest
+
+# sentry
+.env.sentry-build-plugin
diff --git a/apps/web/.env.example b/apps/web/.env.example
@@ -144,4 +144,14 @@ PAYPAL_WEBHOOK_ID=
 
 # Stripe Integration
 STRIPE_APP_SECRET_KEY_TEST=
-STRIPE_APP_SECRET_KEY=
+STRIPE_APP_SECRET_KEY=
+
+# Sentry
+NEXT_PUBLIC_SENTRY_DSN=
+
+# Sentry CLI (Set these values if you want to upload source maps to Sentry)
+# https://docs.sentry.io/platforms/javascript/guides/nextjs/sourcemaps/
+SENTRY_URL=
+SENTRY_ORG=
+SENTRY_PROJECT=
+SENTRY_AUTH_TOKEN=
diff --git a/apps/web/app/global-error.tsx b/apps/web/app/global-error.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import NextError from "next/error";
+import { useEffect } from "react";
+
+export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <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>
+  );
+}
diff --git a/apps/web/instrumentation-client.ts b/apps/web/instrumentation-client.ts
@@ -0,0 +1,10 @@
+// This file configures the initialization of Sentry on the client.
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  debug: false,
+});
+
+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/lib/api/errors.ts b/apps/web/lib/api/errors.ts
@@ -1,5 +1,6 @@
 import z from "@/lib/zod";
 import { capitalize, currencyFormatter } from "@dub/utils";
+import * as Sentry from "@sentry/nextjs";
 import { NextResponse } from "next/server";
 import { ZodError } from "zod";
 import { generateErrorMessage } from "zod-error";
@@ -122,7 +123,7 @@ export function fromZodError(error: ZodError): ErrorResponse {
 }
 
 export function handleApiError(error: any): ErrorResponse & { status: number } {
-  console.error("API error occurred", error.message);
+  console.error(error.message);
 
   // Zod errors
   if (error instanceof ZodError) {
@@ -159,6 +160,8 @@ export function handleApiError(error: any): ErrorResponse & { status: number } {
     };
   }
 
+  Sentry.captureException(error);
+
   // Fallback
   // Unhandled errors are not user-facing, so we don't expose the actual error
   return {

diff --git a/apps/web/next.config.js b/apps/web/next.config.js
@@ -1,8 +1,9 @@
 const { PrismaPlugin } = require("@prisma/nextjs-monorepo-workaround-plugin");
 const { withAxiom } = require("next-axiom");
+const { withSentryConfig } = require("@sentry/nextjs");
 
 /** @type {import('next').NextConfig} */
-module.exports = withAxiom({
+const nextConfig = withAxiom({
   reactStrictMode: false,
   transpilePackages: [
     "shiki",
@@ -19,6 +20,7 @@ module.exports = withAxiom({
     ],
     ...(process.env.NODE_ENV === "production" && {
       esmExternals: "loose",
+      instrumentationHook: true,
     }),
   },
   webpack: (config, { webpack, isServer }) => {
@@ -200,3 +202,23 @@ module.exports = withAxiom({
     ];
   },
 });
+
+module.exports = withSentryConfig(nextConfig, {
+  org: "dubinc",
+  project: "web",
+
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: false,
+
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+
+  debug: false,
+
+  sourcemaps: {
+    disable: true,
+  },
+});
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -36,6 +36,7 @@
     "@prisma/nextjs-monorepo-workaround-plugin": "^6.0.1",
     "@radix-ui/react-hover-card": "^1.1.1",
     "@react-pdf/renderer": "^4.1.5",
+    "@sentry/nextjs": "^9.28.1",
     "@sindresorhus/slugify": "^2.2.1",
     "@stripe/stripe-js": "^7.3.1",
     "@tanstack/react-table": "^8.17.3",

diff --git a/apps/web/sentry.edge.config.ts b/apps/web/sentry.edge.config.ts
@@ -0,0 +1,11 @@
+// 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.
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  debug: false,
+  environment: process.env.VERCEL_ENV || process.env.NODE_ENV,
+  release: process.env.VERCEL_GIT_COMMIT_SHA,
+});
diff --git a/apps/web/sentry.server.config.ts b/apps/web/sentry.server.config.ts
@@ -0,0 +1,10 @@
+// This file configures the initialization of Sentry on the server.
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  debug: false,
+  environment: process.env.VERCEL_ENV || process.env.NODE_ENV,
+  release: process.env.VERCEL_GIT_COMMIT_SHA,
+});