ref(tracing): Add origin to spans (#8765)

This adds an `origin` to all spans, which defaults to `manual` but is
set to something more meaningful for all our auto instrumentation.

I tried to come up with reasonable origin names, I hope it makes sense
everywhere 😅 Also note that this now uses a new TS feature which seems
to be correctly transpiled to TS 3.8, as far as I can tell! 🎉

Closes #8510

---------

Co-authored-by: Luca Forstner <[email protected]>
Co-authored-by: Lukas Stracke <[email protected]>

Author: 3 people

packages/angular/src/tracing.ts

@@ -39,6 +39,7 @@ export function routingInstrumentation(
     customStartTransaction({
       name: WINDOW.location.pathname,
       op: 'pageload',
+      origin: 'auto.pageload.angular',
       metadata: { source: 'url' },
     });
   }
@@ -84,6 +85,7 @@ export class TraceService implements OnDestroy {
         activeTransaction = stashedStartTransaction({
           name: strippedUrl,
           op: 'navigation',
+          origin: 'auto.navigation.angular',
           metadata: { source: 'url' },
         });
       }
@@ -95,6 +97,7 @@ export class TraceService implements OnDestroy {
         this._routingSpan = activeTransaction.startChild({
           description: `${navigationEvent.url}`,
           op: ANGULAR_ROUTING_OP,
+          origin: 'auto.ui.angular',
           tags: {
             'routing.instrumentation': '@sentry/angular',
             url: strippedUrl,
@@ -192,6 +195,7 @@ export class TraceDirective implements OnInit, AfterViewInit {
       this._tracingSpan = activeTransaction.startChild({
         description: `<${this.componentName}>`,
         op: ANGULAR_INIT_OP,
+        origin: 'auto.ui.angular.trace_directive',
       });
     }
   }
@@ -233,6 +237,7 @@ export function TraceClassDecorator(): ClassDecorator {
         tracingSpan = activeTransaction.startChild({
           description: `<${target.name}>`,
           op: ANGULAR_INIT_OP,
+          origin: 'auto.ui.angular.trace_class_decorator',
         });
       }
       if (originalOnInit) {
@@ -270,6 +275,7 @@ export function TraceMethodDecorator(): MethodDecorator {
           description: `<${target.constructor.name}>`,
           endTimestamp: now,
           op: `${ANGULAR_OP}.${String(propertyKey)}`,
+          origin: 'auto.ui.angular.trace_method_decorator',
           startTimestamp: now,
         });
       }

packages/angular/test/tracing.test.ts

@@ -48,6 +48,7 @@ describe('Angular Tracing', () => {
       expect(startTransaction).toHaveBeenCalledWith({
         name: '/',
         op: 'pageload',
+        origin: 'auto.pageload.angular',
         metadata: { source: 'url' },
       });
     });
@@ -137,6 +138,7 @@ describe('Angular Tracing', () => {
       expect(customStartTransaction).toHaveBeenCalledWith({
         name: url,
         op: 'pageload',
+        origin: 'auto.pageload.angular',
         metadata: { source: 'url' },
       });
 
@@ -327,6 +329,7 @@ describe('Angular Tracing', () => {
         expect(customStartTransaction).toHaveBeenCalledWith({
           name: url,
           op: 'navigation',
+          origin: 'auto.navigation.angular',
           metadata: { source: 'url' },
         });
         expect(transaction.setName).toHaveBeenCalledWith(result, 'route');
@@ -358,6 +361,7 @@ describe('Angular Tracing', () => {
 
       expect(transaction.startChild).toHaveBeenCalledWith({
         op: 'ui.angular.init',
+        origin: 'auto.ui.angular.trace_directive',
         description: '<unknown>',
       });
 
@@ -384,6 +388,7 @@ describe('Angular Tracing', () => {
 
       expect(transaction.startChild).toHaveBeenCalledWith({
         op: 'ui.angular.init',
+        origin: 'auto.ui.angular.trace_directive',
         description: '<test-component>',
       });
 
@@ -458,6 +463,7 @@ describe('Angular Tracing', () => {
       expect(transaction.startChild).toHaveBeenCalledWith({
         description: '<DecoratedComponent>',
         op: 'ui.angular.init',
+        origin: 'auto.ui.angular.trace_class_decorator',
       });
 
       expect(origNgOnInitMock).toHaveBeenCalledTimes(1);
@@ -511,13 +517,15 @@ describe('Angular Tracing', () => {
       expect(transaction.startChild.mock.calls[0][0]).toEqual({
         description: '<DecoratedComponent>',
         op: 'ui.angular.ngOnInit',
+        origin: 'auto.ui.angular.trace_method_decorator',
         startTimestamp: expect.any(Number),
         endTimestamp: expect.any(Number),
       });
 
       expect(transaction.startChild.mock.calls[1][0]).toEqual({
         description: '<DecoratedComponent>',
         op: 'ui.angular.ngAfterViewInit',
+        origin: 'auto.ui.angular.trace_method_decorator',
         startTimestamp: expect.any(Number),
         endTimestamp: expect.any(Number),
       });

packages/browser/src/profiling/hubextensions.ts

@@ -174,7 +174,11 @@ export function wrapTransactionWithProfiling(transaction: Transaction): Transact
 
     // This is temporary - we will use the collected span data to evaluate
     // if deferring txn.finish until profiler resolves is a viable approach.
-    const stopProfilerSpan = transaction.startChild({ description: 'profiler.stop', op: 'profiler' });
+    const stopProfilerSpan = transaction.startChild({
+      description: 'profiler.stop',
+      op: 'profiler',
+      origin: 'auto.profiler.browser',
+    });
 
     return profiler
       .stop()

packages/core/src/tracing/span.ts

@@ -4,6 +4,7 @@ import type {
   Primitive,
   Span as SpanInterface,
   SpanContext,
+  SpanOrigin,
   TraceContext,
   Transaction,
 } from '@sentry/types';
@@ -115,30 +116,27 @@ export class Span implements SpanInterface {
    */
   public instrumenter: Instrumenter;
 
+  /**
+   * The origin of the span, giving context about what created the span.
+   */
+  public origin?: SpanOrigin;
+
   /**
    * You should never call the constructor manually, always use `Sentry.startTransaction()`
    * or call `startChild()` on an existing span.
    * @internal
    * @hideconstructor
    * @hidden
    */
-  public constructor(spanContext?: SpanContext) {
-    this.traceId = uuid4();
-    this.spanId = uuid4().substring(16);
-    this.startTimestamp = timestampInSeconds();
-    this.tags = {};
-    this.data = {};
-    this.instrumenter = 'sentry';
-
-    if (!spanContext) {
-      return this;
-    }
-    if (spanContext.traceId) {
-      this.traceId = spanContext.traceId;
-    }
-    if (spanContext.spanId) {
-      this.spanId = spanContext.spanId;
-    }
+  public constructor(spanContext: SpanContext = {}) {
+    this.traceId = spanContext.traceId || uuid4();
+    this.spanId = spanContext.spanId || uuid4().substring(16);
+    this.startTimestamp = spanContext.startTimestamp || timestampInSeconds();
+    this.tags = spanContext.tags || {};
+    this.data = spanContext.data || {};
+    this.instrumenter = spanContext.instrumenter || 'sentry';
+    this.origin = spanContext.origin || 'manual';
+
     if (spanContext.parentSpanId) {
       this.parentSpanId = spanContext.parentSpanId;
     }
@@ -155,24 +153,12 @@ export class Span implements SpanInterface {
     if (spanContext.name) {
       this.description = spanContext.name;
     }
-    if (spanContext.data) {
-      this.data = spanContext.data;
-    }
-    if (spanContext.tags) {
-      this.tags = spanContext.tags;
-    }
     if (spanContext.status) {
       this.status = spanContext.status;
     }
-    if (spanContext.startTimestamp) {
-      this.startTimestamp = spanContext.startTimestamp;
-    }
     if (spanContext.endTimestamp) {
       this.endTimestamp = spanContext.endTimestamp;
     }
-    if (spanContext.instrumenter) {
-      this.instrumenter = spanContext.instrumenter;
-    }
   }
 
   /**
@@ -355,6 +341,7 @@ export class Span implements SpanInterface {
     tags?: { [key: string]: Primitive };
     timestamp?: number;
     trace_id: string;
+    origin?: SpanOrigin;
   } {
     return dropUndefinedKeys({
       data: Object.keys(this.data).length > 0 ? this.data : undefined,
@@ -367,6 +354,7 @@ export class Span implements SpanInterface {
       tags: Object.keys(this.tags).length > 0 ? this.tags : undefined,
       timestamp: this.endTimestamp,
       trace_id: this.traceId,
+      origin: this.origin,
     });
   }
 }

packages/ember/addon/index.ts

@@ -87,7 +87,14 @@ export const instrumentRoutePerformance = <T extends RouteConstructor>(BaseRoute
     if (!currentTransaction) {
       return result;
     }
-    currentTransaction.startChild({ op, description, startTimestamp }).finish();
+    currentTransaction
+      .startChild({
+        op,
+        description,
+        origin: 'auto.ui.ember',
+        startTimestamp,
+      })
+      .finish();
     return result;
   };
 

packages/ember/addon/instance-initializers/sentry-performance.ts

@@ -119,6 +119,7 @@ export function _instrumentEmberRouter(
     activeTransaction = startTransaction({
       name: `route:${routeInfo.name}`,
       op: 'pageload',
+      origin: 'auto.pageload.ember',
       tags: {
         url,
         toRoute: routeInfo.name,
@@ -141,6 +142,7 @@ export function _instrumentEmberRouter(
     activeTransaction = startTransaction({
       name: `route:${toRoute}`,
       op: 'navigation',
+      origin: 'auto.navigation.ember',
       tags: {
         fromRoute,
         toRoute,
@@ -150,6 +152,7 @@ export function _instrumentEmberRouter(
     transitionSpan = activeTransaction?.startChild({
       op: 'ui.ember.transition',
       description: `route:${fromRoute} -> route:${toRoute}`,
+      origin: 'auto.ui.ember',
     });
   });
 
@@ -211,6 +214,7 @@ function _instrumentEmberRunloop(config: EmberSentryConfig): void {
           activeTransaction
             ?.startChild({
               op: `ui.ember.runloop.${queue}`,
+              origin: 'auto.ui.ember',
               startTimestamp: currentQueueStart,
               endTimestamp: now,
             })
@@ -287,6 +291,7 @@ function processComponentRenderAfter(
     activeTransaction?.startChild({
       op,
       description: payload.containerKey || payload.object,
+      origin: 'auto.ui.ember',
       startTimestamp: begin.now,
       endTimestamp: now,
     });
@@ -370,6 +375,7 @@ function _instrumentInitialLoad(config: EmberSentryConfig): void {
   const transaction = getActiveTransaction();
   const span = transaction?.startChild({
     op: 'ui.ember.init',
+    origin: 'auto.ui.ember',
     startTimestamp,
   });
   span?.finish(endTimestamp);

packages/nextjs/src/client/performance.ts

@@ -178,6 +178,7 @@ export function nextRouterInstrumentation(
         const nextRouteChangeSpan = navigationTransaction.startChild({
           op: 'ui.nextjs.route-change',
           description: 'Next.js Route Change',
+          origin: 'auto.navigation.nextjs',
         });
 
         const finishRouteChangeSpan = (): void => {

packages/nextjs/src/common/utils/edgeWrapperUtils.ts

@@ -23,6 +23,7 @@ export function withEdgeWrapping<H extends EdgeRouteHandler>(
         span = prevSpan.startChild({
           description: options.spanDescription,
           op: options.spanOp,
+          origin: 'auto.function.nextjs',
         });
       } else if (req instanceof Request) {
         const sentryTrace = req.headers.get('sentry-trace') || '';
@@ -39,6 +40,7 @@ export function withEdgeWrapping<H extends EdgeRouteHandler>(
         span = startTransaction({
           name: options.spanDescription,
           op: options.spanOp,
+          origin: 'auto.ui.nextjs.withEdgeWrapping',
           ...traceparentData,
           metadata: {
             dynamicSamplingContext: traceparentData && !dynamicSamplingContext ? {} : dynamicSamplingContext,

packages/nextjs/src/common/utils/wrapperUtils.ts

@@ -104,6 +104,7 @@ export function withTracedServerSideDataFetcher<F extends (...args: any[]) => Pr
             {
               op: 'http.server',
               name: options.requestedRouteName,
+              origin: 'auto.function.nextjs',
               ...traceparentData,
               status: 'ok',
               metadata: {
@@ -131,12 +132,14 @@ export function withTracedServerSideDataFetcher<F extends (...args: any[]) => Pr
         dataFetcherSpan = spanToContinue.startChild({
           op: 'function.nextjs',
           description: `${options.dataFetchingMethodName} (${options.dataFetcherRouteName})`,
+          origin: 'auto.function.nextjs',
           status: 'ok',
         });
       } else {
         dataFetcherSpan = startTransaction({
           op: 'function.nextjs',
           name: `${options.dataFetchingMethodName} (${options.dataFetcherRouteName})`,
+          origin: 'auto.function.nextjs',
           ...traceparentData,
           status: 'ok',
           metadata: {
@@ -203,6 +206,7 @@ export async function callDataFetcherTraced<F extends (...args: any[]) => Promis
   // route's transaction
   const span = transaction.startChild({
     op: 'function.nextjs',
+    origin: 'auto.function.nextjs',
     description: `${dataFetchingMethodName} (${parameterizedRoute})`,
     status: 'ok',
   });

packages/nextjs/src/common/wrapApiHandlerWithSentry.ts

@@ -129,6 +129,7 @@ export function withSentry(apiHandler: NextApiHandler, parameterizedRoute?: stri
                 {
                   name: `${reqMethod}${reqPath}`,
                   op: 'http.server',
+                  origin: 'auto.http.nextjs',
                   ...traceparentData,
                   metadata: {
                     dynamicSamplingContext: traceparentData && !dynamicSamplingContext ? {} : dynamicSamplingContext,