feat: integrate Sentry for enhanced error tracking and logging

- Added Sentry for both client and server error tracking, capturing exceptions and logging relevant information.
- Updated logging middleware to include request and response timing, with Sentry breadcrumbs for better observability.
- Enhanced database logging with Sentry integration to capture SQL queries and errors.
- Updated vars.example.yml to include Sentry DSN and related configuration for improved observability.

Author: regenrek

.cursorignore

@@ -1,3 +1,2 @@
-.env
 public/**
 drizzle/meta/

infra/ansible/group_vars/constructa/vars.example.yml

@@ -97,3 +97,10 @@ constructa_env:
   POLAR_PRODUCT_BUSINESS_MONTHLY: ''
   POLAR_PRODUCT_CREDITS_50: ''
   POLAR_PRODUCT_CREDITS_100: ''
+
+  SENTRY_DSN: ''
+  VITE_SENTRY_DSN: ''
+  VITE_SENTRY_TRACES_SAMPLE_RATE: '1.0'
+  VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE: '0.1'
+  VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE: '1.0'
+  SENTRY_TRACES_SAMPLE_RATE: '1.0'

package.json

@@ -70,6 +70,8 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@sentry/node": "^8.55.0",
+    "@sentry/react": "^8.55.0",
     "@t3-oss/env-core": "^0.13.8",
     "@tanstack/react-query": "^5.89.0",
     "@tanstack/react-query-devtools": "^5.89.0",

pnpm-lock.yaml

@@ -1,5 +1,6 @@
 import { ErrorComponent, Link, rootRouteId, useMatch, useRouter } from "@tanstack/react-router"
 import type { ErrorComponentProps } from "@tanstack/react-router"
+import * as Sentry from "@sentry/react"
 
 export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
     const router = useRouter()
@@ -9,6 +10,11 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
     })
 
     console.error("DefaultCatchBoundary Error:", error)
+    try {
+        Sentry.captureException(error)
+    } catch {
+        // ignore if Sentry not configured
+    }
 
     return (
         <div className="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 p-4">

src/components/DefaultCatchBoundary.tsx

@@ -1,8 +1,33 @@
 import { SignedIn, SignedOut } from '@daveyplate/better-auth-ui';
 import { Link } from '@tanstack/react-router';
+import * as Sentry from '@sentry/react';
+import { useCallback } from 'react';
+import { ClientOnly } from './client-only';
 import { ModeToggle } from './mode-toggle';
 import { Button } from './ui/button';
-import { ClientOnly } from './client-only';
+
+function DevSentryButton() {
+  const handleClick = useCallback(() => {
+    const err = new Error('Manual Sentry test (client)')
+    console.info('[sentry] dispatching manual client error for verification')
+    Sentry.captureException(err)
+  }, [])
+
+  if (!import.meta.env.DEV) return null
+
+  return (
+    <ClientOnly fallback={null}>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={handleClick}
+        className="text-xs"
+      >
+        Test Sentry
+      </Button>
+    </ClientOnly>
+  )
+}
 
 export function Header() {
   return (
@@ -62,6 +87,8 @@ export function Header() {
             <ModeToggle />
           </ClientOnly>
 
+          <DevSentryButton />
+
           <SignedOut>
             <Link to="/auth/$pathname" params={{ pathname: 'sign-in' }}>
               <Button className="rounded-full bg-primary px-6 font-medium text-primary-foreground text-sm hover:bg-primary/90">

src/components/Header.tsx

@@ -1,9 +1,13 @@
 import { drizzle } from 'drizzle-orm/postgres-js';
 import postgres from 'postgres';
 
-import * as schema from './schema';
+import * as schema from './schema'
 
-const connectionString = process.env.DATABASE_URL;
+import { DefaultLogger, LogWriter } from 'drizzle-orm/logger'
+import * as Sentry from '@sentry/node'
+import { redact } from '~/lib/security/token-redaction'
+
+const connectionString = process.env.DATABASE_URL
 
 if (!connectionString) {
   throw new Error('DATABASE_URL is not defined');
@@ -14,9 +18,32 @@ const queryClient = postgres(connectionString, {
   // rejects prepared statements (e.g. Cloudflare tunnels). Flip to true if your
   // environment prefers prepared statements.
   prepare: false,
-});
+})
+
+class SentryQueryWriter implements LogWriter {
+  write(message: string) {
+    const msg = redact(message)
+    try {
+      Sentry.addBreadcrumb({
+        category: 'db.sql',
+        level: 'info',
+        message: msg,
+      })
+    } catch {
+      // no-op if Sentry not initialized
+    }
+    // Also echo in dev to stdout to aid local debugging
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.debug('[SQL]', msg)
+    }
+  }
+}
+
+const drizzleLogger = new DefaultLogger({ writer: new SentryQueryWriter() })
 
 export const db = drizzle(queryClient, {
   schema,
   casing: 'snake_case',
-});
+  logger: drizzleLogger,
+})

src/db/db-config.ts

@@ -0,0 +1,77 @@
+import * as Sentry from '@sentry/react'
+import { redact } from '~/lib/security/token-redaction'
+
+const dsn = import.meta.env.VITE_SENTRY_DSN as string | undefined
+
+if (dsn) {
+  Sentry.init({
+    dsn,
+    environment: import.meta.env.MODE,
+    debug: import.meta.env.DEV,
+    // v8-style integrations
+    integrations: [
+      Sentry.browserTracingIntegration(),
+      Sentry.captureConsoleIntegration({ levels: ['error', 'warn'] }),
+      // Added but sampling below keeps Replay off unless errors occur
+      Sentry.replayIntegration(),
+    ],
+    // Keep light by default; override via VITE_* env if needed
+    tracesSampleRate: Number(import.meta.env.VITE_SENTRY_TRACES_SAMPLE_RATE ?? '0.1'),
+    replaysSessionSampleRate: Number(
+      import.meta.env.VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE ?? '0.0',
+    ),
+    replaysOnErrorSampleRate: Number(
+      import.meta.env.VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE ?? '1.0',
+    ),
+    tracePropagationTargets: ((): (string | RegExp)[] => {
+      const targets: (string | RegExp)[] = [
+        /^https?:\/\/localhost(?::\d+)?/,
+        /^https?:\/\/(.*\.)?ex0\.dev/i,
+      ]
+
+      const baseUrl = import.meta.env.VITE_BASE_URL
+      if (baseUrl) targets.push(baseUrl)
+      if (typeof window !== 'undefined') targets.push(window.location.origin)
+
+      return targets
+    })(),
+    beforeBreadcrumb(breadcrumb) {
+      try {
+        if (breadcrumb?.message) breadcrumb.message = redact(String(breadcrumb.message))
+        if (breadcrumb?.data) {
+          breadcrumb.data = JSON.parse(
+            JSON.stringify(breadcrumb.data, (k, v) =>
+              typeof v === 'string' ? redact(v) : v,
+            ),
+          )
+        }
+      } catch {
+        // no-op
+      }
+      return breadcrumb
+    },
+    beforeSend(event) {
+      try {
+        if (event.request?.url) event.request.url = redact(event.request.url)
+        if (event.request?.headers) {
+          for (const [k, v] of Object.entries(event.request.headers)) {
+            if (typeof v === 'string') (event.request.headers as any)[k] = redact(v)
+          }
+        }
+        // never send cookies from the browser
+        if (event.request) (event.request as any).cookies = undefined
+
+        if (event.exception?.values) {
+          for (const ex of event.exception.values) {
+            if (ex.value) ex.value = redact(ex.value)
+          }
+        }
+      } catch {
+        // no-op
+      }
+      return event
+    },
+  })
+} else if (import.meta.env.DEV) {
+  console.warn('[sentry] VITE_SENTRY_DSN missing; client telemetry disabled')
+}

src/lib/observability/sentry.client.ts

@@ -0,0 +1,51 @@
+import * as Sentry from '@sentry/node'
+import { redact } from '~/lib/security/token-redaction'
+
+const dsn = process.env.SENTRY_DSN
+
+if (dsn) {
+  Sentry.init({
+    dsn,
+    environment: process.env.NODE_ENV,
+    tracesSampleRate: Number(process.env.SENTRY_TRACES_SAMPLE_RATE ?? '0.1'),
+    integrations: [
+      Sentry.httpIntegration(),
+      Sentry.captureConsoleIntegration({ levels: ['error', 'warn'] }),
+    ],
+    beforeBreadcrumb(breadcrumb) {
+      try {
+        if (breadcrumb?.message) breadcrumb.message = redact(String(breadcrumb.message))
+        if (breadcrumb?.data) {
+          breadcrumb.data = JSON.parse(
+            JSON.stringify(breadcrumb.data, (k, v) =>
+              typeof v === 'string' ? redact(v) : v,
+            ),
+          )
+        }
+      } catch {
+        // no-op
+      }
+      return breadcrumb
+    },
+    beforeSend(event) {
+      try {
+        if (event.request?.url) event.request.url = redact(event.request.url)
+        if (event.request?.headers) {
+          for (const [k, v] of Object.entries(event.request.headers)) {
+            if (typeof v === 'string') (event.request.headers as any)[k] = redact(v)
+          }
+        }
+        if (event.exception?.values) {
+          for (const ex of event.exception.values) {
+            if (ex.value) ex.value = redact(ex.value)
+          }
+        }
+      } catch {
+        // no-op
+      }
+      return event
+    },
+  })
+}
+
+export { Sentry }

src/lib/observability/sentry.server.ts

@@ -6,9 +6,9 @@ import { NotFound } from './components/NotFound';
 import { routeTree } from './routeTree.gen';
 
 // Initialize browser-echo for TanStack Start (manual import required)
-if (import.meta.env.DEV && typeof window !== 'undefined') {
-  void import('virtual:browser-echo');
-}
+// if (import.meta.env.DEV && typeof window !== 'undefined') {
+//   void import('virtual:browser-echo');
+// }
 
 export function getRouter() {
   const queryClient = new QueryClient();