From 8fed791f5bd8b42664fe6127002d0a363b660d41 Mon Sep 17 00:00:00 2001 From: Abdelrahman Awad Date: Mon, 31 Aug 2026 15:44:29 -0400 Subject: [PATCH 1/5] feat(vue): Register a route provider read off the Vue app `vue-router` sets `app.config.globalProperties.$router` when it installs, and the SDK is already given the app, so the provider needs no new option and no router passed to the tracing integration. Registered from `init()`, so route parameterization no longer depends on tracing being enabled and works for users who never pass `router` to `browserTracingIntegration`. The router is looked up per call rather than captured, because `app.use(router)` may run either side of `Sentry.init()`. Returns the matched path rather than `route.name` even under `routeLabel: 'name'`: callers set `url.template` from this and a route name is an identifier, not a template. The navigation instrumentation still names the span after the route name when the user asked for it. --- packages/vue/src/index.ts | 1 + packages/vue/src/routeProvider.ts | 44 ++++++++++++++++ packages/vue/src/sdk.ts | 10 ++++ packages/vue/test/routeProvider.test.ts | 70 +++++++++++++++++++++++++ 4 files changed, 125 insertions(+) create mode 100644 packages/vue/src/routeProvider.ts create mode 100644 packages/vue/test/routeProvider.test.ts diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index 3e870ff1062b..b122aa918956 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -8,5 +8,6 @@ export { browserTracingIntegration } from './browserTracingIntegration'; export { attachErrorHandler } from './errorhandler'; export { createTracingMixins } from './tracing'; export { vueIntegration } from './integration'; +export { createVueRouteProvider } from './routeProvider'; export type { VueIntegrationOptions } from './integration'; export { createSentryPiniaPlugin } from './pinia'; diff --git a/packages/vue/src/routeProvider.ts b/packages/vue/src/routeProvider.ts new file mode 100644 index 000000000000..9762174cc299 --- /dev/null +++ b/packages/vue/src/routeProvider.ts @@ -0,0 +1,44 @@ +import type { RouteProvider } from '@sentry/core'; +import { createUrlRouteProvider } from '@sentry/core'; +import type { Route } from './router'; + +// Vue Router 3 resolves to `{ route }`, Vue Router 4+ returns the route itself. +type ResolvedLocation = Route | { route: Route }; + +interface InstalledRouter { + resolve?: (to: string) => ResolvedLocation; +} + +interface AppWithRouter { + config?: { globalProperties?: { $router?: InstalledRouter } }; +} + +/** + * Builds a route provider from a `vue-router` instance, however the SDK got hold of one. + * + * The router is looked up per call rather than captured once, because `app.use(router)` may run + * either side of `Sentry.init()` and only the app itself is guaranteed to exist by then. + */ +export function createVueRouteProvider(getRouter: () => InstalledRouter | undefined): RouteProvider { + return createUrlRouteProvider(url => { + const resolved = getRouter()?.resolve?.(`${url.pathname}${url.search}${url.hash}`); + if (!resolved) { + return undefined; + } + + const route = 'matched' in resolved ? resolved : resolved.route; + + // Always the matched path, never `route.name`. Callers set `url.template` from this, and a route + // name is an identifier rather than a template. + return route.matched[route.matched.length - 1]?.path; + }); +} + +/** + * Reads the router `vue-router` installed onto a Vue app. + */ +export function getRouterFromApp(app: unknown): InstalledRouter | undefined { + const firstApp: AppWithRouter | undefined = Array.isArray(app) ? app[0] : (app as AppWithRouter | undefined); + + return firstApp?.config?.globalProperties?.$router; +} diff --git a/packages/vue/src/sdk.ts b/packages/vue/src/sdk.ts index b6ce9ff99b89..76e85ca97ec8 100644 --- a/packages/vue/src/sdk.ts +++ b/packages/vue/src/sdk.ts @@ -1,10 +1,12 @@ import { getDefaultIntegrations, init as browserInit } from '@sentry/browser'; import type { Client } from '@sentry/core'; import { applySdkMetadata, setNormalizeStringifier } from '@sentry/core'; +import { setRouteProvider } from '@sentry/core/browser'; import { vueIntegration } from './integration'; import type { Options } from './types'; import { normalizeStringifyValue } from './normalizeStringifyValue'; +import { createVueRouteProvider, getRouterFromApp } from './routeProvider'; /** * Inits the Vue SDK @@ -19,6 +21,14 @@ export function init(options: Partial> = {}): Cl const client = browserInit(opts); + // Registered here rather than from `browserTracingIntegration` so route parameterization does not + // depend on tracing. The router is read off the app the SDK is already given, so users who never + // pass `router` to the tracing integration still get parameterized routes. + setRouteProvider( + createVueRouteProvider(() => getRouterFromApp(opts.app)), + client, + ); + // Add vue-specific stringification setNormalizeStringifier(normalizeStringifyValue); diff --git a/packages/vue/test/routeProvider.test.ts b/packages/vue/test/routeProvider.test.ts new file mode 100644 index 000000000000..996d133f0aae --- /dev/null +++ b/packages/vue/test/routeProvider.test.ts @@ -0,0 +1,70 @@ +import { describe, expect, it } from 'vitest'; +import { createVueRouteProvider, getRouterFromApp } from '../src/routeProvider'; +import type { Route } from '../src/router'; + +function makeRoute(overrides: Partial = {}): Route { + return { path: '/users/42', query: {}, params: {}, matched: [{ path: '/users/:id' }], ...overrides }; +} + +/** Vue Router 4+ returns the route itself. */ +const v4Router = (route: Route | undefined) => ({ resolve: () => route as Route }); +/** Vue Router 3 wraps it in `{ route }`. */ +const v3Router = (route: Route) => ({ resolve: () => ({ route }) }); + +/** A Vue 3 app with `vue-router` installed, which sets `config.globalProperties.$router`. */ +const appWithRouter = (router: unknown) => ({ config: { globalProperties: { $router: router } } }); + +describe('getRouterFromApp', () => { + it('reads the router vue-router installed on the app', () => { + const router = v4Router(makeRoute()); + + expect(getRouterFromApp(appWithRouter(router))).toBe(router); + }); + + it('reads from the first app when several were passed', () => { + const router = v4Router(makeRoute()); + + expect(getRouterFromApp([appWithRouter(router), appWithRouter(undefined)])).toBe(router); + }); + + it('returns undefined when no router is installed yet', () => { + expect(getRouterFromApp({ config: { globalProperties: {} } })).toBeUndefined(); + expect(getRouterFromApp(undefined)).toBeUndefined(); + }); +}); + +describe('createVueRouteProvider', () => { + it('resolves the matched path for Vue Router 4+', () => { + const provider = createVueRouteProvider(() => v4Router(makeRoute())); + + expect(provider.resolveRoute(new URL('https://example.com/users/42'))).toBe('/users/:id'); + }); + + it('unwraps the `{ route }` shape Vue Router 3 resolves to', () => { + const provider = createVueRouteProvider(() => v3Router(makeRoute())); + + expect(provider.resolveRoute(new URL('https://example.com/users/42'))).toBe('/users/:id'); + }); + + it('returns the matched path even for a named route, since a name is not a template', () => { + const provider = createVueRouteProvider(() => v4Router(makeRoute({ name: 'UserProfile' }))); + + expect(provider.resolveRoute(new URL('https://example.com/users/42'))).toBe('/users/:id'); + }); + + it('picks the router up late, since `app.use(router)` may run after `Sentry.init`', () => { + let router: ReturnType | undefined; + const provider = createVueRouteProvider(() => router); + + expect(provider.resolveRoute(new URL('https://example.com/users/42'))).toBeUndefined(); + + router = v4Router(makeRoute()); + expect(provider.resolveRoute(new URL('https://example.com/users/42'))).toBe('/users/:id'); + }); + + it('returns undefined when nothing matched', () => { + const provider = createVueRouteProvider(() => v4Router(makeRoute({ matched: [] }))); + + expect(provider.resolveRoute(new URL('https://example.com/nope'))).toBeUndefined(); + }); +}); From 07c2a94b026d33a1620b3fae53bb53a483308328 Mon Sep 17 00:00:00 2001 From: Abdelrahman Awad Date: Thu, 24 Sep 2026 14:03:38 -0400 Subject: [PATCH 2/5] ref(vue): Import the route provider API from `@sentry/core/browser` --- packages/vue/src/routeProvider.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vue/src/routeProvider.ts b/packages/vue/src/routeProvider.ts index 9762174cc299..e530730caf61 100644 --- a/packages/vue/src/routeProvider.ts +++ b/packages/vue/src/routeProvider.ts @@ -1,5 +1,5 @@ -import type { RouteProvider } from '@sentry/core'; -import { createUrlRouteProvider } from '@sentry/core'; +import type { RouteProvider } from '@sentry/core/browser'; +import { createUrlRouteProvider } from '@sentry/core/browser'; import type { Route } from './router'; // Vue Router 3 resolves to `{ route }`, Vue Router 4+ returns the route itself. From 2603ad82f97c2ed6727cf92156833eaf90fa8351 Mon Sep 17 00:00:00 2001 From: Abdelrahman Awad Date: Thu, 24 Sep 2026 14:49:40 -0400 Subject: [PATCH 3/5] ref(vue): Import the route provider API from `@sentry/browser` --- packages/vue/src/routeProvider.ts | 4 ++-- packages/vue/src/sdk.ts | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/vue/src/routeProvider.ts b/packages/vue/src/routeProvider.ts index e530730caf61..49db76e4617c 100644 --- a/packages/vue/src/routeProvider.ts +++ b/packages/vue/src/routeProvider.ts @@ -1,5 +1,5 @@ -import type { RouteProvider } from '@sentry/core/browser'; -import { createUrlRouteProvider } from '@sentry/core/browser'; +import type { RouteProvider } from '@sentry/browser'; +import { createUrlRouteProvider } from '@sentry/browser'; import type { Route } from './router'; // Vue Router 3 resolves to `{ route }`, Vue Router 4+ returns the route itself. diff --git a/packages/vue/src/sdk.ts b/packages/vue/src/sdk.ts index 76e85ca97ec8..cd2d6f93726f 100644 --- a/packages/vue/src/sdk.ts +++ b/packages/vue/src/sdk.ts @@ -1,7 +1,6 @@ -import { getDefaultIntegrations, init as browserInit } from '@sentry/browser'; +import { getDefaultIntegrations, init as browserInit, setRouteProvider } from '@sentry/browser'; import type { Client } from '@sentry/core'; import { applySdkMetadata, setNormalizeStringifier } from '@sentry/core'; -import { setRouteProvider } from '@sentry/core/browser'; import { vueIntegration } from './integration'; import type { Options } from './types'; From e88a95bc4edf9c8d73be30d4a844eff72616bf32 Mon Sep 17 00:00:00 2001 From: Abdelrahman Awad Date: Thu, 24 Sep 2026 15:58:42 -0400 Subject: [PATCH 4/5] ref(vue): Pass the route provider as the `routeProvider` option --- packages/vue/src/sdk.ts | 13 ++++------- packages/vue/test/sdk.test.ts | 43 +++++++++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+), 9 deletions(-) create mode 100644 packages/vue/test/sdk.test.ts diff --git a/packages/vue/src/sdk.ts b/packages/vue/src/sdk.ts index cd2d6f93726f..8bc2f184e8f8 100644 --- a/packages/vue/src/sdk.ts +++ b/packages/vue/src/sdk.ts @@ -1,4 +1,4 @@ -import { getDefaultIntegrations, init as browserInit, setRouteProvider } from '@sentry/browser'; +import { getDefaultIntegrations, init as browserInit } from '@sentry/browser'; import type { Client } from '@sentry/core'; import { applySdkMetadata, setNormalizeStringifier } from '@sentry/core'; @@ -13,6 +13,9 @@ import { createVueRouteProvider, getRouterFromApp } from './routeProvider'; export function init(options: Partial> = {}): Client | undefined { const opts = { defaultIntegrations: [...getDefaultIntegrations(options), vueIntegration()], + // The router is read off the app on each call, so `app.use(router)` can run either side of `init`, and + // users who never pass `router` to the tracing integration still get parameterized routes. + ...(options.app && { routeProvider: createVueRouteProvider(() => getRouterFromApp(options.app)) }), ...options, }; @@ -20,14 +23,6 @@ export function init(options: Partial> = {}): Cl const client = browserInit(opts); - // Registered here rather than from `browserTracingIntegration` so route parameterization does not - // depend on tracing. The router is read off the app the SDK is already given, so users who never - // pass `router` to the tracing integration still get parameterized routes. - setRouteProvider( - createVueRouteProvider(() => getRouterFromApp(opts.app)), - client, - ); - // Add vue-specific stringification setNormalizeStringifier(normalizeStringifyValue); diff --git a/packages/vue/test/sdk.test.ts b/packages/vue/test/sdk.test.ts new file mode 100644 index 000000000000..f98ff40c1b8d --- /dev/null +++ b/packages/vue/test/sdk.test.ts @@ -0,0 +1,43 @@ +import * as SentryBrowser from '@sentry/browser'; +import { getMainCarrier } from '@sentry/core'; +import { afterEach, describe, expect, it, vi } from 'vitest'; +import { init } from '../src/sdk'; + +const browserInit = vi.spyOn(SentryBrowser, 'init'); + +const DSN = 'https://public@dsn.ingest.sentry.io/1337'; + +const app = { + config: { + globalProperties: { + $router: { resolve: () => ({ matched: [{ path: '/users/:id' }] }) }, + }, + }, +}; + +describe('init', () => { + afterEach(() => { + vi.clearAllMocks(); + getMainCarrier().__SENTRY__ = undefined; + }); + + it('passes a route provider that reads the router off the app', () => { + init({ dsn: DSN, app: app as never, defaultIntegrations: false }); + + const { routeProvider } = browserInit.mock.lastCall![0]!; + expect(routeProvider?.resolveRoute(new URL('https://example.com/users/42'))).toBe('/users/:id'); + }); + + it('does not pass a route provider without an app to read the router from', () => { + init({ dsn: DSN, defaultIntegrations: false }); + + expect(browserInit).toHaveBeenLastCalledWith(expect.not.objectContaining({ routeProvider: expect.anything() })); + }); + + it('keeps a route provider passed by the user', () => { + const routeProvider = { resolveRoute: () => '/custom', resolveCurrentRoute: () => '/custom' }; + init({ dsn: DSN, app: app as never, defaultIntegrations: false, routeProvider }); + + expect(browserInit).toHaveBeenLastCalledWith(expect.objectContaining({ routeProvider })); + }); +}); From b3449251d3ae8f364fa4c417c1338a1ee9bb3d6e Mon Sep 17 00:00:00 2001 From: Abdelrahman Awad Date: Thu, 24 Sep 2026 17:15:35 -0400 Subject: [PATCH 5/5] test(vue): Cover route resolution through the route provider --- .../test-applications/vue-3/src/router/index.ts | 4 ++++ .../vue-3/src/views/RouteProviderView.vue | 14 ++++++++++++++ .../vue-3/tests/route-provider.test.ts | 9 +++++++++ 3 files changed, 27 insertions(+) create mode 100644 dev-packages/e2e-tests/test-applications/vue-3/src/views/RouteProviderView.vue create mode 100644 dev-packages/e2e-tests/test-applications/vue-3/tests/route-provider.test.ts diff --git a/dev-packages/e2e-tests/test-applications/vue-3/src/router/index.ts b/dev-packages/e2e-tests/test-applications/vue-3/src/router/index.ts index 030d75dffb23..3f718ae945b4 100644 --- a/dev-packages/e2e-tests/test-applications/vue-3/src/router/index.ts +++ b/dev-packages/e2e-tests/test-applications/vue-3/src/router/index.ts @@ -23,6 +23,10 @@ const router = createRouter({ path: '/users/:id', component: () => import('../views/UserIdView.vue'), }, + { + path: '/route-provider/:id', + component: () => import('../views/RouteProviderView.vue'), + }, { path: '/users-error/:id', component: () => import('../views/UserIdErrorView.vue'), diff --git a/dev-packages/e2e-tests/test-applications/vue-3/src/views/RouteProviderView.vue b/dev-packages/e2e-tests/test-applications/vue-3/src/views/RouteProviderView.vue new file mode 100644 index 000000000000..3f7d4dacf895 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/vue-3/src/views/RouteProviderView.vue @@ -0,0 +1,14 @@ + + + diff --git a/dev-packages/e2e-tests/test-applications/vue-3/tests/route-provider.test.ts b/dev-packages/e2e-tests/test-applications/vue-3/tests/route-provider.test.ts new file mode 100644 index 000000000000..55e890e7398e --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/vue-3/tests/route-provider.test.ts @@ -0,0 +1,9 @@ +import { expect, test } from '@playwright/test'; + +// The route provider reads the router off the app passed to `Sentry.init`, so this fails if it can't +// find it there. +test('resolves the parameterized route through the route provider', async ({ page }) => { + await page.goto('/route-provider/123'); + + await expect(page.locator('#resolved-route')).toHaveText('/route-provider/:id'); +});