TECH-13: Add Sentry user & fix sending errors

.github/workflows/main.yaml

@@ -23,7 +23,6 @@ jobs:
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
         with:
           sourcemaps: ./dist/browser
-          environment: ${{ startsWith(github.ref_name, 'epic/') && 'staging' || 'production' }}
           set_commits: skip
       - name: Remove source maps
         run: find dist/browser -type f -name '*.map' -delete

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "ng serve --proxy-config proxy.conf.js --port 8000",
+    "start": ". ./.env && ng serve --proxy-config proxy.conf.js --port 8000 --define \"SENTRY_DSN='${SENTRY_DSN}'\"",
     "stage": "cross-env NODE_ENV=stage ng serve --proxy-config proxy.conf.js --port 8001 --configuration=stage",
     "fix": "npm run i18n:extract && npm run spell:fix && npm run lint:fix && npm run format:fix",
     "build": "ng build",

src/app/app.module.ts

@@ -2,7 +2,14 @@ import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { CommonModule } from '@angular/common';
 import { provideHttpClient, withInterceptorsFromDi, withXhr } from '@angular/common/http';
-import { LOCALE_ID, NgModule, inject, isDevMode, provideAppInitializer } from '@angular/core';
+import {
+    ErrorHandler,
+    LOCALE_ID,
+    NgModule,
+    inject,
+    isDevMode,
+    provideAppInitializer,
+} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import {
     DateAdapter,
@@ -27,6 +34,7 @@ import { ErrorModule } from '@dsh/app/shared/services';
 import { createDateRangeWithPresetSerializer } from '@dsh/components/date-range-filter';
 import { BootstrapIconModule, SpinnerModule } from '@dsh/components/indicators';
 import { TRANSLOCO_SCOPE, TranslocoModule, provideTransloco } from '@jsverse/transloco';
+import * as Sentry from '@sentry/angular';
 
 import { QUERY_PARAMS_SERIALIZERS } from '@vality/matez';
 
@@ -73,6 +81,10 @@ import { TranslocoHttpLoaderService } from './transloco-http-loader.service';
     ],
     providers: [
         LanguageService,
+        {
+            provide: ErrorHandler,
+            useValue: Sentry.createErrorHandler(),
+        },
         provideAppInitializer(() => {
             const initializerFn = initializer(
                 inject(ConfigService),

src/app/initializer.ts

@@ -1,3 +1,5 @@
+import * as Sentry from '@sentry/angular';
+
 import { environment } from '../environments';
 
 import { KeycloakService } from './auth/keycloak';
@@ -19,17 +21,25 @@ export const initializer =
             configService.init({ configUrl: environment.appConfigPath }).then(() =>
                 Promise.all([
                     themeManager.init(),
-                    keycloakService.init({
-                        config: environment.authConfigPath,
-                        initOptions: {
-                            onLoad: 'login-required',
-                            checkLoginIframe: true,
-                        },
-                        loadUserProfileAtStartUp: true,
-                        enableBearerInterceptor: true,
-                        bearerExcludedUrls: ['/assets'],
-                        bearerPrefix: 'Bearer',
-                    }),
+                    keycloakService
+                        .init({
+                            config: environment.authConfigPath,
+                            initOptions: {
+                                onLoad: 'login-required',
+                                checkLoginIframe: true,
+                            },
+                            loadUserProfileAtStartUp: true,
+                            enableBearerInterceptor: true,
+                            bearerExcludedUrls: ['/assets'],
+                            bearerPrefix: 'Bearer',
+                        })
+                        .then(async () => {
+                            if (SENTRY_DSN) {
+                                const { id, username, email } =
+                                    await keycloakService.loadUserProfile();
+                                Sentry.setUser({ id, username, email });
+                            }
+                        }),
                 ]),
             ),
             languageService.init(),

src/main.ts

@@ -7,10 +7,20 @@ import { environment } from './environments/environment';
 
 if (environment.production) {
     enableProdMode();
+}
 
+if (SENTRY_DSN) {
     Sentry.init({
         dsn: SENTRY_DSN,
-        integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
+        environment: environment.production ? 'production' : 'development',
+        integrations: [
+            Sentry.browserTracingIntegration(),
+            Sentry.replayIntegration({
+                maskAllText: true,
+                maskAllInputs: true,
+                blockAllMedia: true,
+            }),
+        ],
         tracesSampleRate: 1,
         replaysSessionSampleRate: 1,
         replaysOnErrorSampleRate: 1,