feat(vue): Register the route provider for Vue 2

Author: logaretm

packages/vue/src/integration.ts

@@ -4,7 +4,7 @@ import { DEFAULT_HOOKS, DEFAULT_ROOT_SPAN_TIMEOUT } from './constants';
 import { DEBUG_BUILD } from './debug-build';
 import { attachErrorHandler } from './errorhandler';
 import { instrumentAppMountWithoutMixin } from './rootInstrumentation';
-import { createVueRouteProvider, getRouterFromApp } from './routeProvider';
+import { captureRouterFromVue, createVueRouteProvider, getRouterFromApp } from './routeProvider';
 import { createTracingMixins } from './tracing';
 import type { Options, TracingOptions, Vue, VueOptions } from './types';
 
@@ -40,16 +40,14 @@ export const vueIntegration = defineIntegration((integrationOptions: Partial<Vue
         return;
       }
 
-      if (options.app) {
-        const { app } = options;
-        // Read per call because `app.use(router)` may run after `init`. A user's `routeProvider` wins.
-        if (!getRouteProvider(client)) {
-          setRouteProvider(
-            createVueRouteProvider(() => getRouterFromApp(app)),
-            client,
-          );
-        }
+      // The router is looked up lazily because it may be installed after `init`. A user's `routeProvider` wins.
+      if (!getRouteProvider(client)) {
+        const { app, Vue } = options;
+        const getRouter = app ? () => getRouterFromApp(app) : captureRouterFromVue(Vue!);
+        setRouteProvider(createVueRouteProvider(getRouter), client);
+      }
 
+      if (options.app) {
         const apps = Array.isArray(options.app) ? options.app : [options.app];
         apps.forEach(app => vueInit(app, options));
       } else if (options.Vue) {

packages/vue/src/routeProvider.ts

@@ -52,6 +52,21 @@ export function getRouterFromApp(app: Vue | Vue[] | undefined): InstalledRouter
   return firstApp?.config?.globalProperties?.$router;
 }
 
+/**
+ * Vue 2 only exposes the router on instances, not on the constructor passed to `init`, so this picks it
+ * up from the root instance (`new Vue({ router })`) as it is created.
+ */
+export function captureRouterFromVue(Vue: Vue): () => InstalledRouter | undefined {
+  let router: InstalledRouter | undefined;
+  Vue.mixin({
+    beforeCreate(this: { $options: { router?: InstalledRouter } }) {
+      router = router || this.$options.router;
+    },
+  });
+
+  return () => router;
+}
+
 /**
  * `resolve` matches the router's own location rather than the browser's: the hash in hash mode, and
  * the path without the router's base otherwise. Mirrors vue-router's `createCurrentLocation`.

packages/vue/test/integration/mixinRegistration.test.ts

@@ -160,7 +160,8 @@ describe('tracing mixin registration', () => {
   it('registers the tracing mixin on the constructor passed as `Vue` (Vue 2 setup)', ({ app, initSentry }) => {
     initSentry({ sdk: { app: undefined, Vue: app } });
 
-    expect(getRegisteredMixins(app)).toHaveLength(1);
+    // The tracing mixin, plus the one that picks up the router for the route provider.
+    expect(getRegisteredMixins(app)).toHaveLength(2);
   });
 });
 

packages/vue/test/sdk.test.ts

@@ -7,12 +7,10 @@ import type { Vue } from '../src/types';
 
 const DSN = 'https://public@dsn.ingest.sentry.io/1337';
 
+const router = { resolve: () => ({ matched: [{ path: '/users/:id' }] }) };
+
 const app = {
-  config: {
-    globalProperties: {
-      $router: { resolve: () => ({ matched: [{ path: '/users/:id' }] }) },
-    },
-  },
+  config: { globalProperties: { $router: router } },
   mixin: vi.fn(),
 } as unknown as Vue;
 
@@ -34,6 +32,22 @@ describe('route provider registration', () => {
     expect(resolveRoute('https://example.com/users/42', client)).toBe('/users/:id');
   });
 
+  it('registers a route provider that picks the router up from the Vue 2 root instance', () => {
+    let beforeCreate: (this: unknown) => void = () => {};
+    const Vue2 = {
+      config: {},
+      mixin: (mixin: { beforeCreate: typeof beforeCreate }) => {
+        beforeCreate = mixin.beforeCreate;
+      },
+    } as unknown as Vue;
+    const client = init({ dsn: DSN, Vue: Vue2, defaultIntegrations: false, integrations: [vueIntegration()] });
+
+    expect(resolveRoute('https://example.com/users/42', client)).toBeUndefined();
+
+    beforeCreate.call({ $options: { router } });
+    expect(resolveRoute('https://example.com/users/42', client)).toBe('/users/:id');
+  });
+
   it('does not register a route provider without an app to read the router from', () => {
     const client = init({ dsn: DSN, defaultIntegrations: false, integrations: [vueIntegration()] });