feat: Add @sentry/tracing

CHANGELOG

Rename tracing to APM

bring back APM

fix: APM -> tracing

feat(tracing): Add @sentry/tracing

delete src

mass rename

mass move test

chore: Change APM -> Tracing

feat(tracing): Add IdleTransaction class

ref: Delete Tracing integration

feat: BrowserTracing integration

some comments about what I've done so far

router stuff

more router changes

more comments and thoughts

refactor heartbeat

beforeFinish

Squash 1

router tracing init

reset active transactions

more idle transaction refactor

Revert "mass move test"

This reverts commit c1a11a1.

Revert "mass rename"

This reverts commit 8173c5d.

Revert "delete src"

This reverts commit 0298cd4.

fix routing typings

sentry-trace meta tag

Add request logic

smaller errors + backgroundtab

performance

fix stuff

fix some errors

get it working

it finally works :)

zero counter

react changes

Vue changes

Fix all errors

delete tracing again again

any typings

any changes

more refactors

Fix performance and router

better

Author: AbhiPrasad

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 - [tracing] fix: Add manual `DOMStringList` typing (#2718)
+- [tracing] feat: `Add @sentry/tracing` (#2719)
 
 ## 5.19.0
 

package.json

@@ -28,6 +28,7 @@
     "packages/minimal",
     "packages/node",
     "packages/react",
+    "packages/tracing",
     "packages/types",
     "packages/typescript",
     "packages/utils"

packages/hub/src/hub.ts

@@ -376,8 +376,8 @@ export class Hub implements HubInterface {
   /**
    * @inheritDoc
    */
-  public startTransaction(context: TransactionContext): Transaction {
-    return this._callExtensionMethod('startTransaction', context);
+  public startTransaction(context: TransactionContext, idleTimeout?: number): Transaction {
+    return this._callExtensionMethod('startTransaction', context, idleTimeout);
   }
 
   /**

packages/integrations/src/vue.ts

@@ -1,13 +1,19 @@
-import { EventProcessor, Hub, Integration, IntegrationClass, Span } from '@sentry/types';
+import { EventProcessor, Hub, Integration, 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.
- */
-const TRACING_GETTER = ({
-  id: 'Tracing',
-} as any) as IntegrationClass<Integration>;
+// tslint:disable-next-line: completed-docs
+function getActiveTransaction(hub: Hub & { getScope?(): Scope }): Transaction | undefined {
+  if (!hub.getScope) {
+    return undefined;
+  }
+
+  const scope = hub.getScope();
+  if (scope) {
+    return scope.getTransaction();
+  }
+
+  return undefined;
+}
 
 /** Global Vue object limited to the methods/attributes we require */
 interface VueInstance {
@@ -137,7 +143,6 @@ export class Vue implements Integration {
   private readonly _componentsCache: { [key: string]: string } = {};
   private _rootSpan?: Span;
   private _rootSpanTimer?: ReturnType<typeof setTimeout>;
-  private _tracingActivity?: number;
 
   /**
    * @inheritDoc
@@ -221,27 +226,20 @@ 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, getCurrentHub);
+        this._finishRootSpan(now);
       } else {
         vm.$once(`hook:${hook}`, () => {
           // 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.
 
           // 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.
-          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',
-              });
-            }
+          const activeTransaction = getActiveTransaction(getCurrentHub());
+          if (activeTransaction) {
+            this._rootSpan = activeTransaction.startChild({
+              description: 'Application Render',
+              op: 'Vue',
+            });
           }
         });
       }
@@ -264,7 +262,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, getCurrentHub);
+        this._finishRootSpan(now);
       } else {
         vm.$once(`hook:${hook}`, () => {
           if (this._rootSpan) {
@@ -306,23 +304,14 @@ export class Vue implements Integration {
   };
 
   /** Finish top-level span and activity with a debounce configured using `timeout` option */
-  private _finishRootSpan(timestamp: number, getCurrentHub: () => Hub): void {
+  private _finishRootSpan(timestamp: number): 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.
-        const tracingIntegration = getCurrentHub().getIntegration(TRACING_GETTER);
-        if (tracingIntegration) {
-          // tslint:disable-next-line:no-unsafe-any
-          (tracingIntegration as any).constructor.popActivity(this._tracingActivity);
-          if (this._rootSpan) {
-            this._rootSpan.finish(timestamp);
-          }
-        }
+      if (this._rootSpan) {
+        this._rootSpan.finish(timestamp);
       }
     }, this._options.tracingOptions.timeout);
   }
@@ -333,7 +322,7 @@ export class Vue implements Integration {
 
     this._options.Vue.mixin({
       beforeCreate(this: ViewModel): void {
-        if (getCurrentHub().getIntegration(TRACING_GETTER)) {
+        if (getActiveTransaction(getCurrentHub())) {
           // `this` points to currently rendered component
           applyTracingHooks(this, getCurrentHub);
         } else {

packages/react/src/profiler.tsx

@@ -1,79 +1,19 @@
 import { getCurrentHub } from '@sentry/browser';
-import { Integration, IntegrationClass, Span } from '@sentry/types';
-import { logger, timestampWithMs } from '@sentry/utils';
+import { 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;
-const getTracingIntegration = () => {
-  if (globalTracingIntegration) {
-    return globalTracingIntegration;
-  }
-
-  globalTracingIntegration = getCurrentHub().getIntegration(TRACING_GETTER);
-  return globalTracingIntegration;
-};
-
-/**
- * Warn if tracing integration not configured. Will only warn once.
- */
-function warnAboutTracing(name: string): void {
-  if (globalTracingIntegration === null) {
-    logger.warn(
-      `Unable to profile component ${name} due to invalid Tracing Integration. Please make sure the Tracing integration is setup properly.`,
-    );
-  }
-}
-
-/**
- * pushActivity creates an new react activity.
- * Is a no-op if Tracing integration is not valid
- * @param name displayName of component that started activity
- */
-function pushActivity(name: string, op: string): number | null {
-  if (globalTracingIntegration === null) {
-    return null;
+function getActiveTransaction(): Transaction | undefined {
+  const hub = getCurrentHub();
+  const scope = hub.getScope();
+  if (scope) {
+    return scope.getTransaction();
   }
 
-  // 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
- */
-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
- */
-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;
+  return undefined;
 }
 
 export type ProfilerProps = {
@@ -95,8 +35,6 @@ export type ProfilerProps = {
  * spans based on component lifecycles.
  */
 class Profiler extends React.Component<ProfilerProps> {
-  // The activity representing how long it takes to mount a component.
-  public mountActivity: number | null = null;
   // The span of the mount activity
   public mountSpan: Span | undefined = undefined;
   // The span of the render
@@ -116,18 +54,21 @@ class Profiler extends React.Component<ProfilerProps> {
       return;
     }
 
-    if (getTracingIntegration()) {
-      this.mountActivity = pushActivity(name, 'mount');
-    } else {
-      warnAboutTracing(name);
+    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 {
-    this.mountSpan = getActivitySpan(this.mountActivity);
-    popActivity(this.mountActivity);
-    this.mountActivity = null;
+    if (this.mountSpan) {
+      this.mountSpan.finish();
+    }
   }
 
   public componentDidUpdate({ updateProps, includeUpdates = true }: ProfilerProps): void {
@@ -221,22 +162,27 @@ function useProfiler(
     hasRenderSpan: true,
   },
 ): void {
-  const [mountActivity] = React.useState(() => {
+  const [mountSpan] = React.useState(() => {
     if (options && options.disabled) {
-      return null;
+      return undefined;
     }
 
-    if (getTracingIntegration()) {
-      return pushActivity(name, 'mount');
+    const activeTransaction = getActiveTransaction();
+
+    if (activeTransaction) {
+      return activeTransaction.startChild({
+        description: `<${name}>`,
+        op: 'react.mount',
+      });
     }
 
-    warnAboutTracing(name);
-    return null;
+    return undefined;
   });
 
   React.useEffect(() => {
-    const mountSpan = getActivitySpan(mountActivity);
-    popActivity(mountActivity);
+    if (mountSpan) {
+      mountSpan.finish();
+    }
 
     return () => {
       if (mountSpan && options.hasRenderSpan) {

packages/tracing/.npmignore

@@ -0,0 +1,4 @@
+*
+!/dist/**/*
+!/esm/**/*
+*.tsbuildinfo

packages/tracing/README.md

@@ -0,0 +1,22 @@
+<p align="center">
+  <a href="https://sentry.io" target="_blank" align="center">
+    <img src="https://sentry-brand.storage.googleapis.com/sentry-logo-black.png" width="280">
+  </a>
+  <br />
+</p>
+
+# Sentry Tracing Extensions
+
+[![npm version](https://img.shields.io/npm/v/@sentry/tracing.svg)](https://www.npmjs.com/package/@sentry/tracing)
+[![npm dm](https://img.shields.io/npm/dm/@sentry/tracing.svg)](https://www.npmjs.com/package/@sentry/tracing)
+[![npm dt](https://img.shields.io/npm/dt/@sentry/tracing.svg)](https://www.npmjs.com/package/@sentry/tracing)
+[![typedoc](https://img.shields.io/badge/docs-typedoc-blue.svg)](http://getsentry.github.io/sentry-javascript/)
+
+## Links
+
+- [Official SDK Docs](https://docs.sentry.io/quickstart/)
+- [TypeDoc](http://getsentry.github.io/sentry-javascript/)
+
+## General
+
+This package contains extensions to the `@sentry/hub` to enable Sentry AM related functionality. It also provides integrations for Browser and Node that provide a good experience out of the box.

packages/tracing/apm/.npmignore

@@ -0,0 +1,4 @@
+*
+!/dist/**/*
+!/esm/**/*
+*.tsbuildinfo

packages/tracing/apm/README.md

@@ -0,0 +1,22 @@
+<p align="center">
+  <a href="https://sentry.io" target="_blank" align="center">
+    <img src="https://sentry-brand.storage.googleapis.com/sentry-logo-black.png" width="280">
+  </a>
+  <br />
+</p>
+
+# Sentry Tracing Extensions
+
+[![npm version](https://img.shields.io/npm/v/@sentry/tracing.svg)](https://www.npmjs.com/package/@sentry/tracing)
+[![npm dm](https://img.shields.io/npm/dm/@sentry/tracing.svg)](https://www.npmjs.com/package/@sentry/tracing)
+[![npm dt](https://img.shields.io/npm/dt/@sentry/tracing.svg)](https://www.npmjs.com/package/@sentry/tracing)
+[![typedoc](https://img.shields.io/badge/docs-typedoc-blue.svg)](http://getsentry.github.io/sentry-javascript/)
+
+## Links
+
+- [Official SDK Docs](https://docs.sentry.io/quickstart/)
+- [TypeDoc](http://getsentry.github.io/sentry-javascript/)
+
+## General
+
+This package contains extensions to the `@sentry/hub` to enable Sentry AM related functionality. It also provides integrations for Browser and Node that provide a good experience out of the box.