feat(vue): Expose initVueApp method to initialize vue app later

Author: mydea

packages/vue/src/index.ts

@@ -1,6 +1,6 @@
 export * from '@sentry/browser';
 
-export { init } from './sdk';
+export { init, initVueApp } from './sdk';
 export { vueRouterInstrumentation } from './router';
 export { attachErrorHandler } from './errorhandler';
 export { createTracingMixins } from './tracing';

packages/vue/src/sdk.ts

@@ -1,6 +1,7 @@
+import type { BrowserClient } from '@sentry/browser';
 import { init as browserInit, SDK_VERSION } from '@sentry/browser';
-import { hasTracingEnabled } from '@sentry/core';
-import { arrayify, GLOBAL_OBJ } from '@sentry/utils';
+import { getCurrentHub, hasTracingEnabled } from '@sentry/core';
+import { arrayify, GLOBAL_OBJ, logger } from '@sentry/utils';
 
 import { DEFAULT_HOOKS } from './constants';
 import { attachErrorHandler } from './errorhandler';
@@ -43,7 +44,7 @@ export function init(
 
   browserInit(options);
 
-  if (!options.Vue && !options.app) {
+  if (!options.Vue && !options.app && options.app !== false) {
     // eslint-disable-next-line no-console
     console.warn(
       `[@sentry/vue]: Misconfigured SDK. Vue specific errors will not be captured.
@@ -61,6 +62,22 @@ Update your \`Sentry.init\` call with an appropriate config option:
   }
 }
 
+/**
+ * Initialize Vue-specific error monitoring for a given Vue app.
+ */
+export function initVueApp(app: Vue, client?: BrowserClient): void {
+  const _client = client || getCurrentHub().getClient();
+  const options = _client && (_client.getOptions() as Options);
+
+  if (options) {
+    vueInit(app, options);
+  } else if (__DEBUG_BUILD__) {
+    logger.warn(
+      '[@sentry/vue]: Cannot initialize as no Client available. Make sure to call `Sentry.init` before calling `initVueApp()`.',
+    );
+  }
+}
+
 const vueInit = (app: Vue, options: Options): void => {
   // Check app is not mounted yet - should be mounted _after_ init()!
   // This is _somewhat_ private, but in the case that this doesn't exist we simply ignore it

packages/vue/src/types.ts

@@ -29,8 +29,12 @@ export interface Options extends TracingOptions, BrowserOptions {
   /** Vue constructor to be used inside the integration (as imported by `import Vue from 'vue'` in Vue2) */
   Vue?: Vue;
 
-  /** Vue app instance(s) to be used inside the integration (as generated by `createApp` in Vue3 ) */
-  app?: Vue | Vue[];
+  /**
+   * Vue app instance(s) to be used inside the integration (as generated by `createApp` in Vue3 )
+   * Set this to `false` to indicate you are purposefully _not_ setting up a Vue app right now,
+   * e.g. if you want to manually call `initVueApp` later.
+   */
+  app?: Vue | Vue[] | false;
 
   /**
    * When set to `false`, Sentry will suppress reporting of all props data

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

@@ -3,22 +3,17 @@ import { createApp } from 'vue';
 import * as Sentry from './../../src';
 
 describe('Sentry.init', () => {
-  let _consoleWarn: any;
-  let warnings: string[] = [];
+  let warnings: unknown[] = [];
 
   beforeEach(() => {
     warnings = [];
-    // eslint-disable-next-line no-console
-    _consoleWarn = console.warn;
-    // eslint-disable-next-line no-console
-    console.warn = jest.fn((message: string) => {
+    jest.spyOn(console, 'warn').mockImplementation((message: unknown) => {
       warnings.push(message);
     });
   });
 
   afterEach(() => {
-    // eslint-disable-next-line no-console
-    console.warn = _consoleWarn;
+    jest.clearAllMocks();
   });
 
   it('does not warn when correctly setup (Vue 3)', () => {
@@ -90,4 +85,20 @@ Update your \`Sentry.init\` call with an appropriate config option:
 \`app\` (Application Instance - Vue 3) or \`Vue\` (Vue Constructor - Vue 2).`,
     ]);
   });
+
+  it('does not warn when passing app=false', () => {
+    const el = document.createElement('div');
+    const app = createApp({
+      template: '<div>hello</div>',
+    });
+
+    Sentry.init({
+      app: false,
+      defaultIntegrations: false,
+    });
+
+    app.mount(el);
+
+    expect(warnings).toEqual([]);
+  });
 });

packages/vue/test/integration/initVueApp.test.ts

@@ -0,0 +1,104 @@
+import { logger } from '@sentry/utils';
+import { createApp } from 'vue';
+
+import * as Sentry from '../../src';
+import { createTransport, Hub, makeMain } from '../../src';
+
+const PUBLIC_DSN = 'https://username@domain/123';
+
+describe('Sentry.initVueApp', () => {
+  let loggerWarnings: unknown[] = [];
+  let warnings: unknown[] = [];
+
+  beforeEach(() => {
+    warnings = [];
+    loggerWarnings = [];
+
+    jest.spyOn(logger, 'warn').mockImplementation((message: unknown) => {
+      loggerWarnings.push(message);
+    });
+
+    jest.spyOn(console, 'warn').mockImplementation((message: unknown) => {
+      warnings.push(message);
+    });
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('warns when called before SDK.init()', () => {
+    const hub = new Hub();
+    makeMain(hub);
+
+    const app = createApp({
+      template: '<div>hello</div>',
+    });
+
+    Sentry.initVueApp(app);
+
+    expect(loggerWarnings).toEqual([
+      '[@sentry/vue]: Cannot initialize as no Client available. Make sure to call `Sentry.init` before calling `initVueApp()`.',
+    ]);
+    expect(warnings).toEqual([]);
+  });
+
+  it('warns when mounting before SDK.initVueApp()', () => {
+    Sentry.init({ dsn: PUBLIC_DSN, app: false, autoSessionTracking: false });
+
+    const el = document.createElement('div');
+    const app = createApp({
+      template: '<div>hello</div>',
+    });
+
+    app.mount(el);
+
+    Sentry.initVueApp(app);
+
+    expect(warnings).toEqual([
+      '[@sentry/vue]: Misconfigured SDK. Vue app is already mounted. Make sure to call `app.mount()` after `Sentry.init()`.',
+    ]);
+    expect(loggerWarnings).toEqual([]);
+  });
+
+  it('works when calling SDK.initVueApp()', () => {
+    Sentry.init({ dsn: PUBLIC_DSN, app: false, autoSessionTracking: false });
+
+    const el = document.createElement('div');
+    const app = createApp({
+      template: '<div>hello</div>',
+    });
+
+    Sentry.initVueApp(app);
+
+    app.mount(el);
+
+    expect(warnings).toEqual([]);
+    expect(loggerWarnings).toEqual([]);
+
+    expect(app.config.errorHandler).toBeDefined();
+  });
+
+  it('allows to pass a client to SDK.initVueApp()', () => {
+    const el = document.createElement('div');
+    const app = createApp({
+      template: '<div>hello</div>',
+    });
+
+    const client = new Sentry.BrowserClient({
+      dsn: PUBLIC_DSN,
+      integrations: [],
+      stackParser: () => [],
+      transport: () => createTransport({ recordDroppedEvent: () => undefined }, _ => Promise.resolve({})),
+    });
+
+    Sentry.initVueApp(app, client);
+
+    app.mount(el);
+
+    expect(warnings).toEqual([]);
+    expect(loggerWarnings).toEqual([]);
+
+    expect(app.config.errorHandler).toBeDefined();
+  });
+});