feat: setup sentry

.env.example

@@ -41,3 +41,8 @@ UPLOAD_ACCESS_KEY_ID="captable"
 UPLOAD_SECRET_ACCESS_KEY="password"
 UPLOAD_BUCKET_PUBLIC="captable-public-bucket"
 UPLOAD_BUCKET_PRIVATE="captable-private-bucket"
+
+# Sentry
+SENTRY_ORG=YOUR_SENTRY_ORG
+SENTRY_PROJECT=YOUR_SENTRY_PROJECT
+NEXT_PUBLIC_SENTRY_DSN=YOUR_SENTRY_DSN

.gitignore

@@ -54,3 +54,6 @@ yarn-error.log*
 /prisma/enums.ts
 
 /.pnpm-store
+
+# Sentry Config File
+.env.sentry-build-plugin

next.config.js

@@ -1,4 +1,5 @@
 import withBundleAnalyzer from "@next/bundle-analyzer";
+import { withSentryConfig } from "@sentry/nextjs";
 
 const bundleAnalyzer = withBundleAnalyzer({
   enabled: process.env.ANALYZE === "true",
@@ -11,7 +12,7 @@ const bundleAnalyzer = withBundleAnalyzer({
 await import("./src/env.js");
 
 /** @type {import("next").NextConfig} */
-const config = {
+const nextConfig = {
   output: process.env.DOCKER_OUTPUT ? "standalone" : undefined,
   images: {
     remotePatterns: [
@@ -43,4 +44,18 @@ const config = {
   },
 };
 
-export default bundleAnalyzer(config);
+const sentryOptions = {
+  org: process.env.SENTRY_ORG,
+  project: process.env.SENTRY_PROJECT,
+  silent: true,
+  widenClientFileUpload: true,
+  hideSourceMaps: true,
+  disableLogger: true,
+  automaticVercelMonitors: true,
+};
+
+const hasSentry = !!process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+export default hasSentry
+  ? withSentryConfig(bundleAnalyzer(nextConfig), sentryOptions)
+  : bundleAnalyzer(nextConfig);

package.json

@@ -55,6 +55,7 @@
     "@radix-ui/react-toolbar": "^1.0.4",
     "@react-pdf/renderer": "^3.4.4",
     "@remixicon/react": "^4.0.1",
+    "@sentry/nextjs": "^8",
     "@simplewebauthn/browser": "^10.0.0",
     "@simplewebauthn/server": "^10.0.0",
     "@sindresorhus/slugify": "^2.2.1",

sentry.client.config.ts

@@ -0,0 +1,15 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 1,
+  debug: false,
+  replaysOnErrorSampleRate: 1.0,
+  replaysSessionSampleRate: 0.1,
+  integrations: [
+    Sentry.replayIntegration({
+      maskAllText: true,
+      blockAllMedia: true,
+    }),
+  ],
+});

sentry.edge.config.ts

@@ -0,0 +1,7 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 1,
+  debug: false,
+});

sentry.server.config.ts

@@ -0,0 +1,7 @@
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 1,
+  debug: false,
+});

src/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 lang="en">
+      <body>
+        <NextError statusCode={undefined as never} />
+      </body>
+    </html>
+  );
+}

src/env.js

@@ -52,6 +52,10 @@ export const env = createEnv({
     // stripe
     STRIPE_API_KEY: z.string().optional(),
     STRIPE_WEBHOOK_SECRET: z.string().optional(),
+
+    // sentry
+    SENTRY_ORG: z.string().optional(),
+    SENTRY_PROJECT: z.string().optional(),
   },
 
   /**
@@ -63,6 +67,7 @@ export const env = createEnv({
     NEXT_PUBLIC_BASE_URL: z.string(),
     NEXT_PUBLIC_UPLOAD_DOMAIN: z.string().optional(),
     NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string().optional(),
+    NEXT_PUBLIC_SENTRY_DSN: z.string().optional(),
   },
 
   /**

src/instrumentation.ts

@@ -2,5 +2,11 @@ export async function register() {
   if (process.env.NEXT_RUNTIME === "nodejs") {
     const { startJobs } = await import("@/jobs/start");
     await startJobs();
+
+    await import("../sentry.server.config");
+  }
+
+  if (process.env.NEXT_RUNTIME === "edge") {
+    await import("../sentry.edge.config");
   }
 }