[eng-8741] Added Sentry to the app

.gitignore

@@ -6,6 +6,7 @@
 /tmp
 /out-tsc
 /bazel-out
+/src/assets/config/config.json 
 
 # Node
 /node_modules

README.md

@@ -18,6 +18,7 @@ take up to 60 seconds once the docker build finishes.
 
 - Install git commit template: [Commit Template](docs/commit.template.md).
 - [Volta](#volta)
+- 3rd-party tokens [Configuration](#configuration)
 
 ### Recommended
 
@@ -59,3 +60,9 @@ npm run test:check-coverage-thresholds
 
 OSF uses volta to manage node and npm versions inside of the repository
 Install Volta from [volta](https://volta.sh/) and it will automatically pin Node/npm per the repo toolchain.
+
+## Configuration
+
+OSF uses an `assets/config/config.json` file for any 3rd-party tokens. This file is not committed to the repo.
+
+There is a `assets/config/template.json` file that can be copied to `assets/config/config.json` to store any 3rd-party tokens locally.

package.json

@@ -47,7 +47,9 @@
     "@ngxs/logger-plugin": "^19.0.0",
     "@ngxs/store": "^19.0.0",
     "@primeng/themes": "^19.0.9",
+    "@sentry/angular": "^10.10.0",
     "ace-builds": "^1.42.0",
+    "angular-google-tag-manager": "^1.11.0",
     "cedar-artifact-viewer": "^0.9.5",
     "cedar-embeddable-editor": "^1.5.0",
     "chart.js": "^4.4.9",

src/app/app.component.spec.ts

@@ -2,51 +2,101 @@ import { provideStore, Store } from '@ngxs/store';
 
 import { MockComponents } from 'ng-mocks';
 
-import { provideHttpClient } from '@angular/common/http';
-import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { Subject } from 'rxjs';
+
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NavigationEnd, Router } from '@angular/router';
 
+import { OSFConfigService } from '@core/services/osf-config.service';
 import { GetCurrentUser, UserState } from '@core/store/user';
 import { UserEmailsState } from '@core/store/user-emails';
 
 import { FullScreenLoaderComponent, ToastComponent } from './shared/components';
 import { TranslateServiceMock } from './shared/mocks';
 import { AppComponent } from './app.component';
 
-describe('AppComponent', () => {
-  let component: AppComponent;
+import { OSFTestingModule } from '@testing/osf.testing.module';
+import { GoogleTagManagerService } from 'angular-google-tag-manager';
+
+describe('Component: App', () => {
+  let routerEvents$: Subject<any>;
+  let gtmServiceMock: jest.Mocked<GoogleTagManagerService>;
+  let osfConfigServiceMock: OSFConfigService;
   let fixture: ComponentFixture<AppComponent>;
 
   beforeEach(async () => {
+    routerEvents$ = new Subject();
+
+    gtmServiceMock = {
+      pushTag: jest.fn(),
+    } as any;
+
     await TestBed.configureTestingModule({
-      imports: [AppComponent, ...MockComponents(ToastComponent, FullScreenLoaderComponent)],
+      imports: [OSFTestingModule, AppComponent, ...MockComponents(ToastComponent, FullScreenLoaderComponent)],
       providers: [
         provideStore([UserState, UserEmailsState]),
-        provideHttpClient(),
-        provideHttpClientTesting(),
         TranslateServiceMock,
+        { provide: GoogleTagManagerService, useValue: gtmServiceMock },
+        {
+          provide: Router,
+          useValue: {
+            events: routerEvents$.asObservable(),
+          },
+        },
+        {
+          provide: OSFConfigService,
+          useValue: {
+            has: jest.fn(),
+          },
+        },
       ],
     }).compileComponents();
 
+    osfConfigServiceMock = TestBed.inject(OSFConfigService);
     fixture = TestBed.createComponent(AppComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+  describe('detect changes', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should dispatch GetCurrentUser action on initialization', () => {
+      const store = TestBed.inject(Store);
+      const dispatchSpy = jest.spyOn(store, 'dispatch');
+      store.dispatch(GetCurrentUser);
+      expect(dispatchSpy).toHaveBeenCalledWith(GetCurrentUser);
+    });
 
-  it('should dispatch GetCurrentUser action on initialization', () => {
-    const store = TestBed.inject(Store);
-    const dispatchSpy = jest.spyOn(store, 'dispatch');
-    store.dispatch(GetCurrentUser);
-    expect(dispatchSpy).toHaveBeenCalledWith(GetCurrentUser);
+    it('should render router outlet', () => {
+      const routerOutlet = fixture.debugElement.query(By.css('router-outlet'));
+      expect(routerOutlet).toBeTruthy();
+    });
   });
 
-  it('should render router outlet', () => {
-    const routerOutlet = fixture.debugElement.query(By.css('router-outlet'));
-    expect(routerOutlet).toBeTruthy();
+  describe('Google Tag Manager', () => {
+    it('should push GTM tag on NavigationEnd with google tag id', () => {
+      jest.spyOn(osfConfigServiceMock, 'has').mockReturnValue(true);
+      fixture.detectChanges();
+      const event = new NavigationEnd(1, '/previous', '/current');
+
+      routerEvents$.next(event);
+
+      expect(gtmServiceMock.pushTag).toHaveBeenCalledWith({
+        event: 'page',
+        pageName: '/current',
+      });
+    });
+
+    it('should not push GTM tag on NavigationEnd with google tag id', () => {
+      jest.spyOn(osfConfigServiceMock, 'has').mockReturnValue(false);
+      fixture.detectChanges();
+      const event = new NavigationEnd(1, '/previous', '/current');
+
+      routerEvents$.next(event);
+
+      expect(gtmServiceMock.pushTag).not.toHaveBeenCalled();
+    });
   });
 });

src/app/app.component.ts

@@ -4,15 +4,21 @@ import { TranslateService } from '@ngx-translate/core';
 
 import { DialogService } from 'primeng/dynamicdialog';
 
-import { ChangeDetectionStrategy, Component, effect, inject, OnInit } from '@angular/core';
-import { Router, RouterOutlet } from '@angular/router';
+import { filter } from 'rxjs';
 
+import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, OnInit } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
+
+import { OSFConfigService } from '@core/services/osf-config.service';
 import { GetCurrentUser } from '@core/store/user';
 import { GetEmails, UserEmailsSelectors } from '@core/store/user-emails';
 import { ConfirmEmailComponent } from '@shared/components';
 
 import { FullScreenLoaderComponent, ToastComponent } from './shared/components';
 
+import { GoogleTagManagerService } from 'angular-google-tag-manager';
+
 @Component({
   selector: 'osf-root',
   imports: [RouterOutlet, ToastComponent, FullScreenLoaderComponent],
@@ -22,9 +28,12 @@ import { FullScreenLoaderComponent, ToastComponent } from './shared/components';
   providers: [DialogService],
 })
 export class AppComponent implements OnInit {
+  private readonly googleTagManagerService = inject(GoogleTagManagerService);
+  private readonly destroyRef = inject(DestroyRef);
   private readonly dialogService = inject(DialogService);
   private readonly router = inject(Router);
   private readonly translateService = inject(TranslateService);
+  private readonly osfConfigService = inject(OSFConfigService);
 
   private readonly actions = createDispatchMap({ getCurrentUser: GetCurrentUser, getEmails: GetEmails });
 
@@ -41,6 +50,20 @@ export class AppComponent implements OnInit {
   ngOnInit(): void {
     this.actions.getCurrentUser();
     this.actions.getEmails();
+
+    if (this.osfConfigService.has('googleTagManagerId')) {
+      this.router.events
+        .pipe(
+          filter((event) => event instanceof NavigationEnd),
+          takeUntilDestroyed(this.destroyRef)
+        )
+        .subscribe((event: NavigationEnd) => {
+          this.googleTagManagerService.pushTag({
+            event: 'page',
+            pageName: event.urlAfterRedirects,
+          });
+        });
+    }
   }
 
   private showEmailDialog() {

src/app/app.config.ts

@@ -12,13 +12,15 @@ import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter } from '@angular/router';
 
 import { STATES } from '@core/constants';
+import { APPLICATION_INITIALIZATION_PROVIDER } from '@core/factory/application.initialization.factory';
 import { provideTranslation } from '@core/helpers';
 
-import { GlobalErrorHandler } from './core/handlers';
 import { authInterceptor, errorInterceptor, viewOnlyInterceptor } from './core/interceptors';
 import CustomPreset from './core/theme/custom-preset';
 import { routes } from './app.routes';
 
+import * as Sentry from '@sentry/angular';
+
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
@@ -41,6 +43,11 @@ export const appConfig: ApplicationConfig = {
     importProvidersFrom(TranslateModule.forRoot(provideTranslation())),
     ConfirmationService,
     MessageService,
-    { provide: ErrorHandler, useClass: GlobalErrorHandler },
+
+    APPLICATION_INITIALIZATION_PROVIDER,
+    {
+      provide: ErrorHandler,
+      useFactory: () => Sentry.createErrorHandler({ showDialog: false }),
+    },
   ],
 };