Add basic Sentry tracing

package.json

@@ -27,6 +27,8 @@
     "@fortawesome/fontawesome-free": "^5.15.3",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^4.0.0",
+    "@sentry/angular": "^6.10.0",
+    "@sentry/tracing": "^6.10.0",
     "@swimlane/ngx-charts": "^18.0.1",
     "@types/mapbox-gl": "^1.13.1",
     "bulma": "^0.9.2",

src/app/app.module.ts

@@ -1,8 +1,9 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { APP_INITIALIZER, ErrorHandler, NgModule } from '@angular/core';
+import { Router } from "@angular/router";
 
 import { CommonModule } from '@angular/common';
-import { HttpClientModule, HttpClient } from '@angular/common/http'; 
+import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { FormsModule,ReactiveFormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -19,6 +20,7 @@ import { ThemeService } from './services/theme.service';
 
 import { LOCALE_ID } from '@angular/core';
 import { registerLocaleData } from '@angular/common';
+import * as Sentry from "@sentry/angular";
 import localeDe from '@angular/common/locales/de';
 
 registerLocaleData(localeDe, 'de-DE');
@@ -54,7 +56,23 @@ export function HttpLoaderFactory(http: HttpClient) {
   ],
   providers: [
     ThemeService,
-    { provide: LOCALE_ID, useValue: "de-DE" }
+    { provide: LOCALE_ID, useValue: "de-DE" },
+    {
+      provide: ErrorHandler,
+      useValue: Sentry.createErrorHandler({
+        showDialog: false
+      })
+    },
+    {
+      provide: Sentry.TraceService,
+      deps: [Router]
+    },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: () => () => {},
+      deps: [Sentry.TraceService],
+      multi: true
+    }
   ],
   bootstrap: [AppComponent]
 })

src/main.ts

@@ -1,5 +1,25 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import * as Sentry from '@sentry/angular';
+import { Integrations } from "@sentry/tracing";
+
+// Init Sentry as soon as possible during application load up and before initializing Angular
+// https://docs.sentry.io/platforms/javascript/guides/angular/configuration/options/
+Sentry.init({
+  environment: (environment.production) ? 'production' : 'development',
+  dsn: "https://3dca81a89894465e8cc92852c7c36db8@o507029.ingest.sentry.io/5891080",
+  integrations: [
+    new Integrations.BrowserTracing({
+      tracingOrigins: ["localhost"],
+      routingInstrumentation: Sentry.routingInstrumentation,
+    }),
+  ],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+});
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';