Frontend - Added sentry (#851)

Author: directcuteo

frontend/package-lock.json

@@ -31,6 +31,8 @@
     "@ngrx/router-store": "^17.2.0",
     "@ngrx/store": "^17.2.0",
     "@openmina/shared": "^0.102.0",
+    "@sentry/angular": "^8.35.0",
+    "@sentry/tracing": "^7.114.0",
     "base-x": "^5.0.0",
     "bs58check": "^4.0.0",
     "buffer": "^6.0.3",

frontend/package.json

@@ -1,4 +1,4 @@
-import { ErrorHandler, Injectable, LOCALE_ID, NgModule } from '@angular/core';
+import { APP_INITIALIZER, ErrorHandler, Injectable, LOCALE_ID, NgModule, Provider } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
@@ -33,6 +33,8 @@ import { HttpClientModule } from '@angular/common/http';
 import { NewNodeComponent } from './layout/new-node/new-node.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { WebNodeLandingPageComponent } from '@app/layout/web-node-landing-page/web-node-landing-page.component';
+import * as Sentry from '@sentry/angular';
+import { Router } from '@angular/router';
 
 registerLocaleData(localeFr, 'fr');
 registerLocaleData(localeEn, 'en');
@@ -41,7 +43,8 @@ registerLocaleData(localeEn, 'en');
 export class AppGlobalErrorhandler implements ErrorHandler {
   constructor(private errorHandlerService: GlobalErrorHandlerService) {}
 
-  handleError(error: any) {
+  handleError(error: any): void {
+    Sentry.captureException(error);
     this.errorHandlerService.handleError(error);
     console.error(error);
   }
@@ -88,6 +91,14 @@ export class AppGlobalErrorhandler implements ErrorHandler {
     THEME_PROVIDER,
     { provide: ErrorHandler, useClass: AppGlobalErrorhandler, deps: [GlobalErrorHandlerService] },
     { provide: LOCALE_ID, useValue: 'en' },
+    { provide: ErrorHandler, useValue: Sentry.createErrorHandler() },
+    { provide: Sentry.TraceService, deps: [Router] },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: () => () => {},
+      deps: [Sentry.TraceService],
+      multi: true,
+    },
   ],
   bootstrap: [AppComponent],
 })

frontend/src/app/app.module.ts

@@ -7,6 +7,7 @@ import { Selector, Store } from '@ngrx/store';
 import { MinaState } from '@app/app.setup';
 import { concatLatestFrom } from '@ngrx/effects';
 import { TypedAction } from '@ngrx/store/src/models';
+import * as Sentry from '@sentry/angular';
 
 export const catchErrorAndRepeat = <T>(errType: MinaErrorType, type: string, payload?: any): OperatorFunction<T, ErrorAdd | T | FeatureAction<any>> => {
   return (source: Observable<T>) =>
@@ -21,6 +22,7 @@ export const catchErrorAndRepeat = <T>(errType: MinaErrorType, type: string, pay
 
 export const addError = (error: HttpErrorResponse | Error, type: MinaErrorType): ErrorAdd => {
   console.error(error);
+  Sentry.captureException(error, { tags: { type } });
   return {
     type: ADD_ERROR,
     payload: {

frontend/src/app/shared/constants/store-functions.ts

@@ -6,6 +6,10 @@ export interface MinaEnv {
   hideNodeStats?: boolean;
   canAddNodes?: boolean;
   showWebNodeLandingPage?: boolean;
+  sentry?: {
+    dsn: string;
+    tracingOrigins: string[];
+  };
   globalConfig?: {
     features?: FeaturesConfig;
     graphQL?: string;

frontend/src/app/shared/types/core/environment/mina-env.type.ts

@@ -14,6 +14,10 @@ export default {
       'benchmarks': ['wallets'],
     },
   },
+  sentry: {
+    dsn: 'https://69aba72a6290383494290cf285ab13b3@o4508216158584832.ingest.de.sentry.io/4508216160616528',
+    tracingOrigins: ['https://www.openmina.com'],
+  },
   configs: [
     {
       name: 'Web Node',