ref: Add visibleActivity:

AbhiPrasad · AbhiPrasad · commit 4eddf1a11f5c · 2020-06-17T10:12:51.000-04:00
diff --git a/packages/react/src/profiler.tsx b/packages/react/src/profiler.tsx
@@ -62,16 +62,20 @@ function warnAboutTracing(name: string): void {
  * pushActivity creates an new react activity
  * @param name displayName of component that started activity
  */
-const pushActivity = (name: string): number | null => {
+const pushActivity = (name: string, op: string, options?: Object): number | null => {
   if (globalTracingIntegration === null) {
     return null;
   }
 
   // tslint:disable-next-line:no-unsafe-any
-  return (globalTracingIntegration as any).constructor.pushActivity(name, {
-    description: `<${name}>`,
-    op: 'react',
-  });
+  return (globalTracingIntegration as any).constructor.pushActivity(
+    name,
+    {
+      description: `<${name}>`,
+      op: `react.${op}`,
+    },
+    options,
+  );
 };
 
 /**
@@ -99,10 +103,10 @@ export type ProfilerProps = {
  * spans based on component lifecycles.
  */
 class Profiler extends React.Component<ProfilerProps> {
-  public activity: number | null = null;
-  // The activity representing when a component was mounted onto a page.
   public mountInfo: {
+    // The activity representing when a component was mounted onto a page.
     activity: number | null;
+    // The span from the mountInfo activity
     span: Span | null;
   } = {
     activity: null,
@@ -120,29 +124,31 @@ class Profiler extends React.Component<ProfilerProps> {
     }
 
     if (getTracingIntegration()) {
-      this.activity = pushActivity(name);
+      this.mountInfo.activity = pushActivity(name, 'mount');
     } else {
       warnAboutTracing(name);
     }
   }
 
   // If a component mounted, we can finish the mount activity.
   public componentDidMount(): void {
-    afterNextFrame(this.finishProfile);
-  }
+    afterNextFrame(() => {
+      popActivity(this.mountInfo.activity);
+      this.mountInfo.activity = null;
 
-  // Sometimes a component will unmount first, so we make
-  // sure to also finish the mount activity here.
-  public componentWillUnmount(): void {
-    afterNextFrame(this.finishProfile);
+      this.visibleActivity = pushActivity(this.props.name, 'visible');
+    });
   }
 
-  public finishProfile = () => {
+  // If a component doesn't mount, the visible activity will be end when the
+  public componentWillUnmount(): void {
     afterNextFrame(() => {
-      popActivity(this.activity);
-      this.activity = null;
+      popActivity(this.visibleActivity);
+      this.visibleActivity = null;
     });
-  };
+  }
+
+  public finishProfile = () => {};
 
   public render(): React.ReactNode {
     return this.props.children;
