fix: bring back sentry (#596)

* fix: sentry

* chore: make eslint happy

Author: qwerzl

.env.example

@@ -2,5 +2,6 @@ CLERK_PUBLISHABLE_KEY=
 CLERK_SECRET_KEY=
 DATABASE_URL=
 TSIMS_URL=
-SENTRY_DSM=
+SENTRY_DSN=
 CLUB_DATA_SECRET_KEY=
+SENTRY_AUTH_TOKEN=

components/custom/CAS/Record/view-activity-records/DataTable.vue

@@ -25,6 +25,7 @@ import {
 const props = defineProps<{
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
+  // eslint-disable-next-line ts/no-unsafe-function-type
   refreshFunction: Function
 }>()
 

env.d.ts

@@ -21,14 +21,16 @@ export default defineNuxtConfig({
     '@nuxt/fonts',
     'nuxt-svgo',
     'dayjs-nuxt',
+    '@sentry/nuxt/module',
+    '@nuxt/image',
   ],
   build: {
     transpile: ['vue-clerk', '@clerk/clerk-js'],
   },
   runtimeConfig: {
     public: {
       sentry: {
-        dsn: process.env.SENTRY_DSM,
+        dsn: process.env.SENTRY_DSN,
         environment: 'development',
       },
       clerkPublishableKey: process.env.CLERK_PUBLISHABLE_KEY,
@@ -38,11 +40,6 @@ export default defineNuxtConfig({
     tsimsUrl: process.env.TSIMS_URL,
     clerkSecretKey: process.env.CLERK_SECRET_KEY,
   },
-  features: {
-    // Solves the weird issue where netlify's Functions bundling process fails.
-    // ref: https://answers.netlify.com/t/typeerror-pattern-is-too-long/98172/5
-    inlineStyles: false,
-  },
   shadcn: {
     /**
      * Prefix for all the imported component
@@ -60,4 +57,12 @@ export default defineNuxtConfig({
     defaultLocale: 'zh-cn',
     defaultTimezone: 'Asia/Shanghai',
   },
+  sentry: {
+    debug: true,
+    sourceMapsUploadOptions: {
+      org: 'computerization',
+      project: 'enspire',
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+    },
+  },
 })

nuxt.config.ts

@@ -6,7 +6,7 @@
     "build": "nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
-    "preview": "nuxt preview",
+    "preview": "NODE_OPTIONS='--import ./public/instrument.server.mjs' nuxt preview",
     "postinstall": "nuxt prepare && prisma generate",
     "update-club-info": "tsx utils/update-club-info.ts",
     "lint": "eslint .",
@@ -18,6 +18,7 @@
     "@clerk/themes": "^2.1.9",
     "@nuxt/content": "^2.12.1",
     "@radix-icons/vue": "^1.0.0",
+    "@sentry/nuxt": "^8.25.0",
     "@tanstack/vue-table": "^8.17.3",
     "@unovis/ts": "^1.4.3",
     "@unovis/vue": "^1.4.3",
@@ -41,19 +42,17 @@
     "v-calendar": "^3.1.2",
     "vaul-vue": "^0.2.0",
     "vee-validate": "^4.13.1",
-    "vue-clerk": "^0.4.3",
+    "vue-clerk": "^0.4.15",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.21.1",
     "@nuxt/fonts": "^0.7.0",
+    "@nuxt/image": "^1.7.0",
     "@nuxtjs/google-fonts": "^3.2.0",
     "@nuxtjs/tailwindcss": "^6.12.0",
     "@prisma/client": "^5.15.0",
     "@rollup/plugin-wasm": "^6.2.2",
-    "@sentry/node": "^7.117.0",
-    "@sentry/profiling-node": "^7.110.0",
-    "@sentry/vue": "^8.9.2",
     "@tailwindcss/typography": "^0.5.13",
     "@types/node-fetch": "^2.6.11",
     "@types/uuid": "^9.0.8",

package.json

@@ -1,4 +1,4 @@
-import { clerkPlugin } from 'vue-clerk/plugin'
+import { clerkPlugin } from 'vue-clerk'
 
 export default defineNuxtPlugin(async (nuxtApp) => {
   nuxtApp.vueApp.use(clerkPlugin, {

plugins/clerk.ts

@@ -0,0 +1,8 @@
+import * as Sentry from '@sentry/nuxt'
+
+// Only run `init` when DSN is available
+if (process.env.SENTRY_DSN) {
+  Sentry.init({
+    dsn: process.env.SENTRY_DSN,
+  })
+}

plugins/sentry.client.ts

@@ -0,0 +1,6 @@
+import * as Sentry from '@sentry/nuxt'
+
+Sentry.init({
+  // There isn't any way to get the dsn from env var here
+  dsn: 'https://fa9f1c768005ae729e6fb560d2b02713@o4506819268444160.ingest.us.sentry.io/4506822264029184',
+})