ref(vue): Convert Vue integration to use functional approach (#10218)

Wanted to test out integration changes, so decided try it with Vue
integration.

Author: AbhiPrasad

packages/vue/src/index.ts

@@ -4,4 +4,4 @@ export { init } from './sdk';
 export { vueRouterInstrumentation } from './router';
 export { attachErrorHandler } from './errorhandler';
 export { createTracingMixins } from './tracing';
-export { VueIntegration } from './integration';
+export { vueIntegration, VueIntegration } from './integration';

packages/vue/src/integration.ts

@@ -1,5 +1,5 @@
-import { hasTracingEnabled } from '@sentry/core';
-import type { Client, Hub, Integration } from '@sentry/types';
+import { convertIntegrationFnToClass, defineIntegration, hasTracingEnabled } from '@sentry/core';
+import type { Client, Integration, IntegrationClass, IntegrationFn } from '@sentry/types';
 import { GLOBAL_OBJ, arrayify, consoleSandbox } from '@sentry/utils';
 
 import { DEFAULT_HOOKS } from './constants';
@@ -18,55 +18,49 @@ const DEFAULT_CONFIG: VueOptions = {
   trackComponents: false,
 };
 
-/**
- * Initialize Vue error & performance tracking.
- */
-export class VueIntegration implements Integration {
-  /**
-   * @inheritDoc
-   */
-  public static id: string = 'Vue';
-
-  /**
-   * @inheritDoc
-   */
-  public name: string;
-
-  private readonly _options: Partial<VueOptions>;
+const INTEGRATION_NAME = 'Vue';
 
-  public constructor(options: Partial<VueOptions> = {}) {
-    this.name = VueIntegration.id;
-    this._options = options;
-  }
+const _vueIntegration = ((integrationOptions: Partial<VueOptions> = {}) => {
+  return {
+    name: INTEGRATION_NAME,
+    // TODO v8: Remove this
+    setupOnce() {}, // eslint-disable-line @typescript-eslint/no-empty-function
+    setup(client) {
+      _setupIntegration(client, integrationOptions);
+    },
+  };
+}) satisfies IntegrationFn;
 
-  /** @inheritDoc */
-  public setupOnce(_addGlobalEventProcessor: unknown, getCurrentHub: () => Hub): void {
-    // eslint-disable-next-line deprecation/deprecation
-    this._setupIntegration(getCurrentHub().getClient());
-  }
+export const vueIntegration = defineIntegration(_vueIntegration);
 
-  /** Just here for easier testing */
-  protected _setupIntegration(client: Client | undefined): void {
-    const options: Options = { ...DEFAULT_CONFIG, ...(client && client.getOptions()), ...this._options };
+/**
+ * Initialize Vue error & performance tracking.
+ */
+// eslint-disable-next-line deprecation/deprecation
+export const VueIntegration = convertIntegrationFnToClass(
+  INTEGRATION_NAME,
+  vueIntegration,
+) as IntegrationClass<Integration>;
 
-    if (!options.Vue && !options.app) {
-      consoleSandbox(() => {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `[@sentry/vue]: Misconfigured SDK. Vue specific errors will not be captured.
+function _setupIntegration(client: Client, integrationOptions: Partial<VueOptions>): void {
+  const options: Options = { ...DEFAULT_CONFIG, ...client.getOptions(), ...integrationOptions };
+  if (!options.Vue && !options.app) {
+    consoleSandbox(() => {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[@sentry/vue]: Misconfigured SDK. Vue specific errors will not be captured.
 Update your \`Sentry.init\` call with an appropriate config option:
 \`app\` (Application Instance - Vue 3) or \`Vue\` (Vue Constructor - Vue 2).`,
-        );
-      });
-      return;
-    }
+      );
+    });
+    return;
+  }
 
-    if (options.app) {
-      const apps = arrayify(options.app);
-      apps.forEach(app => vueInit(app, options));
-    } else if (options.Vue) {
-      vueInit(options.Vue, options);
-    }
+  if (options.app) {
+    const apps = arrayify(options.app);
+    apps.forEach(app => vueInit(app, options));
+  } else if (options.Vue) {
+    vueInit(options.Vue, options);
   }
 }
 

packages/vue/test/integration/VueIntegration.test.ts

@@ -1,3 +1,4 @@
+import type { Client } from '@sentry/types';
 import { logger } from '@sentry/utils';
 import { createApp } from 'vue';
 
@@ -36,7 +37,7 @@ describe('Sentry.VueIntegration', () => {
 
     // This would normally happen through client.addIntegration()
     const integration = new Sentry.VueIntegration({ app });
-    integration['_setupIntegration'](Sentry.getClient());
+    integration['setup']?.(Sentry.getClient() as Client);
 
     app.mount(el);
 
@@ -58,7 +59,7 @@ describe('Sentry.VueIntegration', () => {
 
     // This would normally happen through client.addIntegration()
     const integration = new Sentry.VueIntegration({ app });
-    integration['_setupIntegration'](Sentry.getClient());
+    integration['setup']?.(Sentry.getClient() as Client);
 
     expect(warnings).toEqual([
       '[@sentry/vue]: Misconfigured SDK. Vue app is already mounted. Make sure to call `app.mount()` after `Sentry.init()`.',

packages/vue/test/integration/init.test.ts

@@ -104,8 +104,6 @@ Update your \`Sentry.init\` call with an appropriate config option:
 });
 
 function runInit(options: Partial<Options>): void {
-  const hasRunBefore = Sentry.getClient()?.getIntegrationByName?.(VueIntegration.id);
-
   const integration = new VueIntegration();
 
   Sentry.init({
@@ -114,11 +112,4 @@ function runInit(options: Partial<Options>): void {
     integrations: [integration],
     ...options,
   });
-
-  // Because our integrations API is terrible to test, we need to make sure to check
-  // If we've already had this integration registered before
-  // if that's the case, `setup()` will not be run, so we need to manually run it :(
-  if (hasRunBefore) {
-    integration['_setupIntegration'](Sentry.getClient());
-  }
 }