feat: simple sentry implementation

Author: n3rdc4ptn

.env.template

@@ -1,3 +1,6 @@
+# Sentry DSN
+VITE_SENTRY_DSN=
+
 # OpenID Connect Configuration for Onboarding API
 OIDC_ISSUER=
 OIDC_CLIENT_ID=

package-lock.json

@@ -24,12 +24,13 @@
     "@fastify/cookie": "^11.0.2",
     "@fastify/env": "^5.0.2",
     "@fastify/http-proxy": "^11.1.2",
-    "@fastify/sensible": "^6.0.3",
     "@fastify/secure-session": "^8.2.0",
+    "@fastify/sensible": "^6.0.3",
     "@fastify/session": "^11.1.0",
     "@fastify/static": "^8.1.1",
     "@fastify/vite": "^8.1.3",
     "@hookform/resolvers": "^5.0.0",
+    "@sentry/react": "^9.39.0",
     "@ui5/webcomponents": "^2.7.2",
     "@ui5/webcomponents-fiori": "^2.7.2",
     "@ui5/webcomponents-icons": "^2.7.2",
@@ -84,4 +85,4 @@
     "vite": "^6.3.4",
     "vitest": "^3.1.4"
   }
-}
+}

package.json

@@ -14,7 +14,7 @@ function App() {
     if (frontendConfig && frontendConfig.landscape) {
       document.title = `[${frontendConfig.landscape}] MCP`;
     }
-  }, []);
+  }, [frontendConfig]);
 
   if (auth.isLoading) {
     return <BusyIndicator active />;

src/App.tsx

@@ -1,9 +1,4 @@
-import {
-  HashRouter as Router,
-  Navigate,
-  Route,
-  Routes,
-} from 'react-router-dom';
+import { HashRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
 import ControlPlaneView from './views/ControlPlanes/ControlPlaneView.tsx';
 import ProjectListView from './views/ProjectList';
 import ControlPlaneListView from './views/ControlPlanes/ControlPlaneListView.tsx';
@@ -18,10 +13,7 @@ function AppRouter() {
         <Routes>
           <Route path="/mcp" element={<GlobalProviderOutlet />}>
             <Route path="projects" element={<ProjectListView />} />
-            <Route
-              path="projects/:projectName"
-              element={<ControlPlaneListView />}
-            />
+            <Route path="projects/:projectName" element={<ControlPlaneListView />} />
             <Route
               path="projects/:projectName/workspaces/:workspaceName/mcps/:controlPlaneName/context/:contextName"
               element={<ControlPlaneView />}

src/AppRouter.tsx

@@ -1,5 +1,13 @@
 import { createRoot } from 'react-dom/client';
 import { createApp } from './main.tsx';
+import * as Sentry from '@sentry/react';
+
+Sentry.init({
+  dsn: import.meta.env.VITE_SENTRY_DSN,
+  // Setting this option to true will send default PII data to Sentry.
+  // For example, automatic IP address collection on events
+  sendDefaultPii: true,
+});
 
 const root = createRoot(document.getElementById('root')!);
 root.render(createApp());