feat(frontend): setup sentry for presenter+frontend (#2591)

Motivation
----------
This will setup Sentry for both our frontends.

We did not add any custom code. That's why no unit test in this PR.

How to test
-----------
1. Set `SENTRY_DSN` in your `frontend/.env`
2. Produce an `auth error` (e.g. not starting `authentik` in `docker compose up`)
3. You will see the error in our `dreammall-frontend` Sentry project

close #2504

frontend/.env.dist

@@ -21,3 +21,6 @@ PUBLIC_ENV__META__DEFAULT_AUTHOR="DreamMall Verlag GbR"
 # PUBLIC_ENV__IBAN="DE667 333170000 10000 504"
 # PUBLIC_ENV__BIC="GABLDE71XXX"
 # PUBLIC_ENV__BANK="Gabler-Saliter Bank"
+
+# SENTRY_DSN=
+# SENTRY_ENVIRONMENT=

frontend/package.json

@@ -50,6 +50,7 @@
     "@chenfengyuan/vue-qrcode": "^2.0.0",
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@mdi/font": "^7.4.47",
+    "@sentry/vue": "^8.33.1",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/apollo-composable": "^4.2.1",
     "@vue/apollo-option": "^4.0.0",

frontend/renderer/app.ts

@@ -17,6 +17,8 @@ import CreateVuetify from '#plugins/vuetify'
 import AuthService from '#src/services/AuthService'
 import { useAuthStore } from '#stores/authStore'
 
+import { setupSentry } from './sentry'
+
 const vuetify = CreateVuetify(i18n)
 
 function createApp(pageContext: PageContext, isClient = true) {
@@ -103,6 +105,11 @@ function createApp(pageContext: PageContext, isClient = true) {
 
   setPageContext(app, pageContextReactive)
 
+  const {
+    SENTRY: { SENTRY_DSN: dsn, SENTRY_ENVIRONMENT: environment },
+  } = pageContext.publicEnv
+  setupSentry({ app, dsn, environment })
+
   return { app, i18n }
 }
 

frontend/renderer/sentry/index.ts

@@ -0,0 +1,3 @@
+import { init } from '@sentry/vue'
+
+export const setupSentry = init

frontend/server/config.ts

@@ -22,6 +22,9 @@ const {
   PUBLIC_ENV__IBAN = 'DE667 333170000 10000 504',
   PUBLIC_ENV__BIC = 'GABLDE71XXX',
   PUBLIC_ENV__BANK = 'Gabler-Saliter Bank',
+
+  SENTRY_DSN,
+  SENTRY_ENVIRONMENT,
 } = process.env
 
 const AUTH = {
@@ -52,4 +55,9 @@ const ACCOUNTING = {
   BANK: PUBLIC_ENV__BANK,
 }
 
-export const publicEnv = { AUTH, ACCOUNTING, ENDPOINTS, META }
+const SENTRY = {
+  SENTRY_DSN,
+  SENTRY_ENVIRONMENT,
+}
+
+export const publicEnv = { AUTH, ACCOUNTING, ENDPOINTS, META, SENTRY }

infrastructure/helmfile/dreammall/templates/backend-deployment.yaml

@@ -67,7 +67,7 @@ spec:
               valueFrom:
                 configMapKeyRef:
                   name: {{ .Release.Name }}
-                  key: sentry_dsn
+                  key: sentry_dsn_backend
             - name: SENTRY_ENVIRONMENT
               valueFrom:
                 configMapKeyRef:

infrastructure/helmfile/dreammall/templates/frontend-deployment.yaml

@@ -79,6 +79,16 @@ spec:
                 configMapKeyRef:
                   name: {{ .Release.Name }}
                   key: bank
+            - name: SENTRY_DSN
+              valueFrom:
+                configMapKeyRef:
+                  name: {{ .Release.Name }}
+                  key: sentry_dsn_frontend
+            - name: SENTRY_ENVIRONMENT
+              valueFrom:
+                configMapKeyRef:
+                  name: {{ .Release.Name }}
+                  key: sentry_environment
           image: "{{ .Values.frontend.image.repository }}:{{ default .Values.global.image.tag .Values.frontend.image.tag "latest" }}"
           imagePullPolicy: {{ quote .Values.global.image.pullPolicy }}
           name: frontend

infrastructure/helmfile/dreammall/templates/presenter-deployment.yaml

@@ -29,6 +29,16 @@ spec:
                 configMapKeyRef:
                   name: {{ .Release.Name }}
                   key: endpoints_graphql_uri
+            - name: SENTRY_DSN
+              valueFrom:
+                configMapKeyRef:
+                  name: {{ .Release.Name }}
+                  key: sentry_dsn_presenter
+            - name: SENTRY_ENVIRONMENT
+              valueFrom:
+                configMapKeyRef:
+                  name: {{ .Release.Name }}
+                  key: sentry_environment
           image: "{{ .Values.presenter.image.repository }}:{{ default .Values.global.image.tag .Values.presenter.image.tag "latest" }}"
           imagePullPolicy: {{ quote .Values.global.image.pullPolicy }}
           name: presenter

infrastructure/helmfile/dreammall/values.yaml

@@ -38,5 +38,7 @@ configmap:
   iban: 'DE667 333170000 10000 504'
   bic: 'GABLDE71XXX'
   bank: 'Gabler-Saliter Bank'
-  sentry_dsn: 'https://1f94061db34f923d76b8eb85ccb132f8@o4508075566956544.ingest.de.sentry.io/4508075570561104'
+  sentry_dsn_backend: 'https://1f94061db34f923d76b8eb85ccb132f8@o4508075566956544.ingest.de.sentry.io/4508075570561104'
+  sentry_dsn_frontend: 'https://a8ad24bf9db4356ad721fe8974c058f0@o4508075566956544.ingest.de.sentry.io/4508076485509200'
+  sentry_dsn_presenter: 'https://ee21d8029a7c481e7e0835fc8e6421d6@o4508075566956544.ingest.de.sentry.io/4508076577521744'
   sentry_environment: ''

presenter/.env.dist

@@ -8,3 +8,6 @@ PUBLIC_ENV__ENDPOINTS__GRAPHQL_URI=http://localhost:4000/
 # META
 PUBLIC_ENV__META__BASE_URL="http://localhost:3000"
 PUBLIC_ENV__META__DEFAULT_AUTHOR="DreamMall Verlag GbR"
+
+# SENTRY_DSN=
+# SENTRY_ENVIRONMENT=

presenter/package.json

@@ -48,6 +48,7 @@
     "@apollo/client": "^3.11.8",
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@mdi/font": "^7.4.47",
+    "@sentry/vue": "^8.33.1",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/apollo-composable": "^4.2.1",
     "@vue/apollo-option": "^4.2.0",