chore: add sentry error tracker

.github/workflows/main.yml

@@ -179,6 +179,9 @@ jobs:
           echo "//npm.pkg.github.com/:_authToken=${{ secrets.ORG_GITHUB_PACKAGES_PAT }}" > ~/.npmrc
           echo "registry=https://npm.pkg.github.com/dasch-swiss" >> ~/.npmrc
       - run: make docker-publish
+      - run: npm run sentry:sourcemaps
+        env:
+          SECRET_VARIABLE: ${{ secrets.SENTRY_AUTH_TOKEN }}
 
   trigger-dev-deployment:
     name: Trigger deployment to DEV

.gitignore

@@ -60,3 +60,6 @@ Thumbs.db
 #E2E
 /.nx
 apps/dsp-app/cypress/screenshots
+
+# Sentry Config File
+.sentryclirc

apps/dsp-app/src/app/app.module.ts

@@ -1,10 +1,11 @@
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
-import { ErrorHandler, NgModule, NgZone } from '@angular/core';
+import { APP_INITIALIZER, ErrorHandler, NgModule, NgZone } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Router } from '@angular/router';
 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
 import { MatJDNConvertibleCalendarDateAdapterModule } from '@dasch-swiss/jdnconvertiblecalendardateadapter';
 import { AdvancedSearchComponent } from '@dasch-swiss/vre/advanced-search';
@@ -35,6 +36,7 @@ import {
 } from '@dasch-swiss/vre/shared/app-string-literal';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import * as Sentry from '@sentry/angular-ivy';
 import { IMaskModule } from 'angular-imask';
 import { AngularSplitModule } from 'angular-split';
 import { PdfViewerModule } from 'ng2-pdf-viewer';
@@ -408,6 +410,16 @@ export function httpLoaderFactory(httpClient: HttpClient) {
       useClass: IiifWithCredentialsInterceptor,
       multi: true,
     },
+    {
+      provide: Sentry.TraceService,
+      deps: [Router],
+    },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: () => () => {},
+      deps: [Sentry.TraceService],
+      multi: true,
+    },
   ],
   bootstrap: [AppComponent],
 })

apps/dsp-app/src/main.ts

@@ -1,14 +1,36 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { AppConfigToken } from '@dasch-swiss/vre/shared/app-config';
+import * as Sentry from '@sentry/angular-ivy';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
+function initSentry(environmentName: string) {
+  Sentry.init({
+    dsn: 'https://20bfc69ec9e457239886c1128cc17928@o4506122165747712.ingest.us.sentry.io/4506122171252736',
+    environment: environmentName,
+    release: environment.version,
+    integrations: [
+      Sentry.browserTracingIntegration(),
+      Sentry.replayIntegration({
+        maskAllText: false,
+        blockAllMedia: false,
+      }),
+    ],
+    // Performance Monitoring
+    tracesSampleRate: 1.0, //  Capture 100% of the transactions
+    // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+    tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
+    // Session Replay
+    replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+    replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+  });
+}
+
 function configListener() {
   try {
     const configuration = JSON.parse(this.responseText);
-
+    initSentry(configuration.instrumentation.environment);
     // pass config to bootstrap process using an injection token
     // which will make the encapsulated value available inside
     // services that inject this token
@@ -19,7 +41,6 @@ function configListener() {
     console.error(error);
   }
 }
-
 function configFailed() {
   console.error('Error: retrieving config.json');
 }

libs/vre/shared/app-error-handler/src/lib/app-error-handler.ts

@@ -3,6 +3,8 @@ import { ErrorHandler, Injectable, NgZone } from '@angular/core';
 import { ApiResponseError } from '@dasch-swiss/dsp-js';
 import { AppConfigService } from '@dasch-swiss/vre/shared/app-config';
 import { NotificationService } from '@dasch-swiss/vre/shared/app-notification';
+import * as Sentry from '@sentry/angular-ivy';
+import { SentryErrorHandler } from '@sentry/angular-ivy';
 import { AjaxError } from 'rxjs/ajax';
 import { AppError } from './app-error';
 
@@ -25,8 +27,11 @@ export class AppErrorHandler implements ErrorHandler {
       this.handleHttpErrorResponse(error);
     } else if (error instanceof AppError) {
       this.displayNotification(error.message);
-    } else if (this._appConfig.dspInstrumentationConfig.environment !== 'prod') {
-      console.error(error);
+    } else {
+      if (this._appConfig.dspInstrumentationConfig.environment !== 'prod') {
+        console.error(error);
+      }
+      this.sendErrorToSentry(error);
     }
   }
 
@@ -85,4 +90,8 @@ export class AppErrorHandler implements ErrorHandler {
       this.displayNotification(invalidRequestRegexMatch[1]);
     }
   }
+
+  private sendErrorToSentry(error: any) {
+    Sentry.captureException(error);
+  }
 }