Merge branch 'master' into hazat/getTransaction

Author: HazAT

CHANGELOG.md

@@ -9,9 +9,11 @@
 - [core] feat: Export `makeMain` (#2665)
 - [core] fix: Call `bindClient` when creating new `Hub` to make integrations work automatically (#2665)
 - [gatsby] feat: Add @sentry/gatsby package (#2652)
-- [apm] feat: Add `scope.getTransaction` to return a Transaction if it exists (#2668)
-- [apm] ref: Deprecate `scope.setTransaction` in favor of `scope.setTransactionName` (#2668)
+- [tracing] feat: Add `scope.getTransaction` to return a Transaction if it exists (#2668)
+- [tracing] ref: Deprecate `scope.setTransaction` in favor of `scope.setTransactionName` (#2668)
 - [core] ref: Rename `whitelistUrls/blacklistUrls` to `allowUrls/denyUrls` (#2671)
+- [react] ref: Refactor Profiler to account for update and render (#2677)
+- [tracing] feat: Add ability to get span from activity using `getActivitySpan` (#2677)
 
 ## 5.17.0
 

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 {
@@ -628,7 +629,7 @@ export class Tracing implements Integration {
               resource.startTimestamp = timeOrigin + startTime;
               resource.endTimestamp = resource.startTimestamp + duration;
               // We remember the entry script end time to calculate the difference to the first init mark
-              if (entryScriptStartEndTime === undefined && (entryScriptSrc || '').includes(resourceName)) {
+              if (entryScriptStartEndTime === undefined && (entryScriptSrc || '').indexOf(resourceName) > -1) {
                 entryScriptStartEndTime = resource.endTimestamp;
               }
             }
@@ -817,6 +818,9 @@ export class Tracing implements Integration {
 
   /**
    * Removes activity and finishes the span in case there is one
+   * @param id the id of the activity being removed
+   * @param spanData span data that can be updated
+   *
    */
   public static popActivity(id: number, spanData?: { [key: string]: any }): void {
     // The !id is on purpose to also fail with 0
@@ -866,6 +870,20 @@ export class Tracing implements Integration {
       }, timeout);
     }
   }
+
+  /**
+   * Get span based on activity id
+   */
+  public static getActivitySpan(id: number): Span | undefined {
+    if (!id) {
+      return undefined;
+    }
+    const activity = Tracing._activities[id];
+    if (activity) {
+      return activity.span;
+    }
+    return undefined;
+  }
 }
 
 /**

packages/hub/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.build.json",
-  "include": ["src/**/*.ts", "test/**/*.ts", "../apm/test/span.test.ts"],
+  "include": ["src/**/*.ts", "test/**/*.ts"],
   "exclude": ["dist"],
   "compilerOptions": {
     "rootDir": ".",

packages/integrations/src/rewriteframes.ts

@@ -30,7 +30,7 @@ export class RewriteFrames implements Integration {
     // Check if the frame filename begins with `/` or a Windows-style prefix such as `C:\`
     const isWindowsFrame = /^[A-Z]:\\/.test(frame.filename);
     const startsWithSlash = /^\//.test(frame.filename);
-    if (frame.filename && (isWindowsFrame || startsWithSlash)) {
+    if (isWindowsFrame || startsWithSlash) {
       const filename = isWindowsFrame
         ? frame.filename
             .replace(/^[A-Z]:/, '') // remove Windows-style prefix

packages/integrations/src/vue.ts

@@ -54,8 +54,8 @@ interface IntegrationOptions {
   logErrors: boolean;
 
   /**
-   * When set to `false`, disables tracking of components lifecycle performance.
-   * By default, it tracks only when `Tracing` integration is also enabled.
+   * When set to `true`, enables tracking of components lifecycle performance.
+   * It requires `Tracing` integration to be also enabled.
    */
   tracing: boolean;
 
@@ -75,9 +75,10 @@ interface TracingOptions {
   timeout: number;
   /**
    * List of hooks to keep track of during component lifecycle.
-   * Available hooks: https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
+   * Available hooks: 'activate' | 'create' | 'destroy' | 'mount' | 'update'
+   * Based on https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
    */
-  hooks: Hook[];
+  hooks: Operation[];
 }
 
 /** Optional metadata attached to Sentry Event */
@@ -103,19 +104,13 @@ type Hook =
 
 type Operation = 'activate' | 'create' | 'destroy' | 'mount' | 'update';
 
-// Mappings from lifecycle hook to corresponding operation,
-// used to track already started measurements.
-const OPERATIONS: { [key in Hook]: Operation } = {
-  activated: 'activate',
-  beforeCreate: 'create',
-  beforeDestroy: 'destroy',
-  beforeMount: 'mount',
-  beforeUpdate: 'update',
-  created: 'create',
-  deactivated: 'activate',
-  destroyed: 'destroy',
-  mounted: 'mount',
-  updated: 'update',
+// Mappings from operation to corresponding lifecycle hook.
+const HOOKS: { [key in Operation]: Hook[] } = {
+  activate: ['activated', 'deactivated'],
+  create: ['beforeCreate', 'created'],
+  destroy: ['beforeDestroy', 'destroyed'],
+  mount: ['beforeMount', 'mounted'],
+  update: ['beforeUpdate', 'updated'],
 };
 
 const COMPONENT_NAME_REGEXP = /(?:^|[-_/])(\w)/g;
@@ -152,10 +147,10 @@ export class Vue implements Integration {
       Vue: getGlobalObject<any>().Vue, // tslint:disable-line:no-unsafe-any
       attachProps: true,
       logErrors: false,
-      tracing: true,
+      tracing: false,
       ...options,
       tracingOptions: {
-        hooks: ['beforeMount', 'mounted', 'beforeUpdate', 'updated'],
+        hooks: ['mount', 'update'],
         timeout: 2000,
         trackComponents: false,
         ...options.tracingOptions,
@@ -252,19 +247,18 @@ export class Vue implements Integration {
       }
     };
 
-    const childHandler = (hook: Hook) => {
+    const childHandler = (hook: Hook, operation: Operation) => {
       // Skip components that we don't want to track to minimize the noise and give a more granular control to the user
       const shouldTrack = Array.isArray(this._options.tracingOptions.trackComponents)
-        ? this._options.tracingOptions.trackComponents.includes(name)
+        ? this._options.tracingOptions.trackComponents.indexOf(name) > -1
         : this._options.tracingOptions.trackComponents;
 
       if (!this._rootSpan || !shouldTrack) {
         return;
       }
 
       const now = timestampWithMs();
-      const op = OPERATIONS[hook];
-      const span = spans[op];
+      const span = spans[operation];
 
       // 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.
@@ -274,27 +268,40 @@ export class Vue implements Integration {
       } else {
         vm.$once(`hook:${hook}`, () => {
           if (this._rootSpan) {
-            spans[op] = this._rootSpan.startChild({
+            spans[operation] = this._rootSpan.startChild({
               description: `Vue <${name}>`,
-              op,
+              op: operation,
             });
           }
         });
       }
     };
 
     // Each compomnent has it's own scope, so all activities are only related to one of them
-    this._options.tracingOptions.hooks.forEach(hook => {
-      const handler = rootMount ? rootHandler.bind(this, hook) : childHandler.bind(this, hook);
-      const currentValue = vm.$options[hook];
-
-      if (Array.isArray(currentValue)) {
-        vm.$options[hook] = [handler, ...currentValue];
-      } else if (typeof currentValue === 'function') {
-        vm.$options[hook] = [handler, currentValue];
-      } else {
-        vm.$options[hook] = [handler];
+    this._options.tracingOptions.hooks.forEach(operation => {
+      // Retrieve corresponding hooks from Vue lifecycle.
+      // eg. mount => ['beforeMount', 'mounted']
+      const internalHooks = HOOKS[operation];
+
+      if (!internalHooks) {
+        logger.warn(`Unknown hook: ${operation}`);
+        return;
       }
+
+      internalHooks.forEach(internalHook => {
+        const handler = rootMount
+          ? rootHandler.bind(this, internalHook)
+          : childHandler.bind(this, internalHook, operation);
+        const currentValue = vm.$options[internalHook];
+
+        if (Array.isArray(currentValue)) {
+          vm.$options[internalHook] = [handler, ...currentValue];
+        } else if (typeof currentValue === 'function') {
+          vm.$options[internalHook] = [handler, currentValue];
+        } else {
+          vm.$options[internalHook] = [handler];
+        }
+      });
     });
   };
 

packages/react/src/index.ts

@@ -1,22 +1,24 @@
 import { addGlobalEventProcessor, SDK_VERSION } from '@sentry/browser';
 
 function createReactEventProcessor(): void {
-  addGlobalEventProcessor(event => {
-    event.sdk = {
-      ...event.sdk,
-      name: 'sentry.javascript.react',
-      packages: [
-        ...((event.sdk && event.sdk.packages) || []),
-        {
-          name: 'npm:@sentry/react',
-          version: SDK_VERSION,
-        },
-      ],
-      version: SDK_VERSION,
-    };
+  if (addGlobalEventProcessor) {
+    addGlobalEventProcessor(event => {
+      event.sdk = {
+        ...event.sdk,
+        name: 'sentry.javascript.react',
+        packages: [
+          ...((event.sdk && event.sdk.packages) || []),
+          {
+            name: 'npm:@sentry/react',
+            version: SDK_VERSION,
+          },
+        ],
+        version: SDK_VERSION,
+      };
 
-    return event;
-  });
+      return event;
+    });
+  }
 }
 
 export * from '@sentry/browser';