Feature/implement o11y (#119)

* Integrate app with OpenTelemetry

Author: robinsonzimmermann

package-lock.json

@@ -33,6 +33,12 @@
     "@angular/platform-server": "^17.3.7",
     "@angular/router": "^17.3.7",
     "@angular/ssr": "^17.3.6",
+    "@opentelemetry/api": "^1.8.0",
+    "@opentelemetry/auto-instrumentations-web": "^0.37.0",
+    "@opentelemetry/context-zone-peer-dep": "^1.23.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.49.1",
+    "@opentelemetry/instrumentation": "^0.49.1",
+    "@opentelemetry/sdk-trace-web": "^1.22.0",
     "express": "^4.19.2",
     "ngx-markdown": "^17.0.0",
     "prismjs": "^1.29.0",

package.json

@@ -14,9 +14,11 @@ import { MarkdownModule, MarkdownService } from 'ngx-markdown';
 import { HttpClient, provideHttpClient, withFetch } from '@angular/common/http';
 import markdownConfig from './markdown.config';
 import { DOCUMENT } from '@angular/common';
+import { AUTHORS_AVATAR_PATH_TOKEN, USE_PROCESSED_IMAGES, O11Y_CONFIG_TOKEN } from './core/config/configuration-tokens';
 import { HtmlInMarkdownService } from './core/services/html-in-markdown.service';
+import { ObservabilityConfig } from './core/model/observability.model';
+import * as pkg from '../../package.json';
 import { AssetsService } from './core/services/assets.service';
-import { AUTHORS_AVATAR_PATH_TOKEN, USE_PROCESSED_IMAGES } from './core/config/configuration-tokens';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -36,9 +38,20 @@ export const appConfig: ApplicationConfig = {
         sanitize: SecurityContext.NONE,
       })
     ),
+    {
+      provide: O11Y_CONFIG_TOKEN,
+      useValue: <ObservabilityConfig>{
+        apiKey: '68435ee4-f575-4dc0-968b-c43665373f5c',
+        appName: 'bb-engineering',
+        version: pkg.version,
+        url: 'https://rum-collector.backbase.io/v1/traces',
+        enabled: !isDevMode(),
+      },
+    },
     {
       provide: APP_INITIALIZER,
-      useFactory: markdownConfig,
+      multi: true,
+      useFactory: (...deps: any) => () => markdownConfig.apply(this, deps),
       deps: [MarkdownService, DOCUMENT, HtmlInMarkdownService, AssetsService],
     },
     {

src/app/app.config.ts

@@ -1,9 +1,14 @@
 import { InjectionToken } from '@angular/core';
+import { ObservabilityConfig } from '../model/observability.model';
 
 export const AUTHORS_AVATAR_PATH_TOKEN = new InjectionToken<string>(
   '[CONFIG][ASSETS] Authors avatar directory path'
 );
 
+export const O11Y_CONFIG_TOKEN = new InjectionToken<ObservabilityConfig>(
+  '[CONFIG][O11Y] Observability config provider'
+);
+
 export const USE_PROCESSED_IMAGES = new InjectionToken<boolean>(
   '[CONFIG][ASSETS] Token to control source of content assets'
 );

src/app/core/config/configuration-tokens.ts

@@ -0,0 +1,7 @@
+export interface ObservabilityConfig {
+  apiKey: string,
+  appName: string,
+  version: string,
+  url: string,
+  enabled: boolean,
+}

src/app/core/model/observability.model.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ObservabilityService } from './observability.service';
+
+describe('ObservabilityService', () => {
+  let service: ObservabilityService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ObservabilityService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/services/observability.service.spec.ts

@@ -0,0 +1,118 @@
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import {
+    WebTracerProvider,
+    BatchSpanProcessor,
+    TraceIdRatioBasedSampler,
+} from '@opentelemetry/sdk-trace-web';
+import { ZoneContextManager } from '@opentelemetry/context-zone-peer-dep';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { Resource } from '@opentelemetry/resources';
+import { SEMRESATTRS_SERVICE_NAME, SEMRESATTRS_SERVICE_VERSION } from '@opentelemetry/semantic-conventions';
+import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
+import opentelemetry, { Attributes, Span } from '@opentelemetry/api';
+
+import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { O11Y_CONFIG_TOKEN } from '../config/configuration-tokens';
+import { ObservabilityConfig } from '../model/observability.model';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+
+const ANONYMOUS_USER_ID = 'uid';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ObservabilityService {
+
+  constructor(
+    @Inject(O11Y_CONFIG_TOKEN) private config: ObservabilityConfig,
+    @Inject(PLATFORM_ID) platformId: object,
+    @Inject(DOCUMENT) private document: Document,
+    private router: Router
+  ) {
+    if(isPlatformBrowser(platformId) && config.enabled) {
+      this.initiateTracking();
+    }
+  }
+
+  private initiateTracking() {
+    const { appName, version, url, apiKey } = this.config;
+
+    const resource = Resource.default()?.merge(
+      new Resource({
+        [SEMRESATTRS_SERVICE_NAME]: appName,
+        [SEMRESATTRS_SERVICE_VERSION]: version,
+        sessionId: this.getSessionId(),
+      }),
+    );
+
+    const provider = new WebTracerProvider({
+      resource,
+      sampler: new TraceIdRatioBasedSampler(1),
+    });
+ 
+    provider.addSpanProcessor(
+      new BatchSpanProcessor(
+        new OTLPTraceExporter({
+          url: url,
+          headers: {
+            'Bb-App-Key': apiKey,
+          },
+        }),
+      ),
+    );
+    
+    provider.register({
+      contextManager: new ZoneContextManager(),
+    });
+    
+    provider.getActiveSpanProcessor().onStart = (span: Span) => {
+      span.setAttribute('view.name', document.title);
+      span.setAttribute('view.path', document.location.href);
+    };
+    
+    registerInstrumentations({
+      instrumentations: [
+        getWebAutoInstrumentations({
+          '@opentelemetry/instrumentation-document-load': {},
+          '@opentelemetry/instrumentation-user-interaction': {},
+        }),
+      ],
+    });
+
+    this.registerPageViews();
+  }
+
+  public publishEvent(payload: Attributes, event: string) {
+    opentelemetry.trace.getTracer('@blog/observability').startActiveSpan(event, activeSpan => {
+      activeSpan.setAttributes(payload);
+      activeSpan.end();
+    });
+  }
+
+  private getSessionId(): string {
+    const storage = this.document.defaultView?.window.sessionStorage;
+    let sessionId: string = `${storage?.getItem(ANONYMOUS_USER_ID)}`;
+    if (!this.isHex(sessionId)) {
+      const newSessionId = window?.crypto?.getRandomValues(new Uint32Array(1))[0].toString(16);
+      storage?.setItem(ANONYMOUS_USER_ID, newSessionId);
+      sessionId = newSessionId;
+    }
+    return sessionId;
+  }
+
+  private registerPageViews() {
+    this.router.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      .subscribe(() => {
+        this.publishEvent({
+          'user.action.event.type': 'navigation'
+        }, 'page_view');
+      });
+  }
+
+  private isHex(value: string) {
+    return /^[0-9a-fA-F]{8}$/.test(value);
+  }
+}

src/app/core/services/observability.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable, map, shareReplay, withLatestFrom } from 'rxjs';
+import { Observable, map, of, shareReplay, switchMap, throwError, withLatestFrom } from 'rxjs';
 import { Post, Posts } from '../model/post.model';
 import { HttpClient } from '@angular/common/http';
 import { getPermalink } from '@blog/utils';
@@ -86,12 +86,15 @@ export class PostsService {
     );
   }
 
-  getPost(permalink: string | null): Observable<Post | undefined> {
+  getPost(permalink: string | null): Observable<Post> {
     const filterByPermalink = (post: Post) =>
       getPermalink(post.title, post.specialCategory, post.category, post.date) === permalink;
     return this.getPosts(0, 1, false, (post: Post) =>
       filterByPermalink(post)
-    ).pipe(map(({ posts }) => posts[0]));
+    ).pipe(
+      switchMap(({ posts }) =>
+        posts[0] ? of(posts[0]) : throwError(() => new Error('not found')))
+    );
   }
 
   getCategories(): Observable<Category[]> {

src/app/core/services/posts.service.ts

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ButtonComponent } from '../../components/button/button.component';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterLink } from '@angular/router';
+import { ObservabilityService } from '../../core/services/observability.service';
 
 @Component({
   selector: 'blog-not-found',
@@ -10,4 +11,10 @@ import { RouterLink } from '@angular/router';
   templateUrl: './not-found.component.html',
   styleUrls: ['./not-found.component.scss'],
 })
-export class NotFoundComponent {}
+export class NotFoundComponent implements OnInit {
+  constructor(private observabilityService: ObservabilityService) {}
+
+  ngOnInit(): void {
+    this.observabilityService.publishEvent({}, 'not-found');
+  }
+}

src/app/features/not-found/not-found.component.ts

@@ -33,10 +33,10 @@ <h2>{{ post.excerpt }}</h2>
     </header>
     <div class="post__content">
       <aside class="post__content-table">
-        @if (isContentReady) {
+        @if (headers) {
           <blog-table-of-content
             class="sticky"
-            [headers]="(headers$ | async) || []"></blog-table-of-content>
+            [headers]="headers"></blog-table-of-content>
         }
       </aside>
       <article class="post__content-text center-container">