fix: moved sentry information to bff supplied at runtime

Author: n3rdc4ptn

.env.template

@@ -1,9 +1,9 @@
-VITE_SENTRY_ENVIRONMENT=
 # Sentry DSN configuration, no need to be set for local setup
 #  Frontend:
 SENTRY_ORG=
 SENTRY_PROJECT=
-VITE_SENTRY_DSN=
+FRONTEND_SENTRY_DSN=
+FRONTEND_SENTRY_ENVIRONMENT=
 #  BFF:
 BFF_SENTRY_DSN=
 DYNATRACE_SCRIPT_URL=

index.html

@@ -13,4 +13,4 @@
   <script type="module" src="/src/mount.ts"></script>
 </body>
 
-</html>
+</html>

package-lock.json

@@ -7,9 +7,10 @@
     "npm": "^11.0.0"
   },
   "scripts": {
-    "dev": "node --loader ts-node/esm ./server.ts --local-dev",
+    "dev": "tsx ./server.ts --local-dev",
     "start": "node dist/server.js",
-    "build": "tsc && npm run build:server && vite build",
+    "build": "npm run build:server && npm run build:client",
+    "build:client": "vite build",
     "build:server": "tsc -p tsconfig.server.json",
     "lint": "eslint ./src --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint ./src --fix",
@@ -92,6 +93,7 @@
     "globals": "^16.0.0",
     "prettier": "^3.5.3",
     "ts-node": "^10.9.2",
+    "tsx": "^4.20.5",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.26.1",
     "vite": "^6.3.4",

package.json

@@ -72,12 +72,12 @@ await fastify.register(envPlugin);
 
 let sentryHost = '';
 // @ts-ignore
-if (fastify.config.VITE_SENTRY_DSN && fastify.config.VITE_SENTRY_DSN.length > 0) {
+if (fastify.config.FRONTEND_SENTRY_DSN && fastify.config.FRONTEND_SENTRY_DSN.length > 0) {
   try {
     // @ts-ignore
-    sentryHost = new URL(fastify.config.VITE_SENTRY_DSN).hostname;
+    sentryHost = new URL(fastify.config.FRONTEND_SENTRY_DSN).hostname;
   } catch {
-    console.log('VITE_SENTRY_DSN is not a valid URL');
+    console.log('FRONTEND_SENTRY_DSN is not a valid URL');
     sentryHost = '';
   }
 }
@@ -114,6 +114,15 @@ await fastify.register(FastifyVite, {
   spa: true,
 });
 
+fastify.get('/sentry', function (req, reply) {
+  return reply.send({
+    // @ts-ignore
+    FRONTEND_SENTRY_DSN: fastify.config.FRONTEND_SENTRY_DSN,
+    // @ts-ignore
+    FRONTEND_SENTRY_ENVIRONMENT: fastify.config.FRONTEND_SENTRY_ENVIRONMENT,
+  });
+});
+
 // @ts-ignore
 fastify.get('/', function (req, reply) {
   return reply.html();

server.ts

@@ -30,8 +30,8 @@ const schema = {
     FEEDBACK_URL_LINK: { type: 'string' },
     FRAME_ANCESTORS: { type: 'string' },
     BFF_SENTRY_DSN: { type: 'string' },
-    VITE_SENTRY_DSN: { type: 'string' },
-    VITE_SENTRY_ENVIRONMENT: { type: 'string' },
+    FRONTEND_SENTRY_DSN: { type: 'string' },
+    FRONTEND_SENTRY_ENVIRONMENT: { type: 'string' },
 
     // System variables
     NODE_ENV: { type: 'string', enum: ['development', 'production'] },

server/config/env.ts

@@ -5,10 +5,18 @@ import React from 'react';
 import { Routes, useLocation, useNavigationType, createRoutesFromChildren, matchRoutes } from 'react-router-dom';
 
 let sentryRoutes = Routes;
-if (import.meta.env.VITE_SENTRY_DSN && import.meta.env.VITE_SENTRY_DSN.length > 0) {
+
+const sentryConfig = await fetch('/sentry').then((res) => res.json());
+
+if (
+  sentryConfig.FRONTEND_SENTRY_DSN &&
+  sentryConfig.FRONTEND_SENTRY_DSN.length > 0 &&
+  sentryConfig.FRONTEND_SENTRY_ENVIRONMENT &&
+  sentryConfig.FRONTEND_SENTRY_ENVIRONMENT.length > 0
+) {
   Sentry.init({
-    dsn: import.meta.env.VITE_SENTRY_DSN,
-    environment: import.meta.env.VITE_SENTRY_ENVIRONMENT,
+    dsn: sentryConfig.FRONTEND_SENTRY_DSN,
+    environment: sentryConfig.FRONTEND_SENTRY_ENVIRONMENT,
     integrations: [
       Sentry.reactRouterV7BrowserTracingIntegration({
         useEffect: React.useEffect,

src/mount.ts

@@ -14,6 +14,7 @@ export default defineConfig({
     sentryVitePlugin({
       org: process.env.SENTRY_ORG,
       project: process.env.SENTRY_PROJECT,
+      telemetry: false,
       reactComponentAnnotation: {
         enabled: true,
       },
@@ -22,5 +23,6 @@ export default defineConfig({
 
   build: {
     sourcemap: true,
+    target: 'esnext', // Support top-level await
   },
 });