feat: add sentry

.env.example

@@ -10,11 +10,5 @@ PROXY_URL=https://cors-proxy.r34.app/?q=
 
 MATOMO_API_KEY=
 
-SENTRY_DISABLED=true
-
 SENTRY_DSN=
-
-SENTRY_AUTH_TOKEN=
-# Use this or the `.sentryclirc` file
-SENTRY_ORG=
-SENTRY_PROJECT=
+SENTRY_AUTH_TOKEN=""

nuxt.config.js

@@ -1,3 +1,5 @@
+import { sentryVitePlugin } from '@sentry/vite-plugin'
+
 export default defineNuxtConfig({
   // TODO: Enable SSR and pre-rendering when Nuxt-Auth supports it
   ssr: false,
@@ -46,8 +48,29 @@ export default defineNuxtConfig({
     }
   },
 
-  site: {
-    url: `https://${process.env.APP_DOMAIN}`
+  vite: {
+    plugins: [
+      // Put the Sentry vite plugin after all other plugins
+      sentryVitePlugin({
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+        org: 'alejandro-akbal',
+        project: 'app',
+        url: 'https://glitchtip.akbal.dev/'
+      })
+    ]
+  },
+
+  build: {
+    transpile: ['vue-sonner']
+  },
+
+  sourcemap: true,
+
+  postcss: {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {}
+    }
   },
 
   runtimeConfig: {
@@ -60,14 +83,20 @@ export default defineNuxtConfig({
 
       API_URL: process.env.API_URL,
 
-      PROXY_URL: process.env.PROXY_URL
+      PROXY_URL: process.env.PROXY_URL,
+
+      SENTRY_DSN: process.env.SENTRY_DSN
     }
   },
 
   css: ['~/assets/css/main.css'],
 
   components: [{ path: '~/components', pathPrefix: false }],
 
+  site: {
+    url: `https://${process.env.APP_DOMAIN}`
+  },
+
   modules: [
     'nuxt-headlessui',
 
@@ -79,8 +108,6 @@ export default defineNuxtConfig({
 
     '@nuxtjs/partytown',
 
-    // '@nuxtjs/sentry',
-
     '@vite-pwa/nuxt',
 
     'nuxt-schema-org',
@@ -239,71 +266,6 @@ export default defineNuxtConfig({
     }
   },
 
-  /** @type {import('@nuxtjs/sentry')} */
-  sentry: {
-    dsn: process.env.SENTRY_DSN,
-
-    lazy: true,
-
-    disabled: process.env.SENTRY_DISABLED || false,
-    disableClientSide: false,
-    disableServerSide: true,
-
-    // Publish options are set in `.sentryclirc` or as ENV variables
-    publishRelease: true,
-    sourceMapStyle: 'source-map',
-
-    config: {
-      sampleRate: process.env.SENTRY_SAMPLE_RATE || 1,
-
-      allowUrls: [process.env.APP_DOMAIN],
-
-      ignoreErrors: [
-        // - Network -
-        'Request failed with status code',
-        'Network Error',
-
-        // - Media -
-        'AbortError',
-        'Request aborted',
-        'webkitExitFullScreen',
-        'Picture-in-Picture',
-
-        // - Plugins -
-        'matomo',
-        'vue-matomo',
-
-        // Matomo
-        'ao.sync',
-
-        // Axios
-        'timeout of 0ms exceeded',
-
-        // Browser
-        'ReportingObserver [deprecation]: Deprecation messages are stored',
-        'ReportingObserver [deprecation]: Element.createShadowRoot is deprecated',
-        'ReportingObserver [deprecation]: Synchronous XMLHttpRequest on the main thread',
-        'ReportingObserver [deprecation]: Custom cursors with size greater than 32x32 DIP intersecting native UI is deprecated',
-        'ReportingObserver [intervention]: Modified page load behavior on the page because the page was expected to take a long amount of time to load',
-        "ReportingObserver [deprecation]: 'Event.path' is deprecated and will be removed in M109",
-        "ReportingObserver [deprecation]: 'window.webkitStorageInfo' is deprecated.",
-        'ReportingObserver [deprecation]: chrome.loadTimes() is deprecated',
-
-        // Browser extensions
-        'instantSearchSDKJSBridgeClearHighlight',
-        'window.bannerNight',
-
-        // - Misc -
-        'native code',
-        'extension',
-        'unknown module',
-        'NotAllowedError',
-        'Background Sync is disabled',
-        'ResizeObserver loop limit exceeded'
-      ]
-    }
-  },
-
   /** @type {import('@nuxtjs/sitemap').ModuleOptions} */
   sitemap: {
     autoLastmod: true,
@@ -322,22 +284,6 @@ export default defineNuxtConfig({
     credits: false
   },
 
-  build: {
-    transpile: ['vue-sonner']
-  },
-
-  sourcemap: {
-    server: true,
-    client: true
-  },
-
-  postcss: {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {}
-    }
-  },
-
   devtools: {
     enabled: false
   },

package.json

@@ -32,6 +32,8 @@
     "@nuxt-alt/http": "^1.7.8",
     "@nuxtjs/partytown": "^1.4.0",
     "@nuxtjs/sitemap": "^5.0.5",
+    "@sentry/vite-plugin": "^2.10.3",
+    "@sentry/vue": "^7.94.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/vue-query": "^5.17.15",

plugins/sentry.ts

@@ -0,0 +1,54 @@
+import * as Sentry from '@sentry/vue'
+
+async function lazyLoadSentryIntegrations() {
+  // don't load on server
+  if (!process.client) return
+
+  // const { Replay } = await import('@sentry/vue')
+  // Sentry.addIntegration(
+  //   new Replay({
+  //     maskAllText: false,
+  //     blockAllMedia: false
+  //   })
+  // )
+}
+
+function getSentryIntegrations() {
+  // don't load on server
+  if (!process.client) return []
+
+  const router = useRouter()
+  const browserTracing = new Sentry.BrowserTracing({
+    routingInstrumentation: Sentry.vueRouterInstrumentation(router)
+  })
+
+  return [browserTracing]
+}
+
+export default defineNuxtPlugin({
+  name: 'sentry',
+  parallel: true,
+
+  async setup(nuxtApp) {
+    const vueApp = nuxtApp.vueApp
+
+    const config = useRuntimeConfig()
+
+    Sentry.init({
+      app: vueApp,
+      dsn: config.public.SENTRY_DSN,
+      integrations: getSentryIntegrations(),
+
+      // TODO: https://gitlab.com/glitchtip/glitchtip-backend/-/issues/206
+      autoSessionTracking: false,
+
+      tracesSampleRate: 1.0,
+
+      replaysSessionSampleRate: 1.0,
+      replaysOnErrorSampleRate: 1.0
+    })
+
+    // Lazy-load the replay integration to reduce bundle size
+    lazyLoadSentryIntegrations()
+  }
+})