fix(angular): Use ui category for span operations (#4222)

As per the new spec in https://develop.sentry.dev/sdk/performance/span-operations/#js-frameworks, we now want to prefix our angular spans operations with `ui`.

Author: AbhiPrasad

packages/angular/README.md

@@ -222,7 +222,7 @@ const boostrapSpan =
   activeTransaction &&
   activeTransaction.startChild({
     description: 'platform-browser-dynamic',
-    op: 'angular.bootstrap',
+    op: 'ui.angular.bootstrap',
   });
 
 platformBrowserDynamic()

packages/angular/src/constants.ts

@@ -0,0 +1,5 @@
+export const ANGULAR_ROUTING_OP = 'ui.angular.routing';
+
+export const ANGULAR_INIT_OP = 'ui.angular.init';
+
+export const ANGULAR_OP = 'ui.angular';

packages/angular/src/tracing.ts

@@ -6,6 +6,7 @@ import { getGlobalObject, logger, stripUrlQueryAndFragment, timestampWithMs } fr
 import { Observable, Subscription } from 'rxjs';
 import { filter, tap } from 'rxjs/operators';
 
+import { ANGULAR_INIT_OP, ANGULAR_OP, ANGULAR_ROUTING_OP } from './constants';
 import { runOutsideAngular } from './zone';
 
 let instrumentationInitialized: boolean;
@@ -83,7 +84,7 @@ export class TraceService implements OnDestroy {
         }
         this._routingSpan = activeTransaction.startChild({
           description: `${navigationEvent.url}`,
-          op: `angular.routing`,
+          op: ANGULAR_ROUTING_OP,
           tags: {
             'routing.instrumentation': '@sentry/angular',
             url: strippedUrl,
@@ -146,7 +147,7 @@ export class TraceDirective implements OnInit, AfterViewInit {
     if (activeTransaction) {
       this._tracingSpan = activeTransaction.startChild({
         description: `<${this.componentName}>`,
-        op: `angular.initialize`,
+        op: ANGULAR_INIT_OP,
       });
     }
   }
@@ -187,7 +188,7 @@ export function TraceClassDecorator(): ClassDecorator {
       if (activeTransaction) {
         tracingSpan = activeTransaction.startChild({
           description: `<${target.name}>`,
-          op: `angular.initialize`,
+          op: ANGULAR_INIT_OP,
         });
       }
       if (originalOnInit) {
@@ -224,7 +225,7 @@ export function TraceMethodDecorator(): MethodDecorator {
         activeTransaction.startChild({
           description: `<${target.constructor.name}>`,
           endTimestamp: now,
-          op: `angular.${String(propertyKey)}`,
+          op: `${ANGULAR_OP}.${String(propertyKey)}`,
           startTimestamp: now,
         });
       }