feat: sentry

.env.example

@@ -16,4 +16,10 @@ UPSTASH_REDIS_REST_URL=<your-upstash-rest-url>
 UPSTASH_REDIS_REST_TOKEN=<your-upstash-rest-token>
 
 # Resend
-RESEND_API_KEY=<your-resend-api-key>
+RESEND_API_KEY=<your-resend-api-key>
+
+# Sentry
+NEXT_PUBLIC_SENTRY_DSN=<your-sentry-dsn>
+SENTRY_ORG=<your-sentry-org>
+SENTRY_PROJECT=<your-sentry-project>
+SENTRY_AUTH_TOKEN=<your-sentry-auth-token>

.github/workflows/main-ci.yml

@@ -32,6 +32,12 @@ jobs:
       # Resend
       RESEND_API_KEY: ${{ secrets.RESEND_API_KEY }}
 
+      # Sentry
+      NEXT_PUBLIC_SENTRY_DSN: ${{ secrets.NEXT_PUBLIC_SENTRY_DSN }}
+      SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+      SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v4

.github/workflows/pr-ci.yml

@@ -29,6 +29,12 @@ jobs:
       # Resend
       RESEND_API_KEY: ${{ secrets.RESEND_API_KEY }}
 
+      # Sentry
+      NEXT_PUBLIC_SENTRY_DSN: ${{ secrets.NEXT_PUBLIC_SENTRY_DSN }}
+      SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+      SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v4

eslint.config.js

@@ -11,6 +11,7 @@ import playwright from 'eslint-plugin-playwright';
 import * as regexpPlugin from 'eslint-plugin-regexp';
 import pluginSecurity from 'eslint-plugin-security';
 import tseslint from 'typescript-eslint';
+import globals from 'globals';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -75,6 +76,11 @@ export default tseslint.config(
         projectService: true,
         tsconfigRootDir: __dirname,
       },
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+        ...globals.es2024,
+      },
     },
     settings: {
       react: {
@@ -100,6 +106,8 @@ export default tseslint.config(
         { checksVoidReturn: { attributes: false } },
       ],
 
+      '@typescript-eslint/dot-notation': 'off',
+
       '@typescript-eslint/no-unnecessary-condition': [
         'error',
         {

next.config.js

@@ -1,6 +1,7 @@
 import { fileURLToPath } from 'node:url';
 
 import createJiti from 'jiti';
+import { withSentryConfig } from '@sentry/nextjs';
 
 const jiti = createJiti(fileURLToPath(import.meta.url));
 
@@ -25,4 +26,13 @@ const nextConfig = {
   },
 };
 
-export default nextConfig;
+export default withSentryConfig(nextConfig, {
+  org: process.env['SENTRY_ORG'] ?? '',
+  project: process.env['SENTRY_PROJECT'] ?? '',
+  silent: !process.env['CI'],
+  widenClientFileUpload: true,
+  tunnelRoute: '/monitoring',
+  hideSourceMaps: true,
+  disableLogger: true,
+  automaticVercelMonitors: true,
+});

package.json

@@ -18,7 +18,7 @@
     "db:push": "drizzle-kit push",
     "db:studio": "drizzle-kit studio",
     "db:up": "drizzle-kit up",
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "email:dev": "SKIP_ENV_VALIDATION=true email dev --port 3001 --dir src/emails/templates",
     "format": "pnpm format:write",
     "format:check": "prettier \"**/*\" --ignore-unknown --list-different",
@@ -65,6 +65,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@react-email/components": "^0.0.19",
+    "@sentry/nextjs": "^8.8.0",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/react-query": "^5.40.1",
     "@trpc/client": "next",
@@ -131,6 +132,7 @@
     "eslint-plugin-security": "^3.0.0",
     "eslint-plugin-tailwindcss": "^3.17.3",
     "eslint-plugin-testing-library": "^6.2.2",
+    "globals": "^15.4.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.5",
     "markdownlint": "^0.34.0",

sentry.client.config.ts

@@ -0,0 +1,16 @@
+import { env } from '@/env';
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: 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,8 @@
+import { env } from '@/env';
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 1,
+  debug: false,
+});

sentry.server.config.ts

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

src/app/global-error.jsx

@@ -0,0 +1,19 @@
+'use client';
+
+import * as Sentry from '@sentry/nextjs';
+import Error from 'next/error';
+import { useEffect } from 'react';
+
+export default function GlobalError({ error }) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        <Error />
+      </body>
+    </html>
+  );
+}

src/env.ts

@@ -24,16 +24,25 @@ export const env = createEnv({
 
     // Clerk
     CLERK_SECRET_KEY: z.string(),
+
+    // Sentry
+    SENTRY_ORG: z.string(),
+    SENTRY_PROJECT: z.string(),
+    SENTRY_AUTH_TOKEN: z.string(),
   },
   client: {
     // Clerk
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string(),
+
+    // Sentry
+    NEXT_PUBLIC_SENTRY_DSN: z.string().url(),
   },
 
   experimental__runtimeEnv: {
     NODE_ENV: process.env.NODE_ENV,
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
       process.env['NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY'],
+    NEXT_PUBLIC_SENTRY_DSN: process.env['NEXT_PUBLIC_SENTRY_DSN'],
   },
 
   skipValidation: !!process.env['SKIP_ENV_VALIDATION'],

src/instrumentation.ts

@@ -0,0 +1,9 @@
+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');
+  }
+}