Integrate Sentry error monitoring and remove Discord webhook alerts

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+package-lock.json
 
 # testing
 /coverage

next.config.js

@@ -1,9 +1,11 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
+const { withSentryConfig } = require("@sentry/nextjs")
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
     enabled: process.env.ANALYZE === "true"
 })
 
-module.exports = withBundleAnalyzer({
+const nextConfig = {
     experimental: {
         ppr: true
     },
@@ -16,7 +18,9 @@ module.exports = withBundleAnalyzer({
         APP_VERSION: process.env.APP_VERSION,
         BUNGIE_API_KEY: process.env.BUNGIE_API_KEY,
         RAIDHUB_API_URL: process.env.RAIDHUB_API_URL ?? "https://api.raidhub.io",
-        RAIDHUB_API_KEY: process.env.RAIDHUB_API_KEY
+        RAIDHUB_API_KEY: process.env.RAIDHUB_API_KEY,
+        NEXT_PUBLIC_SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN,
+        NEXT_PUBLIC_APP_ENV: process.env.APP_ENV
     },
     images: {
         remotePatterns: [
@@ -49,4 +53,19 @@ module.exports = withBundleAnalyzer({
             source: "/:vanity([a-zA-Z0-9]+)"
         }
     ]
+}
+
+module.exports = withSentryConfig(withBundleAnalyzer(nextConfig), {
+    org: process.env.SENTRY_ORG,
+    project: process.env.SENTRY_PROJECT,
+    silent: !process.env.CI,
+    widenClientFileUpload: true,
+    tunnelRoute: "/monitoring",
+    hideSourceMaps: true,
+    webpack: {
+        treeshake: {
+            removeDebugLogging: true
+        },
+        automaticVercelMonitors: true
+    }
 })

package.json

@@ -39,6 +39,7 @@
         "@radix-ui/react-slot": "^1.2.2",
         "@radix-ui/react-tabs": "^1.1.11",
         "@radix-ui/react-tooltip": "^1.2.6",
+        "@sentry/nextjs": "^10.38.0",
         "@tailwindcss/postcss": "^4.1.5",
         "@tanstack/react-query": "4.36.1",
         "@trpc/client": "10.44.1",

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.0,
+    environment: process.env.APP_ENV ?? "development"
+})

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.0,
+    environment: process.env.APP_ENV ?? "development"
+})

src/app/error.tsx

@@ -1,5 +1,6 @@
 "use client" // Error components must be Client Components
 
+import * as Sentry from "@sentry/nextjs"
 import { useParams, usePathname, useSearchParams } from "next/navigation"
 import { useEffect } from "react"
 import { type ErrorBoundaryProps } from "~/types/generic"
@@ -22,6 +23,7 @@ export default function ErrorBoundary({ error, reset }: ErrorBoundaryProps) {
                 stack: error.stack
             }
         }
+        Sentry.captureException(error)
         console.error(err)
     }, [error, params, pathname, searchParams])
 

src/app/global-error.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import * as Sentry from "@sentry/nextjs"
 import { useEffect } from "react"
 import { PageWrapper } from "~/components/PageWrapper"
 
@@ -11,6 +12,7 @@ export default function GlobalError({
     reset: () => void
 }) {
     useEffect(() => {
+        Sentry.captureException(error)
         console.error(error)
     }, [error])
 

src/instrumentation-client.ts

@@ -0,0 +1,12 @@
+import * as Sentry from "@sentry/nextjs"
+
+Sentry.init({
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    tracesSampleRate: 1.0,
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0,
+    integrations: [Sentry.replayIntegration()],
+    environment: process.env.NEXT_PUBLIC_APP_ENV ?? "development"
+})
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart

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")
+    }
+}

src/lib/server/auth/index.ts

@@ -1,5 +1,6 @@
 import "server-only"
 
+import * as Sentry from "@sentry/nextjs"
 import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library"
 import NextAuth from "next-auth"
 import DiscordProvider from "next-auth/providers/discord"
@@ -37,6 +38,7 @@ const {
     },
     logger: {
         error(err) {
+            Sentry.captureException(err)
             console.error(err)
             if (err.cause instanceof PrismaClientKnownRequestError) {
                 console.error("Error Metadata", JSON.stringify(err.cause.meta, null, 2))

src/lib/server/trpc/error-handler.ts

@@ -1,5 +1,5 @@
+import * as Sentry from "@sentry/nextjs"
 import type { ProcedureType, TRPCError } from "@trpc/server"
-import { DiscordColors, sendDiscordWebhook } from "~/services/discord/webhook"
 
 export const trpcErrorHandler = async ({
     error,
@@ -15,53 +15,13 @@ export const trpcErrorHandler = async ({
 }) => {
     console.error(`❌ tRPC failed on ${path ?? "<no-path>"}:`, error)
 
-    if (process.env.NODE_ENV === "production" && process.env.TRPC_ALERTS_WEBHOOK_URL) {
-        await sendDiscordWebhook(process.env.TRPC_ALERTS_WEBHOOK_URL, {
-            embeds: [
-                {
-                    color: DiscordColors.RED,
-                    fields: [
-                        {
-                            name: error.cause?.constructor.name ?? error.name,
-                            value: error.cause?.message ?? error.message,
-                            inline: false
-                        },
-                        {
-                            name: "Path",
-                            value: `\`${path}\``,
-                            inline: false
-                        },
-                        {
-                            name: "Input",
-                            value: `\`\`\`json\n${JSON.stringify(input ?? {}, null, 2).slice(
-                                0,
-                                1006
-                            )}\`\`\``,
-                            inline: false
-                        },
-                        {
-                            name: "Stack Trace",
-                            value:
-                                error.stack
-                                    ?.split("\n")
-                                    .slice(1, 5)
-                                    .map(line => `\`\`\`${line.trim().replaceAll("at ", "")}\`\`\``)
-                                    .join("") ?? "",
-                            inline: false
-                        },
-                        {
-                            name: "Source",
-                            value: source,
-                            inline: false
-                        },
-                        {
-                            name: "App Version",
-                            value: `\`${process.env.APP_VERSION ?? "N/A"}\``,
-                            inline: false
-                        }
-                    ]
-                }
-            ]
+    // Capture exception with Sentry with additional context
+    Sentry.withScope(scope => {
+        scope.setContext("trpc", {
+            path: path ?? "<no-path>",
+            input: input,
+            source: source
         })
-    }
+        Sentry.captureException(error)
+    })
 }