ref: create children from span

AbhiPrasad · AbhiPrasad · commit 371a2473fdab · 2020-06-17T10:12:51.000-04:00
diff --git a/packages/apm/src/integrations/tracing.ts b/packages/apm/src/integrations/tracing.ts
@@ -1,3 +1,4 @@
+// tslint:disable: max-file-line-count
 import { Hub } from '@sentry/hub';
 import { Event, EventProcessor, Integration, Severity, Span, SpanContext, TransactionContext } from '@sentry/types';
 import {
@@ -827,7 +828,7 @@ export class Tracing implements Integration {
    * @param finish if a span should be finished after the activity is removed
    *
    */
-  public static popActivity(id: number, spanData?: { [key: string]: any }, finish: boolean = true): void {
+  public static popActivity(id: number, spanData?: { [key: string]: any }): void {
     // The !id is on purpose to also fail with 0
     // Since 0 is returned by push activity in case there is no active transaction
     if (!id) {
@@ -854,9 +855,7 @@ export class Tracing implements Integration {
         if (Tracing.options && Tracing.options.debug && Tracing.options.debug.spanDebugTimingInfo) {
           Tracing._addSpanDebugInfo(span);
         }
-        if (finish) {
-          span.finish();
-        }
+        span.finish();
       }
       // tslint:disable-next-line: no-dynamic-delete
       delete Tracing._activities[id];
@@ -888,7 +887,10 @@ export class Tracing implements Integration {
     if (Tracing._getCurrentHub) {
       const hub = Tracing._getCurrentHub();
       if (hub) {
-        return Tracing._activities[id].span;
+        const activity = Tracing._activities[id];
+        if (activity) {
+          return activity.span;
+        }
       }
     }
     return undefined;
diff --git a/packages/react/src/profiler.tsx b/packages/react/src/profiler.tsx
@@ -1,5 +1,5 @@
 import { getCurrentHub } from '@sentry/browser';
-import { Integration, IntegrationClass, Span, SpanContext } from '@sentry/types';
+import { Integration, IntegrationClass, Span } from '@sentry/types';
 import { logger, timestampWithMs } from '@sentry/utils';
 import * as hoistNonReactStatic from 'hoist-non-react-statics';
 import * as React from 'react';
@@ -68,7 +68,6 @@ function warnAboutTracing(name: string): void {
 function pushActivity(
   name: string,
   op: string,
-  context?: SpanContext,
   options?: {
     autoPopAfter?: number;
     parentSpanId?: string;
@@ -84,7 +83,6 @@ function pushActivity(
     {
       description: `<${name}>`,
       op: `react.${op}`,
-      ...context,
     },
     options,
   );
@@ -96,13 +94,13 @@ function pushActivity(
  * @param activity id of activity that is being popped
  * @param finish if a span should be finished after the activity is removed
  */
-function popActivity(activity: number | null, finish: boolean = true): void {
+function popActivity(activity: number | null): void {
   if (activity === null || globalTracingIntegration === null) {
     return;
   }
 
   // tslint:disable-next-line:no-unsafe-any
-  (globalTracingIntegration as any).constructor.popActivity(activity, undefined, finish);
+  (globalTracingIntegration as any).constructor.popActivity(activity, undefined);
 }
 
 function getActivitySpan(activity: number | null): Span | undefined {
@@ -130,14 +128,15 @@ export type ProfilerProps = {
 class Profiler extends React.Component<ProfilerProps> {
   // The activity representing how long it takes to mount a component.
   public mountActivity: number | null = null;
-  // The spanId of the mount activity
-  public mountSpanId: string | null = null;
+  // The span of the mount activity
+  public span: Span | undefined = undefined;
   // The activity representing how long a component was on the page.
   public renderActivity: number | null = null;
+  public renderSpan: Span | undefined = undefined;
 
   public static defaultProps: Partial<ProfilerProps> = {
     disabled: false,
-    generateUpdateSpans: false,
+    generateUpdateSpans: true,
   };
 
   public constructor(props: ProfilerProps) {
@@ -157,42 +156,42 @@ class Profiler extends React.Component<ProfilerProps> {
 
   // If a component mounted, we can finish the mount activity.
   public componentDidMount(): void {
-    afterNextFrame(() => {
-      const span = getActivitySpan(this.mountActivity);
-      if (span) {
-        this.mountSpanId = span.spanId;
-      }
-      popActivity(this.mountActivity);
-      this.mountActivity = null;
-
-      // If we were able to obtain the spanId of the mount activity, we should set the
-      // next activity as a child to the component mount activity.
-      const options = span ? { parentSpanId: span.spanId } : {};
-      this.renderActivity = pushActivity(this.props.name, 'render', {}, options);
-    });
+    // afterNextFrame(() => {
+    this.span = getActivitySpan(this.mountActivity);
+    popActivity(this.mountActivity);
+    this.mountActivity = null;
+
+    // If we were able to obtain the spanId of the mount activity, we should set the
+    // next activity as a child to the component mount activity.
+    if (this.span) {
+      this.renderSpan = this.span.startChild({
+        description: `<${this.props.name}>`,
+        op: `react.render`,
+      });
+    }
+    // });
   }
 
   public componentDidUpdate(prevProps: ProfilerProps): void {
-    if (prevProps.generateUpdateSpans && this.mountSpanId) {
+    if (prevProps.generateUpdateSpans && this.span && prevProps !== this.props) {
       const now = timestampWithMs();
-      const updateActivity = pushActivity(
-        prevProps.name,
-        'update',
-        {
-          endTimestamp: now,
-          startTimestamp: now,
-        },
-        { parentSpanId: this.mountSpanId },
-      );
-      popActivity(updateActivity, false);
+      this.span.startChild({
+        description: `<${prevProps.name}>`,
+        endTimestamp: now,
+        op: `react.update`,
+        startTimestamp: now,
+      });
     }
   }
 
   // If a component doesn't mount, the render activity will be end when the
   public componentWillUnmount(): void {
     afterNextFrame(() => {
-      popActivity(this.renderActivity, false);
-      this.renderActivity = null;
+      if (this.renderSpan) {
+        this.renderSpan.finish();
+      }
+      // popActivity(this.renderActivity);
+      // this.renderActivity = null;
     });
   }
 
