Add Sentry Configuration to webapp

webapp/Dockerfile

@@ -24,6 +24,11 @@ RUN set -a && \
 export const environment = {
   clientUrl: '${APPLICATION_CLIENT_URL}',
   serverUrl: '${APPLICATION_SERVER_URL}',
+  version: '${APPLICATION_VERSION}',
+  sentry: {
+    dsn: '${SENTRY_DSN}',
+    environment: 'prod',
+  },
   keycloak: {
     url: '${KEYCLOAK_URL}',
     realm: '${KEYCLOAK_REALM}',

webapp/angular.json

@@ -78,7 +78,13 @@
                   "maximumError": "10kb"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "sourceMap": {
+                "scripts": true,
+                "styles": false,
+                "hidden": false,
+                "vendor": false
+              }
             },
             "development": {
               "optimization": false,

webapp/package.json

@@ -33,6 +33,7 @@
     "@ng-icons/lucide": "^26.3.0",
     "@ng-icons/octicons": "29.5.0",
     "@primer/primitives": "9.1.1",
+    "@sentry/angular": "^8.42.0",
     "@spartan-ng/ui-accordion-brain": "0.0.1-alpha.356",
     "@spartan-ng/ui-alertdialog-brain": "0.0.1-alpha.356",
     "@spartan-ng/ui-avatar-brain": "0.0.1-alpha.356",

webapp/src/app/app.component.ts

@@ -1,19 +1,25 @@
-import { Component, isDevMode } from '@angular/core';
+import { Component, inject, isDevMode } from '@angular/core';
 import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental';
-import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from '@app/core/header/header.component';
 import { FooterComponent } from './core/footer/footer.component';
+import { SentryErrorHandler } from './core/sentry/sentry.error-handler';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, RouterLink, RouterLinkActive, AngularQueryDevtools, HeaderComponent, FooterComponent],
+  imports: [RouterOutlet, AngularQueryDevtools, HeaderComponent, FooterComponent],
   templateUrl: './app.component.html'
 })
 export class AppComponent {
   title = 'Hephaestus';
+  sentry = inject(SentryErrorHandler);
 
   isDevMode() {
     return isDevMode();
   }
+
+  constructor() {
+    this.sentry.init();
+  }
 }

webapp/src/app/app.config.ts

@@ -1,5 +1,5 @@
-import { APP_INITIALIZER, ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { APP_INITIALIZER, ApplicationConfig, ErrorHandler, provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { provideRouter, Router } from '@angular/router';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { provideAngularQuery, QueryClient } from '@tanstack/angular-query-experimental';
@@ -8,6 +8,8 @@ import { BASE_PATH } from 'app/core/modules/openapi';
 import { routes } from 'app/app.routes';
 import { AnalyticsService } from './analytics.service';
 import { securityInterceptor } from './core/security/security-interceptor';
+import { TraceService } from '@sentry/angular';
+import { SentryErrorHandler } from './core/sentry/sentry.error-handler';
 
 function initializeAnalytics(analyticsService: AnalyticsService): () => void {
   return () => {
@@ -23,6 +25,14 @@ export const appConfig: ApplicationConfig = {
     provideHttpClient(withInterceptors([securityInterceptor])),
     provideAnimationsAsync(),
     { provide: BASE_PATH, useValue: environment.serverUrl },
-    { provide: APP_INITIALIZER, useFactory: initializeAnalytics, multi: true, deps: [AnalyticsService] }
+    { provide: APP_INITIALIZER, useFactory: initializeAnalytics, multi: true, deps: [AnalyticsService] },
+    { provide: ErrorHandler, useClass: SentryErrorHandler },
+    { provide: TraceService, deps: [Router] },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: () => () => {},
+      deps: [TraceService],
+      multi: true
+    }
   ]
 };

webapp/src/app/core/security/security-store.service.ts

@@ -2,6 +2,7 @@ import { computed, inject, Injectable, PLATFORM_ID, signal } from '@angular/core
 import { isPlatformServer } from '@angular/common';
 import { KeycloakService } from './keycloak.service';
 import { ANONYMOUS_USER, User } from './models';
+import { setUser } from '@sentry/angular';
 
 @Injectable({ providedIn: 'root' })
 export class SecurityStore {
@@ -23,6 +24,7 @@ export class SecurityStore {
     if (isServer) {
       this.user.set(ANONYMOUS_USER);
       this.loaded.set(true);
+      setUser(ANONYMOUS_USER);
       return;
     }
 
@@ -40,9 +42,11 @@ export class SecurityStore {
       };
       this.user.set(user);
       this.loaded.set(true);
+      setUser(user);
     } else {
       this.user.set(ANONYMOUS_USER);
       this.loaded.set(true);
+      setUser(ANONYMOUS_USER);
     }
   }
 

webapp/src/app/core/sentry/sentry.error-handler.ts

@@ -0,0 +1,47 @@
+import { ErrorHandler, Injectable } from '@angular/core';
+import { environment } from 'environments/environment';
+import * as Sentry from '@sentry/angular';
+
+@Injectable({ providedIn: 'root' })
+export class SentryErrorHandler extends ErrorHandler {
+  private environment = environment;
+
+  constructor() {
+    super();
+  }
+
+  /**
+   * Initialize Sentry with environment.
+   */
+  async init() {
+    const env = this.environment;
+    if (!env || !env.version || !env.sentry?.dsn) {
+      return;
+    }
+
+    Sentry.init({
+      dsn: env.sentry.dsn,
+      release: env.version,
+      environment: env.sentry.environment,
+      integrations: [Sentry.browserTracingIntegration()],
+      tracesSampleRate: env.sentry.environment !== 'prod' ? 1.0 : 0.2
+    });
+  }
+
+  /**
+   * Send an HttpError to Sentry. Only if it's not in the range 400-499.
+   * @param error
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  override handleError(error: any): void {
+    if (error && error.name === 'HttpErrorResponse' && error.status < 500 && error.status >= 400) {
+      super.handleError(error);
+      return;
+    }
+    if (this.environment.sentry.environment !== 'local') {
+      const exception = error.error || error.message || error.originalError || error;
+      Sentry.captureException(exception);
+    }
+    super.handleError(error);
+  }
+}

webapp/src/environments/environment.prod.ts

@@ -1,6 +1,11 @@
 export const environment = {
   clientUrl: 'http://localhost:4200',
   serverUrl: 'http://localhost:8080',
+  version: '0.0.1',
+  sentry: {
+    dsn: 'https://[email protected]/3',
+    environment: 'prod'
+  },
   keycloak: {
     url: 'http://localhost:8081',
     realm: 'hephaestus',

webapp/src/environments/environment.ts

@@ -1,6 +1,11 @@
 export const environment = {
   clientUrl: 'http://localhost:4200',
   serverUrl: 'http://localhost:8080',
+  version: '0.0.1',
+  sentry: {
+    dsn: 'https://[email protected]/3',
+    environment: 'prod'
+  },
   keycloak: {
     url: 'http://localhost:8081',
     realm: 'hephaestus',