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 8c3ac217716f..aac6fb815f43 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 @@ -21,6 +21,15 @@ const router = createRouter({ path: '/users-error/:id', component: () => import('../views/UserIdErrorView.vue'), }, + { + path: '/categories', + children: [ + { + path: ':id', + component: () => import('../views/CategoryIdView.vue'), + }, + ], + }, ], }); diff --git a/dev-packages/e2e-tests/test-applications/vue-3/src/views/CategoryIdView.vue b/dev-packages/e2e-tests/test-applications/vue-3/src/views/CategoryIdView.vue new file mode 100644 index 000000000000..c3b59c9fb7f5 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/vue-3/src/views/CategoryIdView.vue @@ -0,0 +1,3 @@ + diff --git a/dev-packages/e2e-tests/test-applications/vue-3/tests/performance.test.ts b/dev-packages/e2e-tests/test-applications/vue-3/tests/performance.test.ts index bdf7b5b8e1fe..d9a594b5abe7 100644 --- a/dev-packages/e2e-tests/test-applications/vue-3/tests/performance.test.ts +++ b/dev-packages/e2e-tests/test-applications/vue-3/tests/performance.test.ts @@ -66,6 +66,35 @@ test('sends a navigation transaction with a parameterized URL', async ({ page }) }); }); +test('sends a pageload transaction with a nested route URL', async ({ page }) => { + const transactionPromise = waitForTransaction('vue-3', async transactionEvent => { + return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload'; + }); + + await page.goto(`/categories/123`); + + const rootSpan = await transactionPromise; + + expect(rootSpan).toMatchObject({ + contexts: { + trace: { + data: { + 'sentry.source': 'route', + 'sentry.origin': 'auto.pageload.vue', + 'sentry.op': 'pageload', + 'params.id': '123', + }, + op: 'pageload', + origin: 'auto.pageload.vue', + }, + }, + transaction: '/categories/:id', + transaction_info: { + source: 'route', + }, + }); +}); + test('sends a pageload transaction with a route name as transaction name if available', async ({ page }) => { const transactionPromise = waitForTransaction('vue-3', async transactionEvent => { return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload'; diff --git a/packages/vue/src/router.ts b/packages/vue/src/router.ts index ba42c8ba9fb5..b1d7163e48d1 100644 --- a/packages/vue/src/router.ts +++ b/packages/vue/src/router.ts @@ -83,8 +83,9 @@ export function instrumentVueRouter( if (to.name && options.routeLabel !== 'path') { spanName = to.name.toString(); transactionSource = 'custom'; - } else if (to.matched[0] && to.matched[0].path) { - spanName = to.matched[0].path; + } else if (to.matched.length > 0) { + const lastIndex = to.matched.length - 1; + spanName = to.matched[lastIndex].path; transactionSource = 'route'; } diff --git a/packages/vue/test/router.test.ts b/packages/vue/test/router.test.ts index 8ff42d49e2b9..e835855ebd7a 100644 --- a/packages/vue/test/router.test.ts +++ b/packages/vue/test/router.test.ts @@ -43,6 +43,14 @@ const testRoutes: Record = { path: '/accounts/4', query: {}, }, + nestedRoute: { + matched: [{ path: '/' }, { path: '/categories' }, { path: '/categories/:categoryId' }], + params: { + categoryId: '1', + }, + path: '/categories/1', + query: {}, + }, namedRoute: { matched: [{ path: '/login' }], name: 'login-screen', @@ -85,6 +93,7 @@ describe('instrumentVueRouter()', () => { it.each([ ['normalRoute1', 'normalRoute2', '/accounts/:accountId', 'route'], + ['normalRoute1', 'nestedRoute', '/categories/:categoryId', 'route'], ['normalRoute2', 'namedRoute', 'login-screen', 'custom'], ['normalRoute2', 'unmatchedRoute', '/e8733846-20ac-488c-9871-a5cbcb647294', 'url'], ])( @@ -122,6 +131,7 @@ describe('instrumentVueRouter()', () => { it.each([ ['initialPageloadRoute', 'normalRoute1', '/books/:bookId/chapter/:chapterId', 'route'], + ['initialPageloadRoute', 'nestedRoute', '/categories/:categoryId', 'route'], ['initialPageloadRoute', 'namedRoute', 'login-screen', 'custom'], ['initialPageloadRoute', 'unmatchedRoute', '/e8733846-20ac-488c-9871-a5cbcb647294', 'url'], ])(