add log aggregation with HyperDX

service/app-hub/dashboard/package.json

@@ -25,6 +25,7 @@
     "@apollo/client": "^3.13.8",
     "@azure/msal-angular": "^3.0.22",
     "@azure/msal-browser": "^3.19.1",
+    "@hyperdx/browser": "^0.22.0",
     "@ng-icons/core": "^31.4.0",
     "@ng-icons/lucide": "^31.4.0",
     "@ngneat/dialog": "^5.1.1",

service/app-hub/dashboard/src/app/app.component.ts

@@ -2,17 +2,21 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { AppShellComponent } from './core/components/app-shell/app-shell.component';
 import { MsalService } from '@azure/msal-angular';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
-    selector: 'app-root',
-    imports: [AppShellComponent, RouterOutlet],
-    templateUrl: './app.component.html',
-    styleUrl: './app.component.scss'
+  selector: 'app-root',
+  imports: [AppShellComponent, RouterOutlet],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss',
 })
 export class AppComponent {
   title = 'dashboard';
 
   constructor(private readonly authService: MsalService) {
-    this.authService.handleRedirectObservable().subscribe();
+    this.authService
+      .handleRedirectObservable()
+      .pipe(takeUntilDestroyed())
+      .subscribe();
   }
 }

service/app-hub/dashboard/src/app/core/telemetry/instrument.ts

@@ -1,66 +0,0 @@
-import { registerInstrumentations } from '@opentelemetry/instrumentation';
-import {
-  WebTracerProvider,
-  ConsoleSpanExporter,
-  SimpleSpanProcessor,
-  BatchSpanProcessor,
-  ParentBasedSampler,
-  TraceIdRatioBasedSampler,
-} from '@opentelemetry/sdk-trace-web';
-import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
-import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
-import { Resource } from '@opentelemetry/resources';
-import { B3Propagator } from '@opentelemetry/propagator-b3';
-import {
-  ATTR_SERVICE_NAME,
-  ATTR_SERVICE_VERSION,
-} from '@opentelemetry/semantic-conventions';
-import { environment } from '../../../environments/environment';
-
-const resource = Resource.default().merge(
-  new Resource({
-    [ATTR_SERVICE_NAME]: environment.production ? 'avicenna.dashboard.prod' : 'avicenna.dashboard',
-    // [ATTR_SERVICE_NAMESPACE]: 'avicenna',
-    [ATTR_SERVICE_VERSION]: '1.0',
-    environment: environment.production ? 'production' : 'staging'
-  })
-);
-
-const provider = new WebTracerProvider({
-  resource,
-  sampler: new ParentBasedSampler({
-    root: new TraceIdRatioBasedSampler(0.1),
-  }),
-  spanProcessors: [
-    new SimpleSpanProcessor(new ConsoleSpanExporter()),
-    new BatchSpanProcessor(
-      new OTLPTraceExporter({
-        url: 'https://collector.genius.ceo/v1/traces',
-      }),
-      {
-        maxQueueSize: 100,
-        maxExportBatchSize: 10,
-        scheduledDelayMillis: 500,
-      }
-    ),
-  ],
-});
-
-provider.register({
-  propagator: new B3Propagator(),
-});
-
-registerInstrumentations({
-  instrumentations: [
-    getWebAutoInstrumentations({
-      '@opentelemetry/instrumentation-document-load': {},
-      '@opentelemetry/instrumentation-user-interaction': {},
-      '@opentelemetry/instrumentation-fetch': {
-        propagateTraceHeaderCorsUrls: /.+/,
-      },
-      '@opentelemetry/instrumentation-xml-http-request': {
-        propagateTraceHeaderCorsUrls: /.+/,
-      },
-    }),
-  ],
-});

service/app-hub/dashboard/src/app/pages/manager/dayview/dayview.component.ts

@@ -115,11 +115,7 @@ export class DayviewComponent {
       this.selectedDate.value ?? new Date(),
       days
     );
-    if (isSunday(nextSelectedDate)) {
-      this.selectedDate.setValue(addDays(nextSelectedDate, days));
-    } else {
-      this.selectedDate.setValue(nextSelectedDate);
-    }
+    this.selectedDate.setValue(nextSelectedDate);
   }
 
   changeSelectedType(event: MatChipListboxChange) {

service/app-hub/dashboard/src/main.ts

@@ -2,9 +2,18 @@
 
 import '@angular/common/locales/global/de';
 import { bootstrapApplication } from '@angular/platform-browser';
+import HyperDX from '@hyperdx/browser';
 import { AppComponent } from './app/app.component';
 import { appConfig } from './app/app.config';
-import './app/core/telemetry/instrument';
+
+HyperDX.init({
+  url: 'https://otlp.avicenna.hamburg',
+  apiKey: '71addf09-bcd2-4e83-8158-97458402137b',
+  service: 'avicenna-dashboard',
+  tracePropagationTargets: [/api/i, /graphql/i],
+  consoleCapture: true,
+  advancedNetworkCapture: true
+});
 
 bootstrapApplication(AppComponent, appConfig).catch((err) =>
   console.error(err)