fix(vue): Handle span name assignment for nested routes in VueRouter (#12398)

Fix an issue where the correct transactionName could not be obtained
when using nested routes in VueRouter.

Author: soch4n

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'),
+        },
+      ],
+    },
   ],
 });
 

dev-packages/e2e-tests/test-applications/vue-3/src/views/CategoryIdView.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Category ID: {{ $route.params.id }}</h1>
+</template>

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';

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';
     }
 

packages/vue/test/router.test.ts

@@ -43,6 +43,14 @@ const testRoutes: Record<string, Route> = {
     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'],
   ])(