Add sentry config and btn to test

Author: miris-mp

src/Website/Dockerfile

@@ -9,6 +9,9 @@ ENV GOOGLE_MAPS_API=$ARG_GOOGLE_MAPS_API
 ARG ARG_SEND_IN_BLUE_API
 ENV SEND_IN_BLUE_API=$ARG_SEND_IN_BLUE_API
 
+ARG ARG_SENTRY_DSN
+ENV SENTRY_DSN=$ARG_SENTRY_DSN
+
 WORKDIR /app
 
 # Add `/app/node_modules/.bin` to $PATH

src/Website/package-lock.json

@@ -29,6 +29,7 @@
     "@googlemaps/markerclusterer": "^2.5.3",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
+    "@sentry/angular": "^8.47.0",
     "@swimlane/ngx-charts": "^20.5.0",
     "@types/leaflet": "^1.9.12",
     "blurhash": "^2.0.5",

src/Website/package.json

@@ -1,5 +1,8 @@
 #! /bin/sh
 sed -i "s/#GOOGLEMAPSAPI#/$GOOGLE_MAPS_API/" src/index.html
+
 sed -i "s/#SENDINBLUEAPI#/$SEND_IN_BLUE_API/" src/environments/environment.ts
 sed -i "s/#SENDINBLUEAPI#/$SEND_IN_BLUE_API/" src/environments/environment.prod.ts
 
+sed -i "s/#SENTRYDSN#/$SENTRY_DSN" src/environments/environment.ts
+sed -i "s/#SENTRYDSN#/$SENTRY_DSN/" src/environments/environment.prod.ts

src/Website/process_apikeys.sh

@@ -1,5 +1,6 @@
 import { BrowserModule } from "@angular/platform-browser";
-import { APP_INITIALIZER, LOCALE_ID, NgModule } from "@angular/core";
+import { APP_INITIALIZER, LOCALE_ID, NgModule, ErrorHandler } from "@angular/core";
+import { Router } from "@angular/router";
 
 import { AppComponent } from "./app.component";
 import { TranslateHttpLoader } from "@ngx-translate/http-loader";
@@ -61,6 +62,7 @@ import { CommonModule, registerLocaleData } from "@angular/common";
 import { ContactFormComponent } from "./_forms/contact/forms-contact.directive";
 import { ContactsComponent } from "./pages/contacts/contacts.component";
 import { CookieService } from "ngx-cookie-service";
+import * as Sentry from "@sentry/angular";
 
 import { environment } from "../environments/environment";
 import { GoogleMapsModule } from "@angular/google-maps";
@@ -90,7 +92,6 @@ import { VolontarxComponent } from "./pages/pesaro2024-section/volontarx/volonta
 import { SearchSourceComponent } from "./user/components/user-access-list/search-source/search-source.component";
 import { AlbergatoriComponent } from "./pages/pesaro2024-section/albergatori/albergatori.component";
 import localeIt from "@angular/common/locales/it";
-import { Sharper2024Component } from "./pages/uniurb/sharper2024/sharper2024.component";
 import { StoreLogosComponent } from "./components/store-logos/store-logos.component";
 
 // AoT requires an exported function for factories
@@ -115,6 +116,23 @@ export function translateFactory(translate: TranslateService): any {
 
 export const isMock = environment.mock;
 
+const httpInterceptorProviders = environment.mock
+  ? [
+      {
+        provide: HTTP_INTERCEPTORS,
+        useClass: HttpMockRequestInterceptor,
+        multi: true,
+      },
+    ]
+  : [
+      {
+        provide: HTTP_INTERCEPTORS,
+        useClass: TokenInterceptorService,
+        multi: true,
+      },
+    ];
+
+
 @NgModule({
   declarations: [
     AboutComponent,
@@ -196,8 +214,6 @@ export const isMock = environment.mock;
     OverlayModule,
     ReactiveFormsModule,
     SharedModule,
-    TranslateModule,
-    TranslateModule,
     LayoutModule,
     NgChartsModule,
     SearchSourceComponent,
@@ -210,25 +226,25 @@ export const isMock = environment.mock;
       deps: [TranslateService],
       multi: true,
     },
-    isMock
-      ? [
-          {
-            provide: HTTP_INTERCEPTORS,
-            useClass: HttpMockRequestInterceptor,
-            multi: true,
-          },
-          CookieService,
-        ]
-      : [
-          {
-            provide: HTTP_INTERCEPTORS,
-            useClass: TokenInterceptorService,
-            multi: true,
-          },
-          CookieService,
-        ],
+    {
+      provide: APP_INITIALIZER,
+      useFactory: () => () => {},
+      deps: [Sentry.TraceService],
+      multi: true,
+    },
+    ...httpInterceptorProviders,
+    CookieService,
     provideHttpClient(withInterceptorsFromDi()),
     { provide: LOCALE_ID, useValue: "it-IT" },
+    {
+      provide: ErrorHandler,
+      useValue: Sentry.createErrorHandler(),
+    },
+    {
+      provide: Sentry.TraceService,
+      deps: [Router],
+    },
+
   ],
 })
 export class AppModule {

src/Website/src/app/app.module.ts

@@ -1,4 +1,5 @@
 <div class="flex justify-center items-center">
+  <button (click)="throwTestError()">Test Sentry Error</button>
   <mat-card>
     <mat-card-content>
       <form [formGroup]="form" (ngSubmit)="onSubmit()">

src/Website/src/app/authentication/signin/signin.component.html

@@ -83,4 +83,9 @@ export class SignInComponent implements OnInit {
             this.formSubmitAttempt = true;
         }
     }
+
+    throwTestError(): void {
+        throw new Error("Sentry Test Error");
+      }
+      
 }

src/Website/src/app/authentication/signin/signin.component.ts

@@ -86,7 +86,7 @@ <h2 class="text-xl font-semibold">WOM Consumati</h2>
       </div>
 
       <!-- Bar Chart for Consumption over Time -->
-      <div class="flex justify-center gap-6 mt-6">
+      <div class="flex flex-col lg:flex-row justify-center gap-6 mt-6">
         <div>
           <div
             class="card-stat"
@@ -304,7 +304,7 @@ <h2 class="text-xl font-semibold">WOM Generati e Riscossi</h2>
         </div>
       </div>
 
-      <div class="flex mt-6 gap-6">
+      <div class="flex flex-col lg:flex-row  mt-6 gap-6">
         <!-- Bar Chart for Generated and Redeemed Over Time -->
         <div class="card-stat">
           <ng-container *ngIf="totalGeneratedOverTime">

src/Website/src/app/user/statistics/admin-role/admin-role.component.html

@@ -9,5 +9,6 @@ export const environment = {
   i18n: '1.1.0',
   noreplyEmail: '[email protected]',
   baseEmail: '[email protected]',
-  sendInBlueApiKey: '#SENDINBLUEAPI#'
+  sendInBlueApiKey: '#SENDINBLUEAPI#',
+  sentryDsn: "#SENTRYDSN#",
 };

src/Website/src/environments/environment.prod.ts

@@ -14,7 +14,8 @@ export const environment = {
     i18n: '1.1.0',
     noreplyEmail: '[email protected]',
     baseEmail: '[email protected]',
-    sendInBlueApiKey: '#SENDINBLUEAPI#'
+    sendInBlueApiKey: '#SENDINBLUEAPI#',
+    sentryDsn: "#SENTRYDSN#",
 };
 
 /*

src/Website/src/environments/environment.ts

@@ -4,6 +4,38 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
+import * as Sentry from "@sentry/angular";
+
+Sentry.init({
+  dsn: environment.sentryDsn,
+  integrations: [
+    // Registers and configures the Tracing integration,
+    // which automatically instruments your application to monitor its
+    // performance, including custom Angular routing instrumentation
+    Sentry.browserTracingIntegration(),
+    // Registers the Replay integration,
+    // which automatically captures Session Replays
+    Sentry.replayIntegration(),
+  ],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for tracing.
+  // We recommend adjusting this value in production
+  // Learn more at
+  // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
+  tracesSampleRate: 1.0,
+
+  // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
+  tracePropagationTargets: ["localhost", environment.baseUrl],
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  // Learn more at
+  // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+});
+
 if (environment.production) {
   enableProdMode();
 }