feat: enable source maps in production (#790)

.env.example

@@ -1,3 +1,4 @@
+NUXT_PUBLIC_SENTRY_AUTH_TOKEN=
 NUXT_PUBLIC_SENTRY_DSN=
 NUXT_PUBLIC_APP_DOMAIN=localhost:8080
 NUXT_PUBLIC_PLAUSIBLE_DOMAIN=localhost:8080

.gitignore

@@ -28,3 +28,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+

nuxt.config.ts

@@ -1,5 +1,6 @@
 import fs from 'fs/promises'
 import { compileTemplate } from 'vue/compiler-sfc'
+import { sentryVitePlugin } from '@sentry/vite-plugin'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -11,7 +12,6 @@ export default defineNuxtConfig({
   modules: [
     '@pinia/nuxt',
     '@nuxtjs/plausible',
-    'nuxt-simple-sitemap',
     'nuxt-monaco-editor',
   ],
   imports: {
@@ -26,6 +26,7 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     public: {
+      SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
       SENTRY_DSN: process.env.SENTRY_DSN,
       APP_DOMAIN: process.env.APP_DOMAIN,
       MIDDLEWARE_URL: process.env.MIDDLEWARE_URL,
@@ -52,6 +53,7 @@ export default defineNuxtConfig({
       'postcss-nested': {},
     },
   },
+  sourcemap: true,
   vite: {
     build: { target: 'es2020' },
     optimizeDeps: {
@@ -79,6 +81,18 @@ export default defineNuxtConfig({
           return `${code}\nexport default { render: render }`
         },
       },
+      sentryVitePlugin({
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+        org: 'sentry',
+        project: 'aescan-develop',
+        url: 'https://sentry.dev.service.aepps.com/',
+      }),
+      sentryVitePlugin({
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+        org: 'sentry',
+        project: 'aescan-production',
+        url: 'https://sentry.dev.service.aepps.com/',
+      }),
     ],
   },
   monacoEditor: {

package.json

@@ -30,9 +30,10 @@
   "dependencies": {
     "@aeternity/aepp-sdk": "^13.3.2",
     "@download/blockies": "^1.0.3",
-    "@vuepic/vue-datepicker": "^8.3.1",
     "@sentry/tracing": "^7.108.0",
+    "@sentry/vite-plugin": "^2.16.1",
     "@sentry/vue": "^7.108.0",
+    "@vuepic/vue-datepicker": "^8.3.1",
     "@vueuse/core": "^10.9.0",
     "@vueuse/head": "^2.0.0",
     "axios": "^1.6.8",
@@ -58,8 +59,8 @@
     "@nuxtjs/plausible": "^0.2.4",
     "@pinia/nuxt": "^0.5.1",
     "@vitejs/plugin-vue": "^5.0.4",
-    "cypress": "^13.8.1",
     "autoprefixer": "^10.4.19",
+    "cypress": "^13.8.1",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
@@ -71,7 +72,6 @@
     "monaco-editor": "^0.47.0",
     "nuxt": "^3.11.1",
     "nuxt-monaco-editor": "^1.2.7",
-    "nuxt-simple-sitemap": "4.1.17",
     "postcss": "^8.4.38",
     "postcss-custom-media": "^10.0.4",
     "postcss-html": "^1.6.0",

src/plugins/sentry.js

@@ -2,6 +2,32 @@
 import * as Sentry from '@sentry/vue'
 import { BrowserTracing } from '@sentry/tracing'
 
+async function lazyLoadSentryIntegrations() {
+  if (process.server) {
+    return
+  }
+
+  const {Replay} = await import("@sentry/vue");
+  Sentry.addIntegration(new Replay({
+    maskAllText: false,
+    blockAllMedia: false,
+  }));
+}
+
+function getSentryIntegrations() {
+  if (process.server) {
+    return
+  }
+
+  const router = useRouter();
+  const browserTracing = new Sentry.BrowserTracing({
+    routingInstrumentation: Sentry.vueRouterInstrumentation(router),
+  });
+
+  return [browserTracing];
+}
+
+
 export default defineNuxtPlugin(({vueApp}) => {
   if (process.server) {
     return
@@ -20,11 +46,13 @@ export default defineNuxtPlugin(({vueApp}) => {
     app: vueApp,
     dsn: SENTRY_DSN,
     integrations: [
+      getSentryIntegrations(),
       new BrowserTracing({
         routingInstrumentation: Sentry.vueRouterInstrumentation(router),
         tracingOrigins: [APP_DOMAIN, /^\//],
       }),
     ],
+
     beforeSend: (event) => {
       if (window.location.hostname.startsWith('localhost')) {
         return null
@@ -34,4 +62,5 @@ export default defineNuxtPlugin(({vueApp}) => {
     tracesSampleRate: 1.0,
     logErrors: true,
   })
+  lazyLoadSentryIntegrations();
 })