feat(app): add sentry capture

.gitea/workflows/main.yaml

@@ -30,6 +30,7 @@ jobs:
         env:
           NODE_ENV: production
           VITE_CLERK_PUBLISHABLE_KEY: ${{ vars.CLERK_KEY }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
 
       - name: Set docker chmod (temp solution)
         run: sudo chmod 666 /var/run/docker.sock

apps/app/package.json

@@ -15,6 +15,8 @@
     "@clerk/clerk-react": "^5.9.4",
     "@hookform/resolvers": "^3.9.0",
     "@mdxeditor/editor": "^3.14.0",
+    "@sentry/react": "^8.35.0",
+    "@sentry/vite-plugin": "^2.22.6",
     "@tailwindcss/typography": "^0.5.15",
     "@tanstack/react-query": "^5.59.0",
     "@tanstack/react-router": "^1.58.15",

apps/app/src/main.tsx

@@ -4,6 +4,7 @@ import {
   TooltipProvider,
 } from '@boring.tools/ui'
 import { ClerkProvider } from '@clerk/clerk-react'
+import * as Sentry from '@sentry/react'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
@@ -12,6 +13,21 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 // Import the generated route tree
 import { routeTree } from './routeTree.gen'
 
+Sentry.init({
+  dsn: 'https://eee8b9e634a9ae0812518003d0512897@o4508167321354240.ingest.de.sentry.io/4508167916290128',
+  integrations: [
+    Sentry.browserTracingIntegration(),
+    Sentry.replayIntegration(),
+  ],
+  // Tracing
+  tracesSampleRate: 1.0, //  Capture 100% of the transactions
+  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
+  // Session Replay
+  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+})
+
 // Create a new router instance
 const router = createRouter({ routeTree })
 

apps/app/vite.config.ts

@@ -1,3 +1,4 @@
+import { sentryVitePlugin } from '@sentry/vite-plugin'
 import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
@@ -7,6 +8,18 @@ export default defineConfig({
   build: {
     outDir: '../../build/app',
     emptyOutDir: true,
+    sourcemap: true,
   },
-  plugins: [TanStackRouterVite(), react()],
+  plugins: [
+    TanStackRouterVite(),
+    react(),
+    sentryVitePlugin({
+      org: 'boringtools',
+      project: 'app',
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      sourcemaps: {
+        filesToDeleteAfterUpload: '**/*.map.*',
+      },
+    }),
+  ],
 })