➕ ajout de sentry pour le tracking des erreurs

Author: mckenziearts

package-lock.json

@@ -22,6 +22,8 @@
     "@ngrx/router-store": "^13.2.0",
     "@ngrx/store": "^13.2.0",
     "@ngrx/store-devtools": "^13.2.0",
+    "@sentry/angular": "^7.12.1",
+    "@sentry/tracing": "^7.12.1",
     "@tailwindcss/aspect-ratio": "^0.4.1",
     "@tailwindcss/forms": "^0.5.2",
     "@tailwindcss/line-clamp": "^0.4.1",

package.json

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { APP_INITIALIZER, ErrorHandler, NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -7,12 +7,14 @@ import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreRouterConnectingModule } from '@ngrx/router-store';
+import * as Sentry from '@sentry/angular';
 
 import { environment } from '../environments/environment';
 import { AppRoutingModule } from './core/routes/app-routing.module';
 import { AppComponent } from './core/components/app/app.component';
 import { ROOT_REDUCERS } from './core/store/app.store';
 import { ROOT_EFFECTS } from './core/store/app.effects';
+import { Router } from '@angular/router';
 
 @NgModule({
   declarations: [
@@ -30,7 +32,24 @@ import { ROOT_EFFECTS } from './core/store/app.effects';
     StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }),
     StoreRouterConnectingModule.forRoot(),
   ],
-  providers: [],
+  providers: [
+    {
+      provide: ErrorHandler,
+      useValue: Sentry.createErrorHandler({
+        showDialog: true,
+      }),
+    },
+    {
+      provide: Sentry.TraceService,
+      deps: [Router],
+    },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: () => () => {},
+      deps: [Sentry.TraceService],
+      multi: true,
+    },
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule { }

src/app/app.module.ts

@@ -6,7 +6,7 @@ declare var process: {
     NG_APP_BASE_URL: string;
     NG_APP_API_URL: string;
     NG_APP_API_VERSION: string;
-    NG_APP_SENTRY_DSN: string | null;
-    NG_APP_SENTRY_TRACES_SAMPLE_RATE: string;
+    NG_APP_SENTRY_DSN: string | undefined;
+    NG_APP_SENTRY_TRACES_SAMPLE_RATE: number | undefined;
   };
 };

src/env.d.ts

@@ -1,12 +1,30 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import * as Sentry from "@sentry/angular";
+import { BrowserTracing } from "@sentry/tracing";
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
+Sentry.init({
+  dsn: process.env.NG_APP_SENTRY_DSN,
+  integrations: [
+    new BrowserTracing({
+      tracingOrigins: ["localhost", "https://yourserver.io/api"],
+      routingInstrumentation: Sentry.routingInstrumentation,
+    }),
+  ],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: process.env.NG_APP_SENTRY_TRACES_SAMPLE_RATE,
+});
+
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
   .catch(err => console.error(err));