fix(angular): fall back to element tagName when trace is not provided

The `trace` directive should typically be declared on components to validly trace
the lifecycle (from `ngOnInit` to `ngAfterViewInit`, when child views are also rendered).
If `trace` is mistakenly not provided, we fall back to `tagName`.

Author: arturovt

packages/angular/src/tracing.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+import { ElementRef } from '@angular/core';
 import type { AfterViewInit, OnDestroy, OnInit } from '@angular/core';
 import { Directive, Injectable, Input, NgModule } from '@angular/core';
 import type { ActivatedRouteSnapshot, Event, RouterState } from '@angular/router';
@@ -235,8 +237,6 @@ export class TraceService implements OnDestroy {
   }
 }
 
-const UNKNOWN_COMPONENT = 'unknown';
-
 /**
  * A directive that can be used to capture initialization lifecycle of the whole component.
  */
@@ -246,13 +246,19 @@ export class TraceDirective implements OnInit, AfterViewInit {
 
   private _tracingSpan?: Span;
 
+  public constructor(private readonly _host: ElementRef<HTMLElement>) {}
+
   /**
    * Implementation of OnInit lifecycle method
    * @inheritdoc
    */
   public ngOnInit(): void {
     if (!this.componentName) {
-      this.componentName = UNKNOWN_COMPONENT;
+      // Technically, the `trace` binding should always be provided.
+      // However, if it is incorrectly declared on the element without a
+      // value (e.g., `<app-component trace />`), we fall back to using `tagName`
+      // (which is `APP-COMPONENT`).
+      this.componentName = this._host.nativeElement.tagName.toLowerCase();
     }
 
     if (getActiveSpan()) {