feat(angular): Auto-detect component name in TraceDirective

Author: Lms24

packages/angular/src/tracing.ts

@@ -1,5 +1,15 @@
 /* eslint-disable max-lines */
-import { AfterViewInit, Directive, Injectable, Input, NgModule, OnDestroy, OnInit } from '@angular/core';
+import {
+  AfterViewInit,
+  Directive,
+  Injectable,
+  Input,
+  NgModule,
+  OnDestroy,
+  OnInit,
+  Optional,
+  ViewContainerRef,
+} from '@angular/core';
 import { ActivatedRouteSnapshot, Event, NavigationEnd, NavigationStart, ResolveEnd, Router } from '@angular/router';
 import { getCurrentHub, WINDOW } from '@sentry/browser';
 import { Span, Transaction, TransactionContext } from '@sentry/types';
@@ -163,13 +173,15 @@ export class TraceDirective implements OnInit, AfterViewInit {
 
   private _tracingSpan?: Span;
 
+  public constructor(@Optional() private readonly _vcRef: ViewContainerRef) {}
+
   /**
    * Implementation of OnInit lifecycle method
    * @inheritdoc
    */
   public ngOnInit(): void {
     if (!this.componentName) {
-      this.componentName = UNKNOWN_COMPONENT;
+      this.componentName = detectComponentName(this._vcRef as EnhancedVieContainerRef);
     }
 
     const activeTransaction = getActiveTransaction();
@@ -192,6 +204,29 @@ export class TraceDirective implements OnInit, AfterViewInit {
   }
 }
 
+type EnhancedVieContainerRef = ViewContainerRef & {
+  _lContainer?: {
+    localName?: string;
+  }[][];
+};
+
+/**
+ * Detects the angular component name from the passed ViewContainerReference.
+ * Specifically, it looks up the selector of the component (e.g. `app-my-component`) or
+ * falls back to the default component name if the selector is not available.
+ */
+function detectComponentName(vcRef: EnhancedVieContainerRef | undefined): string {
+  if (vcRef && vcRef._lContainer && vcRef._lContainer[0] && vcRef._lContainer[0][0]) {
+    // TODO: is this preferrable?
+    // Alternative: We could get the class name like so:
+    // const className = Object.getPrototypeOf(vcRef._lContainer[0][8]).constructor.name;
+
+    const selectorName = vcRef._lContainer[0][0].localName;
+    return selectorName || UNKNOWN_COMPONENT;
+  }
+  return UNKNOWN_COMPONENT;
+}
+
 /**
  * A module serves as a single compilation unit for the `TraceDirective` and can be re-used by any other module.
  */

packages/angular/test/tracing.test.ts

@@ -256,12 +256,50 @@ describe('Angular Tracing', () => {
 
   describe('TraceDirective', () => {
     it('should create an instance', () => {
-      const directive = new TraceDirective();
+      const directive = new TraceDirective({} as unknown as any);
       expect(directive).toBeTruthy();
     });
 
+    it('should create a child tracingSpan on init (WIP)', async () => {
+      const customStartTransaction = jest.fn(defaultStartTransaction);
+
+      @Component({
+        selector: 'app-component',
+        template: `<app-child trace></app-child>`,
+      })
+      class AppComponent {
+        public constructor() {}
+      }
+
+      @Component({
+        selector: 'app-child',
+        template: `<p>Hi</p>`,
+      })
+      class ChildComponent {
+        public constructor() {}
+      }
+
+      const env = await TestEnv.setup({
+        components: [AppComponent, ChildComponent, TraceDirective],
+        defaultComponent: AppComponent,
+        customStartTransaction,
+        useTraceService: false,
+      });
+
+      transaction.startChild = jest.fn();
+
+      //directive.ngOnInit();
+
+      expect(transaction.startChild).toHaveBeenCalledWith({
+        op: 'ui.angular.init',
+        description: '<unknown>',
+      });
+
+      env.destroy();
+    });
+
     it('should create a child tracingSpan on init', async () => {
-      const directive = new TraceDirective();
+      //const directive = new TraceDirective({} as unknown as any);
       const customStartTransaction = jest.fn(defaultStartTransaction);
 
       const env = await TestEnv.setup({
@@ -272,7 +310,7 @@ describe('Angular Tracing', () => {
 
       transaction.startChild = jest.fn();
 
-      directive.ngOnInit();
+      //directive.ngOnInit();
 
       expect(transaction.startChild).toHaveBeenCalledWith({
         op: 'ui.angular.init',
@@ -283,7 +321,7 @@ describe('Angular Tracing', () => {
     });
 
     it('should use component name as span description', async () => {
-      const directive = new TraceDirective();
+      const directive = new TraceDirective({} as unknown as any);
       const finishMock = jest.fn();
       const customStartTransaction = jest.fn(defaultStartTransaction);
 
@@ -309,7 +347,7 @@ describe('Angular Tracing', () => {
     });
 
     it('should finish tracingSpan after view init', async () => {
-      const directive = new TraceDirective();
+      const directive = new TraceDirective({} as unknown as any);
       const finishMock = jest.fn();
       const customStartTransaction = jest.fn(defaultStartTransaction);