fix: Make sure vue and react are backwards compatible with @sentry/apm

AbhiPrasad · AbhiPrasad · commit 384ef632c5d5 · 2020-07-16T17:07:34.000-04:00
diff --git a/packages/integrations/src/vue.ts b/packages/integrations/src/vue.ts
@@ -1,6 +1,22 @@
-import { EventProcessor, Hub, Integration, Scope, Span, Transaction } from '@sentry/types';
+import { EventProcessor, Hub, Integration, IntegrationClass, Scope, Span, Transaction } from '@sentry/types';
 import { basename, getGlobalObject, logger, timestampWithMs } from '@sentry/utils';
 
+/**
+ * Used to extract Tracing integration from the current client,
+ * without the need to import `Tracing` itself from the @sentry/apm package.
+ * @deprecated as @sentry/tracing should be used over @sentry/apm.
+ */
+const TRACING_GETTER = ({
+  id: 'Tracing',
+} as any) as IntegrationClass<Integration>;
+
+/**
+ * Used to extract BrowserTracing integration from @sentry/tracing
+ */
+const BROWSER_TRACING_GETTER = ({
+  id: 'BrowserTracing',
+} as any) as IntegrationClass<Integration>;
+
 /** Global Vue object limited to the methods/attributes we require */
 interface VueInstance {
   config: {
@@ -63,7 +79,7 @@ interface TracingOptions {
    * Or to an array of specific component names (case-sensitive).
    */
   trackComponents: boolean | string[];
-  /** How long to wait until the tracked root span is marked as finished and sent of to Sentry */
+  /** How long to wait until the tracked root activity is marked as finished and sent of to Sentry */
   timeout: number;
   /**
    * List of hooks to keep track of during component lifecycle.
@@ -129,6 +145,7 @@ export class Vue implements Integration {
   private readonly _componentsCache: { [key: string]: string } = {};
   private _rootSpan?: Span;
   private _rootSpanTimer?: ReturnType<typeof setTimeout>;
+  private _tracingActivity?: number;
 
   /**
    * @inheritDoc
@@ -212,18 +229,37 @@ export class Vue implements Integration {
       // On the first handler call (before), it'll be undefined, as `$once` will add it in the future.
       // However, on the second call (after), it'll be already in place.
       if (this._rootSpan) {
-        this._finishRootSpan(now);
+        this._finishRootSpan(now, getCurrentHub);
       } else {
         vm.$once(`hook:${hook}`, () => {
-          // Create an span on the first event call. There'll be no second call, as rootSpan will be in place,
+          // Create an activity on the first event call. There'll be no second call, as rootSpan will be in place,
           // thus new event handler won't be attached.
 
-          const activeTransaction = getActiveTransaction(getCurrentHub());
-          if (activeTransaction) {
-            this._rootSpan = activeTransaction.startChild({
-              description: 'Application Render',
-              op: 'Vue',
-            });
+          // We do this whole dance with `TRACING_GETTER` to prevent `@sentry/apm` from becoming a peerDependency.
+          // We also need to ask for the `.constructor`, as `pushActivity` and `popActivity` are static, not instance methods.
+          // tslint:disable-next-line: deprecation
+          const tracingIntegration = getCurrentHub().getIntegration(TRACING_GETTER);
+          if (tracingIntegration) {
+            // tslint:disable-next-line:no-unsafe-any
+            this._tracingActivity = (tracingIntegration as any).constructor.pushActivity('Vue Application Render');
+            // tslint:disable-next-line:no-unsafe-any
+            const transaction = (tracingIntegration as any).constructor.getTransaction();
+            if (transaction) {
+              // tslint:disable-next-line:no-unsafe-any
+              this._rootSpan = transaction.startChild({
+                description: 'Application Render',
+                op: 'Vue',
+              });
+            }
+            // Use functionality from @sentry/tracing
+          } else {
+            const activeTransaction = getActiveTransaction(getCurrentHub());
+            if (activeTransaction) {
+              this._rootSpan = activeTransaction.startChild({
+                description: 'Application Render',
+                op: 'Vue',
+              });
+            }
           }
         });
       }
@@ -246,7 +282,7 @@ export class Vue implements Integration {
       // However, on the second call (after), it'll be already in place.
       if (span) {
         span.finish();
-        this._finishRootSpan(now);
+        this._finishRootSpan(now, getCurrentHub);
       } else {
         vm.$once(`hook:${hook}`, () => {
           if (this._rootSpan) {
@@ -287,13 +323,25 @@ export class Vue implements Integration {
     });
   };
 
-  /** Finish top-level span with a debounce configured using `timeout` option */
-  private _finishRootSpan(timestamp: number): void {
+  /** Finish top-level span and activity with a debounce configured using `timeout` option */
+  private _finishRootSpan(timestamp: number, getCurrentHub: () => Hub): void {
     if (this._rootSpanTimer) {
       clearTimeout(this._rootSpanTimer);
     }
 
     this._rootSpanTimer = setTimeout(() => {
+      if (this._tracingActivity) {
+        // We do this whole dance with `TRACING_GETTER` to prevent `@sentry/apm` from becoming a peerDependency.
+        // We also need to ask for the `.constructor`, as `pushActivity` and `popActivity` are static, not instance methods.
+        // tslint:disable-next-line: deprecation
+        const tracingIntegration = getCurrentHub().getIntegration(TRACING_GETTER);
+        if (tracingIntegration) {
+          // tslint:disable-next-line:no-unsafe-any
+          (tracingIntegration as any).constructor.popActivity(this._tracingActivity);
+        }
+      }
+
+      // We should always finish the span, only should pop activity if using @sentry/apm
       if (this._rootSpan) {
         this._rootSpan.finish(timestamp);
       }
@@ -306,7 +354,8 @@ export class Vue implements Integration {
 
     this._options.Vue.mixin({
       beforeCreate(this: ViewModel): void {
-        if (getActiveTransaction(getCurrentHub())) {
+        // tslint:disable-next-line: deprecation
+        if (getCurrentHub().getIntegration(TRACING_GETTER) || getCurrentHub().getIntegration(BROWSER_TRACING_GETTER)) {
           // `this` points to currently rendered component
           applyTracingHooks(this, getCurrentHub);
         } else {
diff --git a/packages/react/src/profiler.tsx b/packages/react/src/profiler.tsx
@@ -1,11 +1,74 @@
 import { getCurrentHub, Hub } from '@sentry/browser';
-import { Span, Transaction } from '@sentry/types';
+import { Integration, IntegrationClass, Span, Transaction } from '@sentry/types';
 import { timestampWithMs } from '@sentry/utils';
 import * as hoistNonReactStatic from 'hoist-non-react-statics';
 import * as React from 'react';
 
 export const UNKNOWN_COMPONENT = 'unknown';
 
+const TRACING_GETTER = ({
+  id: 'Tracing',
+} as any) as IntegrationClass<Integration>;
+
+let globalTracingIntegration: Integration | null = null;
+/** @deprecated remove when @sentry/apm no longer used */
+const getTracingIntegration = () => {
+  if (globalTracingIntegration) {
+    return globalTracingIntegration;
+  }
+
+  globalTracingIntegration = getCurrentHub().getIntegration(TRACING_GETTER);
+  return globalTracingIntegration;
+};
+
+/**
+ * pushActivity creates an new react activity.
+ * Is a no-op if Tracing integration is not valid
+ * @param name displayName of component that started activity
+ * @deprecated remove when @sentry/apm no longer used
+ */
+function pushActivity(name: string, op: string): 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.${op}`,
+  });
+}
+
+/**
+ * popActivity removes a React activity.
+ * Is a no-op if Tracing integration is not valid.
+ * @param activity id of activity that is being popped
+ * @deprecated remove when @sentry/apm no longer used
+ */
+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);
+}
+
+/**
+ * Obtain a span given an activity id.
+ * Is a no-op if Tracing integration is not valid.
+ * @param activity activity id associated with obtained span
+ * @deprecated remove when @sentry/apm no longer used
+ */
+function getActivitySpan(activity: number | null): Span | undefined {
+  if (activity === null || globalTracingIntegration === null) {
+    return undefined;
+  }
+
+  // tslint:disable-next-line:no-unsafe-any
+  return (globalTracingIntegration as any).constructor.getActivitySpan(activity) as Span | undefined;
+}
+
 export type ProfilerProps = {
   // The name of the component being profiled.
   name: string;
@@ -25,8 +88,10 @@ export type ProfilerProps = {
  * spans based on component lifecycles.
  */
 class Profiler extends React.Component<ProfilerProps> {
-  // The span representing how long it takes to mount a component
-  public mountSpan: Span | undefined = undefined;
+  // The activity representing how long it takes to mount a component.
+  private _mountActivity: number | null = null;
+  // The span of the mount activity
+  private _mountSpan: Span | undefined = undefined;
 
   public static defaultProps: Partial<ProfilerProps> = {
     disabled: false,
@@ -42,35 +107,48 @@ class Profiler extends React.Component<ProfilerProps> {
       return;
     }
 
-    const activeTransaction = getActiveTransaction();
-    if (activeTransaction) {
-      this.mountSpan = activeTransaction.startChild({
-        description: `<${name}>`,
-        op: 'react.mount',
-      });
+    // If they are using @sentry/apm, we need to push/pop activities
+    // tslint:disable-next-line: deprecation
+    if (getTracingIntegration()) {
+      // tslint:disable-next-line: deprecation
+      this._mountActivity = pushActivity(name, 'mount');
+    } else {
+      const activeTransaction = getActiveTransaction();
+      if (activeTransaction) {
+        this._mountSpan = activeTransaction.startChild({
+          description: `<${name}>`,
+          op: 'react.mount',
+        });
+      }
     }
   }
 
   // If a component mounted, we can finish the mount activity.
   public componentDidMount(): void {
-    if (this.mountSpan) {
-      this.mountSpan.finish();
+    if (this._mountSpan) {
+      this._mountSpan.finish();
+    } else {
+      // tslint:disable-next-line: deprecation
+      this._mountSpan = getActivitySpan(this._mountActivity);
+      // tslint:disable-next-line: deprecation
+      popActivity(this._mountActivity);
+      this._mountActivity = null;
     }
   }
 
   public componentDidUpdate({ updateProps, includeUpdates = true }: ProfilerProps): void {
     // Only generate an update span if hasUpdateSpan is true, if there is a valid mountSpan,
     // and if the updateProps have changed. It is ok to not do a deep equality check here as it is expensive.
     // We are just trying to give baseline clues for further investigation.
-    if (includeUpdates && this.mountSpan && updateProps !== this.props.updateProps) {
+    if (includeUpdates && this._mountSpan && updateProps !== this.props.updateProps) {
       // See what props haved changed between the previous props, and the current props. This is
       // set as data on the span. We just store the prop keys as the values could be potenially very large.
       const changedProps = Object.keys(updateProps).filter(k => updateProps[k] !== this.props.updateProps[k]);
       if (changedProps.length > 0) {
         // The update span is a point in time span with 0 duration, just signifying that the component
         // has been updated.
         const now = timestampWithMs();
-        this.mountSpan.startChild({
+        this._mountSpan.startChild({
           data: {
             changedProps,
           },
@@ -88,14 +166,14 @@ class Profiler extends React.Component<ProfilerProps> {
   public componentWillUnmount(): void {
     const { name, includeRender = true } = this.props;
 
-    if (this.mountSpan && includeRender) {
+    if (this._mountSpan && includeRender) {
       // 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.
-      this.mountSpan.startChild({
+      this._mountSpan.startChild({
         description: `<${name}>`,
         endTimestamp: timestampWithMs(),
         op: `react.render`,
-        startTimestamp: this.mountSpan.endTimestamp,
+        startTimestamp: this._mountSpan.endTimestamp,
       });
     }
   }
diff --git a/packages/react/test/profiler.test.tsx b/packages/react/test/profiler.test.tsx
@@ -26,6 +26,7 @@ let activeTransaction: Record<string, any>;
 
 jest.mock('@sentry/browser', () => ({
   getCurrentHub: () => ({
+    getIntegration: () => undefined,
     getScope: () => ({
       getTransaction: () => activeTransaction,
     }),
