Make linters happy

Author: kamilogorek

packages/integrations/package.json

@@ -16,6 +16,7 @@
   "module": "esm/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
+    "@sentry/apm": "5.15.5",
     "@sentry/types": "5.15.5",
     "@sentry/utils": "5.15.5",
     "tslib": "^1.9.3"

packages/integrations/src/vue.ts

@@ -1,17 +1,36 @@
+import { Integrations as APMIntegrations, Span as SpanClass } from '@sentry/apm';
 import { EventProcessor, Hub, Integration } from '@sentry/types';
 import { basename, getGlobalObject, logger, timestampWithMs } from '@sentry/utils';
-import { Integrations as APMIntegrations, Span as SpanClass } from '@sentry/apm';
 
+/** Global Vue object limited to the methods/attributes we require */
 interface VueInstance {
   config?: {
-    errorHandler(error: Error, vm?: ViewModel, info?: string): void;
+    errorHandler?(error: Error, vm?: ViewModel, info?: string): void; // tslint:disable-line:completed-docs
   };
-  mixin(opts: { [key: string]: () => void }): void;
+  mixin(hooks: { [key: string]: () => void }): void; // tslint:disable-line:completed-docs
   util: {
-    warn(...input: any): void;
+    warn(...input: any): void; // tslint:disable-line:completed-docs
   };
 }
 
+/** Representation of Vue component internals */
+interface ViewModel {
+  [key: string]: any;
+  $root: object;
+  $options: {
+    [key: string]: any;
+    name?: string;
+    propsData?: { [key: string]: any };
+    _componentTag?: string;
+    __file?: string;
+    $_sentryPerfHook?: boolean;
+  };
+  $once(hook: string, cb: () => void): void; // tslint:disable-line:completed-docs
+}
+
+// tslint:enable:completed-docs
+
+/** Vue Integration configuration */
 interface IntegrationOptions {
   /** Vue instance to be used inside the integration */
   Vue: VueInstance;
@@ -41,30 +60,17 @@ interface TracingOptions {
    * Can be either set to `boolean` to enable/disable tracking for all of them.
    * Or to an array of specific component names (case-sensitive).
    */
-  trackComponents: boolean | Array<string>;
+  trackComponents: boolean | string[];
   /** 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.
    * Available hooks: https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
    */
-  hooks: Array<Hook>;
-}
-
-interface ViewModel {
-  [key: string]: any;
-  $root: object;
-  $options: {
-    [key: string]: any;
-    name?: string;
-    propsData?: { [key: string]: any };
-    _componentTag?: string;
-    __file?: string;
-    $_sentryPerfHook?: boolean;
-  };
-  $once: (hook: string, cb: () => void) => void;
+  hooks: Hook[];
 }
 
+/** Optional metadata attached to Sentry Event */
 interface Metadata {
   [key: string]: any;
   componentName?: string;
@@ -74,32 +80,32 @@ interface Metadata {
 
 // https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
 type Hook =
+  | 'activated'
   | 'beforeCreate'
-  | 'created'
+  | 'beforeDestroy'
   | 'beforeMount'
-  | 'mounted'
   | 'beforeUpdate'
-  | 'updated'
-  | 'activated'
+  | 'created'
   | 'deactivated'
-  | 'beforeDestroy'
-  | 'destroyed';
+  | 'destroyed'
+  | 'mounted'
+  | 'updated';
 
-type Operation = 'create' | 'mount' | 'update' | 'activate' | 'destroy';
+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',
-  created: 'create',
+  beforeDestroy: 'destroy',
   beforeMount: 'mount',
-  mounted: 'mount',
   beforeUpdate: 'update',
-  updated: 'update',
-  activated: 'activate',
+  created: 'create',
   deactivated: 'activate',
-  beforeDestroy: 'destroy',
   destroyed: 'destroy',
+  mounted: 'mount',
+  updated: 'update',
 };
 
 const COMPONENT_NAME_REGEXP = /(?:^|[-_/])(\w)/g;
@@ -118,36 +124,39 @@ export class Vue implements Integration {
    */
   public static id: string = 'Vue';
 
-  private _options: IntegrationOptions;
+  private readonly _options: IntegrationOptions;
 
   /**
    * Cache holding already processed component names
    */
-  private componentsCache = Object.create(null);
-  private rootSpan?: SpanClass;
-  private rootSpanTimer?: ReturnType<typeof setTimeout>;
-  private tracingActivity?: number;
+  private readonly _componentsCache: { [key: string]: string } = {};
+  private _rootSpan?: SpanClass;
+  private _rootSpanTimer?: ReturnType<typeof setTimeout>;
+  private _tracingActivity?: number;
 
   /**
    * @inheritDoc
    */
   public constructor(options: Partial<IntegrationOptions>) {
     this._options = {
-      Vue: getGlobalObject<any>().Vue,
+      Vue: getGlobalObject<any>().Vue, // tslint:disable-line:no-unsafe-any
       attachProps: true,
       logErrors: false,
       tracing: false,
       ...options,
       tracingOptions: {
-        trackComponents: false,
         hooks: ['beforeMount', 'mounted', 'beforeUpdate', 'updated'],
         timeout: 2000,
+        trackComponents: false,
         ...options.tracingOptions,
       },
     };
   }
 
-  private getComponentName(vm: ViewModel): string {
+  /**
+   * Extract component name from the ViewModel
+   */
+  private _getComponentName(vm: ViewModel): string {
     // Such level of granularity is most likely not necessary, but better safe than sorry. — Kamil
     if (!vm) {
       return ANONYMOUS_COMPONENT_NAME;
@@ -174,22 +183,27 @@ export class Vue implements Integration {
       const unifiedFile = vm.$options.__file.replace(/^[a-zA-Z]:/, '').replace(/\\/g, '/');
       const filename = basename(unifiedFile, '.vue');
       return (
-        this.componentsCache[filename] ||
-        (this.componentsCache[filename] = filename.replace(COMPONENT_NAME_REGEXP, (_, c) => (c ? c.toUpperCase() : '')))
+        this._componentsCache[filename] ||
+        (this._componentsCache[filename] = filename.replace(COMPONENT_NAME_REGEXP, (_, c: string) =>
+          c ? c.toUpperCase() : '',
+        ))
       );
     }
 
     return ANONYMOUS_COMPONENT_NAME;
   }
 
-  private applyTracingHooks(vm: ViewModel, getCurrentHub: () => Hub): void {
+  /** Keep it as attribute function, to keep correct `this` binding inside the hooks callbacks  */
+  private readonly _applyTracingHooks = (vm: ViewModel, getCurrentHub: () => Hub) => {
     // Don't attach twice, just in case
-    if (vm.$options.$_sentryPerfHook) return;
+    if (vm.$options.$_sentryPerfHook) {
+      return;
+    }
     vm.$options.$_sentryPerfHook = true;
 
-    const name = this.getComponentName(vm);
+    const name = this._getComponentName(vm);
     const rootMount = name === ROOT_COMPONENT_NAME;
-    const spans: { [key: string]: any } = {};
+    const spans: { [key: string]: SpanClass } = {};
 
     // Render hook starts after once event is emitted,
     // but it ends before the second event of the same type.
@@ -201,14 +215,14 @@ 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);
+      if (this._rootSpan) {
+        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.
-          this.tracingActivity = APMIntegrations.Tracing.pushActivity('Vue Application Render');
-          this.rootSpan = getCurrentHub().startSpan({
+          this._tracingActivity = APMIntegrations.Tracing.pushActivity('Vue Application Render');
+          this._rootSpan = getCurrentHub().startSpan({
             description: 'Application Render',
             op: 'Vue',
           }) as SpanClass;
@@ -222,7 +236,7 @@ export class Vue implements Integration {
         ? this._options.tracingOptions.trackComponents.includes(name)
         : this._options.tracingOptions.trackComponents;
 
-      if (!this.rootSpan || !shouldTrack) {
+      if (!this._rootSpan || !shouldTrack) {
         return;
       }
 
@@ -234,11 +248,11 @@ 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);
       } else {
         vm.$once(`hook:${hook}`, () => {
-          if (this.rootSpan) {
-            spans[op] = this.rootSpan.child({
+          if (this._rootSpan) {
+            spans[op] = this._rootSpan.child({
               description: `Vue <${name}>`,
               op,
             });
@@ -260,28 +274,30 @@ export class Vue implements Integration {
         vm.$options[hook] = [handler];
       }
     });
-  }
+  };
 
-  private finishRootSpan(timestamp: number): void {
-    if (this.rootSpanTimer) {
-      clearTimeout(this.rootSpanTimer);
+  /** Finish top-level span and activity with a debounce configured using `timeout` option */
+  private _finishRootSpan(timestamp: number): void {
+    if (this._rootSpanTimer) {
+      clearTimeout(this._rootSpanTimer);
     }
 
-    this.rootSpanTimer = setTimeout(() => {
-      if (this.rootSpan) {
-        this.rootSpan.timestamp = timestamp;
+    this._rootSpanTimer = setTimeout(() => {
+      if (this._rootSpan) {
+        this._rootSpan.timestamp = timestamp;
       }
-      if (this.tracingActivity) {
-        APMIntegrations.Tracing.popActivity(this.tracingActivity);
+      if (this._tracingActivity) {
+        APMIntegrations.Tracing.popActivity(this._tracingActivity);
       }
     }, this._options.tracingOptions.timeout);
   }
 
-  private startTracing(getCurrentHub: () => Hub): void {
-    const applyTracingHooks = this.applyTracingHooks.bind(this);
+  /** Inject configured tracing hooks into Vue's component lifecycles */
+  private _startTracing(getCurrentHub: () => Hub): void {
+    const applyTracingHooks = this._applyTracingHooks;
 
     this._options.Vue.mixin({
-      beforeCreate() {
+      beforeCreate(this: ViewModel): void {
         // TODO: Move this check to `setupOnce` when we rework integrations initialization in v6
         if (getCurrentHub().getIntegration(APMIntegrations.Tracing)) {
           // `this` points to currently rendered component
@@ -293,19 +309,21 @@ export class Vue implements Integration {
     });
   }
 
-  private attachErrorHandler(getCurrentHub: () => Hub): void {
+  /** Inject Sentry's handler into owns Vue's error handler  */
+  private _attachErrorHandler(getCurrentHub: () => Hub): void {
     if (!this._options.Vue.config) {
-      return logger.error('Vue instance is missing required `config` attribute');
+      logger.error('Vue instance is missing required `config` attribute');
+      return;
     }
 
-    const currentErrorHandler = this._options.Vue.config.errorHandler;
+    const currentErrorHandler = this._options.Vue.config.errorHandler; // tslint:disable-line:no-unbound-method
 
     this._options.Vue.config.errorHandler = (error: Error, vm?: ViewModel, info?: string): void => {
       const metadata: Metadata = {};
 
       if (vm) {
         try {
-          metadata.componentName = this.getComponentName(vm);
+          metadata.componentName = this._getComponentName(vm);
 
           if (this._options.attachProps) {
             metadata.propsData = vm.$options.propsData;
@@ -345,13 +363,14 @@ export class Vue implements Integration {
    */
   public setupOnce(_: (callback: EventProcessor) => void, getCurrentHub: () => Hub): void {
     if (!this._options.Vue) {
-      return logger.error('Vue integration is missing a Vue instance');
+      logger.error('Vue integration is missing a Vue instance');
+      return;
     }
 
-    this.attachErrorHandler(getCurrentHub);
+    this._attachErrorHandler(getCurrentHub);
 
     if (this._options.tracing) {
-      this.startTracing(getCurrentHub);
+      this._startTracing(getCurrentHub);
     }
   }
 }