Add Nuxt3 Sentry (baserow#4756)

Author: bram2w

web-frontend/config/nuxt.config.base.ts

@@ -35,7 +35,6 @@ function baserowModuleConfig(
       enterpriseBase + '/modules/baserow_enterprise/module.js'
     )
   }
-  // baseModules.push('@nuxtjs/sentry')
 
   const modules = baseModules.concat(additionalModules)
 

web-frontend/env-remap.mjs

@@ -53,10 +53,8 @@ const envMapping = {
   BASEROW_PRICING_URL: 'NUXT_PUBLIC_BASEROW_PRICING_URL',
   BASEROW_ENTERPRISE_ASSISTANT_LLM_MODEL:
     'NUXT_PUBLIC_BASEROW_ENTERPRISE_ASSISTANT_LLM_MODEL',
-
-  // Additional env vars
-  SENTRY_DSN: 'NUXT_PUBLIC_SENTRY_CONFIG_DSN',
-  SENTRY_ENVIRONMENT: 'NUXT_PUBLIC_SENTRY_CONFIG_ENVIRONMENT',
+  SENTRY_DSN: 'NUXT_PUBLIC_SENTRY_DSN',
+  SENTRY_ENVIRONMENT: 'NUXT_PUBLIC_SENTRY_ENVIRONMENT',
   MEDIA_URL: 'NUXT_PUBLIC_MEDIA_URL',
 }
 

web-frontend/modules/core/module.js

@@ -85,12 +85,8 @@ export default defineNuxtModule({
         baserowDisableSupport: '',
         baserowIntegrationsPeriodicMinuteMin: '1',
         mediaUrl: 'http://localhost:4000/media/',
-        sentry: {
-          config: {
-            dsn: '',
-            environment: '',
-          },
-        },
+        sentryDsn: '',
+        sentryEnvironment: '',
       }
     )
 
@@ -132,6 +128,8 @@ export default defineNuxtModule({
     addPlugin(resolve('plugins/featureFlags.js'))
     addPlugin(resolve('plugins/papa.js'))
     addPlugin(resolve('plugins/ensureRender.js'))
+    addPlugin(resolve('plugins/sentry.client.js'))
+    addPlugin(resolve('plugins/sentry.server.js'))
     addPlugin(resolve('plugins/version.js'))
     addPlugin(resolve('plugins/posthog.js'))
     addPlugin(resolve('plugins/vueDatepicker.js'))

web-frontend/modules/core/plugins/sentry.client.js

@@ -0,0 +1,33 @@
+export default defineNuxtPlugin(async (nuxtApp) => {
+  // Only run on client side
+  if (import.meta.server) {
+    return
+  }
+
+  const config = useRuntimeConfig()
+  const dsn = config.public.sentryDsn
+
+  if (!dsn || dsn === '') {
+    return
+  }
+
+  const Sentry = await import('@sentry/vue')
+
+  Sentry.init({
+    app: nuxtApp.vueApp,
+    dsn,
+    environment: config.public.sentryEnvironment || 'production',
+    integrations: [
+      Sentry.browserTracingIntegration({
+        router: nuxtApp.$router,
+      }),
+      Sentry.replayIntegration({
+        maskAllText: true,
+        blockAllMedia: true,
+      }),
+    ],
+    tracesSampleRate: 1.0,
+    replaysSessionSampleRate: 0,
+    replaysOnErrorSampleRate: 1.0,
+  })
+})

web-frontend/modules/core/plugins/sentry.server.js

@@ -0,0 +1,35 @@
+export default defineNuxtPlugin(async (nuxtApp) => {
+  if (import.meta.client) {
+    return
+  }
+
+  const config = useRuntimeConfig()
+  const dsn = config.public.sentryDsn
+
+  if (!dsn || dsn === '') {
+    return
+  }
+
+  const Sentry = await import('@sentry/node')
+
+  Sentry.init({
+    dsn,
+    environment: config.public.sentryEnvironment || 'production',
+    tracesSampleRate: 1.0,
+  })
+
+  nuxtApp.hook('app:error', (error) => {
+    Sentry.captureException(error)
+  })
+
+  nuxtApp.hook('vue:error', (error, instance, info) => {
+    Sentry.captureException(error, {
+      contexts: {
+        vue: {
+          componentName: instance?.$options?.name,
+          errorInfo: info,
+        },
+      },
+    })
+  })
+})

web-frontend/package.json

@@ -31,6 +31,9 @@
   },
   "dependencies": {
     "@nuxtjs/i18n": "10.2.1",
+    "@sentry/node": "^10.38.0",
+    "@sentry/nuxt": "^10.38.0",
+    "@sentry/vue": "^10.38.0",
     "@tiptap/core": "^3.13.0",
     "@tiptap/extension-blockquote": "^3.13.0",
     "@tiptap/extension-bold": "^3.13.0",