feat(agora): add structured logging and error handling across components (AG-1787)

apps/agora/app/.env.example

@@ -2,6 +2,5 @@ API_DOCS_URL="http://localhost:8000/api-docs"
 APP_VERSION="local"
 CSR_API_URL="http://localhost:8000/api/v1"
 SSR_API_URL="http://agora-api:3333/v1"
-ROLLBAR_TOKEN="e788198867474855a996485580b08d03"
 TAG_NAME="local"
-GOOGLE_TAG_MANAGER_ID=""
+GOOGLE_TAG_MANAGER_ID=""

apps/agora/app/src/app/app.component.ts

@@ -6,7 +6,7 @@ import { AGORA_LOADING_ICON_COLORS, ConfigService } from '@sagebionetworks/agora
 import { SearchInputComponent } from '@sagebionetworks/agora/ui';
 import { footerLinks, headerLinks } from '@sagebionetworks/agora/util';
 import { LOADING_ICON_COLORS } from '@sagebionetworks/explorers/constants';
-import { MetaTagService, VersionService } from '@sagebionetworks/explorers/services';
+import { LoggerService, MetaTagService, VersionService } from '@sagebionetworks/explorers/services';
 import {
   ErrorOverlayComponent,
   FooterComponent,
@@ -47,6 +47,7 @@ import { ToastModule } from 'primeng/toast';
 })
 export class AppComponent implements OnInit {
   private readonly destroyRef = inject(DestroyRef);
+  private readonly logger = inject(LoggerService);
 
   configService = inject(ConfigService);
   dataVersionService = inject(DataVersionService);
@@ -75,22 +76,32 @@ export class AppComponent implements OnInit {
   }
 
   getDataVersion() {
+    this.logger.log('AppComponent: Loading data version');
+
     this.versionService
       .getDataVersion$(this.dataVersionService)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
         next: (v) => (this.dataVersion = v),
-        error: () => (this.dataVersion = 'unknown'),
+        error: () => {
+          this.dataVersion = 'unknown';
+          this.logger.error('Failed to get data version');
+        },
       });
   }
 
   getSiteVersion() {
+    this.logger.log('AppComponent: Loading site version');
+
     this.versionService
       .getSiteVersion$(this.configService.config)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
         next: (v) => (this.siteVersion = v),
-        error: () => (this.siteVersion = 'unknown'),
+        error: () => {
+          this.siteVersion = 'unknown';
+          this.logger.error('Failed to get site version');
+        },
       });
   }
 }

apps/agora/app/src/app/app.routes.ts

@@ -4,6 +4,7 @@ import {
   ROUTE_PATHS,
   SUPPORT_EMAIL,
 } from '@sagebionetworks/agora/config';
+import { SynapseWikiParams } from '@sagebionetworks/explorers/models';
 
 export const routes: Route[] = [
   {
@@ -17,19 +18,35 @@ export const routes: Route[] = [
   },
   {
     path: ROUTE_PATHS.ABOUT,
-    loadChildren: () => import('@sagebionetworks/agora/about').then((routes) => routes.routes),
+    loadChildren: () =>
+      import('@sagebionetworks/explorers/shared').then((routes) => routes.wikiHeroRoute),
     data: {
       title: 'About Agora',
       description:
         'Agora is funded by the National Institute on Aging, and is developed and maintained by Sage Bionetworks.',
+      heroTitle: 'About',
+      heroBackgroundImagePath: DEFAULT_HERO_BACKGROUND_IMAGE_PATH,
+      className: 'about-page-content',
+      wikiParams: {
+        ownerId: 'syn25913473',
+        wikiId: '612058',
+      } as SynapseWikiParams,
     },
   },
   {
     path: ROUTE_PATHS.NEWS,
-    loadChildren: () => import('@sagebionetworks/agora/news').then((routes) => routes.routes),
+    loadChildren: () =>
+      import('@sagebionetworks/explorers/shared').then((routes) => routes.wikiHeroRoute),
     data: {
       title: 'News | Agora Releases',
       description: "See what's new in Agora, from new features to our latest data updates.",
+      heroTitle: 'Agora News',
+      heroBackgroundImagePath: DEFAULT_HERO_BACKGROUND_IMAGE_PATH,
+      className: 'news-page-content',
+      wikiParams: {
+        ownerId: 'syn25913473',
+        wikiId: '611426',
+      } as SynapseWikiParams,
     },
   },
   {

apps/model-ad/app/src/app/app.component.ts

@@ -2,7 +2,7 @@ import { Component, DestroyRef, inject, OnInit } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { RouterModule } from '@angular/router';
 import { LOADING_ICON_COLORS } from '@sagebionetworks/explorers/constants';
-import { MetaTagService, VersionService } from '@sagebionetworks/explorers/services';
+import { LoggerService, MetaTagService, VersionService } from '@sagebionetworks/explorers/services';
 import {
   ErrorOverlayComponent,
   FooterComponent,
@@ -47,6 +47,7 @@ import { ToastModule } from 'primeng/toast';
 })
 export class AppComponent implements OnInit {
   private readonly destroyRef = inject(DestroyRef);
+  private readonly logger = inject(LoggerService);
 
   configService = inject(ConfigService);
   dataVersionService = inject(DataVersionService);
@@ -75,22 +76,32 @@ export class AppComponent implements OnInit {
   }
 
   getDataVersion() {
+    this.logger.log('AppComponent: Loading data version');
+
     this.versionService
       .getDataVersion$(this.dataVersionService)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
         next: (v) => (this.dataVersion = v),
-        error: () => (this.dataVersion = 'unknown'),
+        error: () => {
+          this.dataVersion = 'unknown';
+          this.logger.error('Failed to get data version');
+        },
       });
   }
 
   getSiteVersion() {
+    this.logger.log('AppComponent: Loading site version');
+
     this.versionService
       .getSiteVersion$(this.configService.config)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
         next: (v) => (this.siteVersion = v),
-        error: () => (this.siteVersion = 'unknown'),
+        error: () => {
+          this.siteVersion = 'unknown';
+          this.logger.error('Failed to get site version');
+        },
       });
   }
 }

docs/products/services.md

@@ -165,16 +165,6 @@ This library was generated with Nx.
 - **Available Tasks**: test, lint
 - **Documentation**: [README](https://github.com/Sage-Bionetworks/sage-monorepo/blob/main/libs/agora/services/README.md)
 
-#### agora-shared
-
-This library was generated with Nx.
-
-- **Type**: feature
-- **Language**: typescript
-- **Location**: `libs/agora/shared`
-- **Available Tasks**: test, lint, lint-fix
-- **Documentation**: [README](https://github.com/Sage-Bionetworks/sage-monorepo/blob/main/libs/agora/shared/README.md)
-
 #### agora-storybook
 
 This library was generated with Nx.