From 0398436d8ca0d48487b48a49b764df0ca2e774f2 Mon Sep 17 00:00:00 2001 From: Chneemann Date: Sun, 15 Sep 2024 09:20:06 +0200 Subject: [PATCH] Integrate Sentry for error tracking and monitoring --- package-lock.json | 124 ++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/app/app.config.ts | 24 +++++++- src/main.ts | 21 ++++++- 4 files changed, 166 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5e4e7ae..afd3a00 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@angular/router": "^17.2.0", "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^8.0.0", + "@sentry/angular": "^8.30.0", "crypto-es": "^2.1.0", "ngx-color-picker": "^16.0.0", "rxjs": "~7.8.0", @@ -4178,6 +4179,129 @@ "yarn": ">= 1.13.0" } }, + "node_modules/@sentry-internal/browser-utils": { + "version": "8.30.0", + "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.30.0.tgz", + "integrity": "sha512-pwX+awNWaxSOAsBLVLqc1+Hw+Fm1Nci9mbKFA6Ed5YzCG049PnBVQwugpmx2dcyyCqJpORhcIqb9jHdCkYmCiA==", + "dependencies": { + "@sentry/core": "8.30.0", + "@sentry/types": "8.30.0", + "@sentry/utils": "8.30.0" + }, + "engines": { + "node": ">=14.18" + } + }, + "node_modules/@sentry-internal/feedback": { + "version": "8.30.0", + "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-8.30.0.tgz", + "integrity": "sha512-ParFRxQY6helxkwUDmro77Wc5uSIC6rZos88jYMrYwFmoTJaNWf4lDzPyECfdSiSYyzSMZk4dorSUN85Ul7DCg==", + "dependencies": { + "@sentry/core": "8.30.0", + "@sentry/types": "8.30.0", + "@sentry/utils": "8.30.0" + }, + "engines": { + "node": ">=14.18" + } + }, + "node_modules/@sentry-internal/replay": { + "version": "8.30.0", + "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-8.30.0.tgz", + "integrity": "sha512-/KFre+BrovPCiovgAu5N1ErJtkDVzkJA5hV3Jw011AlxRWxrmPwu6+9sV9/rn3tqYAGyq6IggYqeIOHhLh1Ihg==", + "dependencies": { + "@sentry-internal/browser-utils": "8.30.0", + "@sentry/core": "8.30.0", + "@sentry/types": "8.30.0", + "@sentry/utils": "8.30.0" + }, + "engines": { + "node": ">=14.18" + } + }, + "node_modules/@sentry-internal/replay-canvas": { + "version": "8.30.0", + "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-8.30.0.tgz", + "integrity": "sha512-y/QqcvchhtMlVA6eOZicIfTxtZarazQZJuFW0018ynPxBTiuuWSxMCLqduulXUYsFejfD8/eKHb3BpCIFdDYjg==", + "dependencies": { + "@sentry-internal/replay": "8.30.0", + "@sentry/core": "8.30.0", + "@sentry/types": "8.30.0", + "@sentry/utils": "8.30.0" + }, + "engines": { + "node": ">=14.18" + } + }, + "node_modules/@sentry/angular": { + "version": "8.30.0", + "resolved": "https://registry.npmjs.org/@sentry/angular/-/angular-8.30.0.tgz", + "integrity": "sha512-JTHJJLRlR4UyizZxIA0ZkiQGSH7By/kOSJii4ePqM192+pOwKSN06HxxQGAjWTt5rkbRDNowZN8bt/KyLLMKyg==", + "dependencies": { + "@sentry/browser": "8.30.0", + "@sentry/core": "8.30.0", + "@sentry/types": "8.30.0", + "@sentry/utils": "8.30.0", + "tslib": "^2.4.1" + }, + "engines": { + "node": ">=14.18" + }, + "peerDependencies": { + "@angular/common": ">= 14.x <= 18.x", + "@angular/core": ">= 14.x <= 18.x", + "@angular/router": ">= 14.x <= 18.x", + "rxjs": "^6.5.5 || ^7.x" + } + }, + "node_modules/@sentry/browser": { + "version": "8.30.0", + "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-8.30.0.tgz", + "integrity": "sha512-M+tKqawH9S3CqlAIcqdZcHbcsNQkEa9MrPqPCYvXco3C4LRpNizJP2XwBiGQY2yK+fOSvbaWpPtlI938/wuRZQ==", + "dependencies": { + "@sentry-internal/browser-utils": "8.30.0", + "@sentry-internal/feedback": "8.30.0", + "@sentry-internal/replay": "8.30.0", + "@sentry-internal/replay-canvas": "8.30.0", + "@sentry/core": "8.30.0", + "@sentry/types": "8.30.0", + "@sentry/utils": "8.30.0" + }, + "engines": { + "node": ">=14.18" + } + }, + "node_modules/@sentry/core": { + "version": "8.30.0", + "resolved": "https://registry.npmjs.org/@sentry/core/-/core-8.30.0.tgz", + "integrity": "sha512-CJ/FuWLw0QEKGKXGL/nm9eaOdajEcmPekLuHAuOCxID7N07R9l9laz3vFbAkUZ97GGDv3sYrJZgywfY3Moropg==", + "dependencies": { + "@sentry/types": "8.30.0", + "@sentry/utils": "8.30.0" + }, + "engines": { + "node": ">=14.18" + } + }, + "node_modules/@sentry/types": { + "version": "8.30.0", + "resolved": "https://registry.npmjs.org/@sentry/types/-/types-8.30.0.tgz", + "integrity": "sha512-kgWW2BCjBmVlSQRG32GonHEVyeDbys74xf9mLPvynwHTgw3+NUlNAlEdu05xnb2ow4bCTHfbkS5G1zRgyv5k4Q==", + "engines": { + "node": ">=14.18" + } + }, + "node_modules/@sentry/utils": { + "version": "8.30.0", + "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-8.30.0.tgz", + "integrity": "sha512-wZxU2HWlzsnu8214Xy7S7cRIuD6h8Z5DnnkojJfX0i0NLooepZQk2824el1Q13AakLb7/S8CHSHXOMnCtoSduw==", + "dependencies": { + "@sentry/types": "8.30.0" + }, + "engines": { + "node": ">=14.18" + } + }, "node_modules/@sigstore/bundle": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@sigstore/bundle/-/bundle-2.2.0.tgz", diff --git a/package.json b/package.json index 8631d16..326c4cd 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@angular/router": "^17.2.0", "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^8.0.0", + "@sentry/angular": "^8.30.0", "crypto-es": "^2.1.0", "ngx-color-picker": "^16.0.0", "rxjs": "~7.8.0", diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 71fb14c..9bed380 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,5 +1,10 @@ -import { ApplicationConfig, importProvidersFrom } from '@angular/core'; -import { provideRouter, withViewTransitions } from '@angular/router'; +import { + APP_INITIALIZER, + ApplicationConfig, + ErrorHandler, + importProvidersFrom, +} from '@angular/core'; +import { provideRouter, Router, withViewTransitions } from '@angular/router'; import { routes } from './app.routes'; import { initializeApp, provideFirebaseApp } from '@angular/fire/app'; import { getFirestore, provideFirestore } from '@angular/fire/firestore'; @@ -12,6 +17,7 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; import { IMAGE_CONFIG } from '@angular/common'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { firebaseConfig } from './environments/config'; +import * as Sentry from '@sentry/angular'; export function createTranslateLoader(http: HttpClient) { return new TranslateHttpLoader(http, './assets/i18n/', '.json'); @@ -43,5 +49,19 @@ export const appConfig: ApplicationConfig = { disableImageLazyLoadWarning: true, }, }, + { + provide: ErrorHandler, + useValue: Sentry.createErrorHandler(), + }, + { + provide: Sentry.TraceService, + deps: [Router], + }, + { + provide: APP_INITIALIZER, + useFactory: () => () => {}, + deps: [Sentry.TraceService], + multi: true, + }, ], }; diff --git a/src/main.ts b/src/main.ts index 35b00f3..1d9d88e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,23 @@ import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from './app/app.config'; import { AppComponent } from './app/app.component'; +import * as Sentry from '@sentry/angular'; -bootstrapApplication(AppComponent, appConfig) - .catch((err) => console.error(err)); +Sentry.init({ + dsn: 'https://df34c1164e810880d864241d60cd2bdd@o4507955559464960.ingest.de.sentry.io/4507955637649488', + integrations: [ + Sentry.browserTracingIntegration(), + Sentry.replayIntegration(), + ], + // Tracing + tracesSampleRate: 1.0, // Capture 100% of the transactions + // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled + tracePropagationTargets: ['localhost', /^https:\/\/join\.andre-kempf\.com/], + // 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. +}); + +bootstrapApplication(AppComponent, appConfig).catch((err) => + console.error(err) +);