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 @@
+
+ Category ID: {{ $route.params.id }}
+
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'],
])(