deploy: add sentry to frontend server (#5118)

* deploy: add sentry to frontend server

* build: add sentry auth token to env

* fix: use sentry CLI for sourcemap upload instead

* feat: comment deploy

---------

Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

.github/workflows/frontend-deploy.yml

@@ -23,11 +23,12 @@ jobs:
     permissions:
       contents: read
       deployments: write
+      pull-requests: write
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
         with:
-          fetch-depth: 2
+          fetch-depth: 0
 
       - name: Configure environment
         id: meta
@@ -76,6 +77,18 @@ jobs:
           CF_PAGES_BRANCH: ${{ github.ref_name }}
           CF_PAGES_COMMIT_SHA: ${{ github.sha }}
           CF_PAGES_URL: ${{ steps.meta.outputs.url }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+
+      - name: Create Sentry release and upload sourcemaps
+        uses: getsentry/action-release@v3
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_ORG: modrinth
+          SENTRY_PROJECT: knossos-server
+        with:
+          environment: ${{ steps.meta.outputs.env || 'production' }}
+          sourcemaps: ./apps/frontend/.output/server
+          url_prefix: '~/'
 
       - name: Deploy Cloudflare Worker
         id: wrangler
@@ -97,3 +110,16 @@ jobs:
             -H "Content-Type: application/json" \
             --data '{"hosts": ["modrinth.com", "www.modrinth.com", "staging.modrinth.com"]}' \
             https://api.cloudflare.com/client/v4/zones/e39df17b9c4ef44cbce2646346ee6d33/purge_cache
+
+      - name: Comment deploy URL on PR
+        if: github.event_name == 'pull_request'
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            ## 🚀 Frontend Deploy
+
+            | Commit | URL |
+            |--------|-----|
+            | ${{ github.event.pull_request.head.sha }} | ${{ steps.wrangler.outputs.deployment-url }} |
+          comment-tag: frontend-deploy

apps/frontend/nuxt.config.ts

@@ -222,7 +222,7 @@ export default defineNuxtConfig({
 			},
 		},
 	},
-	modules: ['@nuxtjs/i18n', '@pinia/nuxt', 'floating-vue/nuxt'],
+	modules: ['@nuxtjs/i18n', '@pinia/nuxt', 'floating-vue/nuxt', '@sentry/nuxt/module'],
 	floatingVue: {
 		themes: {
 			'ribbit-popout': {
@@ -266,6 +266,9 @@ export default defineNuxtConfig({
 		cloudflare: {
 			nodeCompat: true,
 		},
+		replace: {
+			__SENTRY_RELEASE__: JSON.stringify(process.env.CF_PAGES_COMMIT_SHA || 'unknown'),
+		},
 	},
 	devtools: {
 		enabled: true,
@@ -313,6 +316,12 @@ export default defineNuxtConfig({
 	experimental: {
 		asyncContext: isProduction(),
 	},
+	sourcemap: { client: 'hidden' },
+	sentry: {
+		sourcemaps: {
+			disable: true,
+		},
+	},
 })
 
 function getApiUrl() {

apps/frontend/package.json

@@ -48,12 +48,14 @@
 		"@modrinth/ui": "workspace:*",
 		"@modrinth/utils": "workspace:*",
 		"@pinia/nuxt": "^0.11.3",
+		"@sentry/nuxt": "^10.33.0",
 		"@tanstack/vue-query": "^5.90.7",
 		"@types/three": "^0.172.0",
 		"@vitejs/plugin-vue": "^6.0.3",
 		"@vue-email/components": "^0.0.21",
 		"@vue-email/render": "^0.0.9",
 		"@vueuse/core": "^11.1.0",
+		"ace-builds": "^1.36.2",
 		"ansi-to-html": "^0.7.2",
 		"dayjs": "^1.11.7",
 		"dompurify": "^3.1.7",
@@ -65,7 +67,6 @@
 		"js-yaml": "^4.1.0",
 		"jszip": "^3.10.1",
 		"markdown-it": "14.1.0",
-		"ace-builds": "^1.36.2",
 		"pathe": "^1.1.2",
 		"pinia": "^3.0.0",
 		"pinia-plugin-persistedstate": "^4.4.1",

apps/frontend/src/server/plugins/sentry-cloudflare-plugin.ts

@@ -0,0 +1,11 @@
+import { sentryCloudflareNitroPlugin } from '@sentry/nuxt/module/plugins'
+
+declare const __SENTRY_RELEASE__: string
+
+export default defineNitroPlugin(
+	sentryCloudflareNitroPlugin({
+		dsn: 'https://9cf8f56ab7055ab6b1042fad535f2a44@o485889.ingest.us.sentry.io/4510709722185728',
+		tracesSampleRate: 1.0,
+		release: __SENTRY_RELEASE__,
+	}),
+)

apps/frontend/wrangler.jsonc

@@ -26,6 +26,9 @@
 			"secret_name": "labrinth-production-ratelimit-key"
 		}
 	],
+	"version_metadata": {
+		"binding": "CF_VERSION_METADATA"
+	},
 	"vars": {
 		"ENVIRONMENT": "production",
 		"BASE_URL": "https://api.modrinth.com/v2/",