fix(logging): use sentry-angular with special providers and tracing

Author: sleidig

package-lock.json

@@ -42,7 +42,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@ngneat/until-destroy": "^10.0.0",
-    "@sentry/browser": "^8.20.0",
+    "@sentry/angular": "^8.20.0",
     "angulartics2": "^14.0.0",
     "assert": "^2.1.0",
     "crypto-es": "^2.1.0",

package.json

@@ -17,8 +17,15 @@
 
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { ErrorHandler, Inject, LOCALE_ID, NgModule } from "@angular/core";
+import {
+  APP_INITIALIZER,
+  ErrorHandler,
+  Inject,
+  LOCALE_ID,
+  NgModule,
+} from "@angular/core";
 import { HttpClientModule } from "@angular/common/http";
+import * as Sentry from "@sentry/angular";
 
 import { AppComponent } from "./app.component";
 import { allRoutes } from "./app.routing";
@@ -31,7 +38,6 @@ import {
   SwRegistrationOptions,
 } from "@angular/service-worker";
 import { environment } from "../environments/environment";
-import { LoggingErrorHandler } from "./core/logging/logging-error-handler";
 import { AnalyticsService } from "./core/analytics/analytics.service";
 import { ConfigurableEnumModule } from "./core/basic-datatypes/configurable-enum/configurable-enum.module";
 import { MatPaginatorIntl } from "@angular/material/paginator";
@@ -75,7 +81,7 @@ import { HistoricalDataModule } from "./features/historical-data/historical-data
 import { MatchingEntitiesModule } from "./features/matching-entities/matching-entities.module";
 import { ProgressDashboardWidgetModule } from "./features/dashboard-widgets/progress-dashboard-widget/progress-dashboard-widget.module";
 import { ReportingModule } from "./features/reporting/reporting.module";
-import { RouterModule } from "@angular/router";
+import { Router, RouterModule } from "@angular/router";
 import { TodosModule } from "./features/todos/todos.module";
 import moment from "moment";
 import { getLocaleFirstDayOfWeek } from "@angular/common";
@@ -141,7 +147,22 @@ import { AdminModule } from "./core/admin/admin.module";
     MatDialogModule,
   ],
   providers: [
-    { provide: ErrorHandler, useClass: LoggingErrorHandler },
+    /* Sentry setup */
+    {
+      provide: ErrorHandler,
+      useValue: Sentry.createErrorHandler(),
+    },
+    {
+      provide: Sentry.TraceService,
+      deps: [Router],
+    },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: () => () => {},
+      deps: [Sentry.TraceService],
+      multi: true,
+    },
+
     { provide: MatPaginatorIntl, useValue: TranslatableMatPaginator() },
     { provide: ComponentRegistry, useValue: componentRegistry },
     { provide: EntityRegistry, useValue: entityRegistry },

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { LogLevel } from "./log-level";
-import * as Sentry from "@sentry/browser";
+import * as Sentry from "@sentry/angular";
 import { environment } from "../../../environments/environment";
 
 /* eslint-disable no-console */

src/app/core/logging/logging-error-handler.ts

@@ -2,7 +2,7 @@ import { Component, Inject, OnInit } from "@angular/core";
 import { LOCATION_TOKEN, WINDOW_TOKEN } from "../../../utils/di-tokens";
 import { SyncState } from "../../session/session-states/sync-state.enum";
 import { SwUpdate } from "@angular/service-worker";
-import * as Sentry from "@sentry/browser";
+import * as Sentry from "@sentry/angular";
 import { ConfirmationDialogService } from "../../common-components/confirmation-dialog/confirmation-dialog.service";
 import { HttpClient } from "@angular/common/http";
 import { environment } from "../../../../environments/environment";