fix(vue): Update Vue trackComponents list to match components with or without <>

dev-packages/e2e-tests/test-applications/vue-3/src/main.ts

@@ -19,6 +19,7 @@ Sentry.init({
     }),
   ],
   tunnel: `http://localhost:3031/`, // proxy server
+  trackComponents: ['<HomeView>', 'UserIdErrorView'],
 });
 
 app.use(router);

dev-packages/e2e-tests/test-applications/vue-3/tests/performance.test.ts

@@ -122,3 +122,101 @@ test('sends a pageload transaction with a route name as transaction name if avai
     },
   });
 });
+
+test('sends a lifecycle span for the tracked HomeView component - with `<>`', async ({ page }) => {
+  const transactionPromise = waitForTransaction('vue-3', async transactionEvent => {
+    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
+  });
+
+  await page.goto(`/`);
+
+  const rootSpan = await transactionPromise;
+
+  expect(rootSpan).toMatchObject({
+    contexts: {
+      trace: {
+        data: {
+          'sentry.source': 'route',
+          'sentry.origin': 'auto.pageload.vue',
+          'sentry.op': 'pageload',
+        },
+        op: 'pageload',
+        origin: 'auto.pageload.vue',
+      },
+    },
+    spans: expect.arrayContaining([
+      // enabled by default
+      expect.objectContaining({
+        data: {
+          'sentry.op': 'ui.vue.render',
+          'sentry.origin': 'auto.ui.vue',
+        },
+        description: 'Application Render',
+        op: 'ui.vue.render',
+        origin: 'auto.ui.vue',
+      }),
+      // enabled by default
+      expect.objectContaining({
+        data: {
+          'sentry.op': 'ui.vue.mount',
+          'sentry.origin': 'auto.ui.vue',
+        },
+        description: 'Vue <<Root>>',
+        op: 'ui.vue.mount',
+        origin: 'auto.ui.vue',
+      }),
+      expect.objectContaining({
+        data: {
+          'sentry.op': 'ui.vue.mount',
+          'sentry.origin': 'auto.ui.vue',
+        },
+        description: 'Vue <<HomeView>>',
+        op: 'ui.vue.mount',
+        origin: 'auto.ui.vue',
+      }),
+    ]),
+    transaction: '/',
+    transaction_info: {
+      source: 'route',
+    },
+  });
+});
+
+test('sends a lifecycle span for the tracked UserIdErrorView component - without `<>`', async ({ page }) => {
+  const transactionPromise = waitForTransaction('vue-3', async transactionEvent => {
+    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
+  });
+
+  await page.goto(`/users-error/123`);
+
+  const rootSpan = await transactionPromise;
+
+  expect(rootSpan).toMatchObject({
+    contexts: {
+      trace: {
+        data: {
+          'sentry.source': 'route',
+          'sentry.origin': 'auto.pageload.vue',
+          'sentry.op': 'pageload',
+        },
+        op: 'pageload',
+        origin: 'auto.pageload.vue',
+      },
+    },
+    spans: expect.arrayContaining([
+      expect.objectContaining({
+        data: {
+          'sentry.op': 'ui.vue.mount',
+          'sentry.origin': 'auto.ui.vue',
+        },
+        description: 'Vue <<UserIdErrorView>>',
+        op: 'ui.vue.mount',
+        origin: 'auto.ui.vue',
+      }),
+    ]),
+    transaction: '/users-error/:id',
+    transaction_info: {
+      source: 'route',
+    },
+  });
+});

packages/vue/src/tracing.ts

@@ -46,6 +46,19 @@ function finishRootSpan(vm: VueSentry, timestamp: number, timeout: number): void
   }, timeout);
 }
 
+/** Find if the current component exists in the provided `TracingOptions.trackComponents` array option. */
+export function findTrackComponent(trackComponents: string[], formattedName: string): boolean {
+  function extractComponentName(name: string): string {
+    return name.replace(/^<([^\s]*)>(?: at [^\s]*)?$/, '$1');
+  }
+
+  const isMatched = trackComponents.some(compo => {
+    return extractComponentName(formattedName) === extractComponentName(compo);
+  });
+
+  return isMatched;
+}
+
 export const createTracingMixins = (options: TracingOptions): Mixins => {
   const hooks = (options.hooks || [])
     .concat(DEFAULT_HOOKS)
@@ -84,8 +97,9 @@ export const createTracingMixins = (options: TracingOptions): Mixins => {
 
         // Skip components that we don't want to track to minimize the noise and give a more granular control to the user
         const name = formatComponentName(this, false);
+
         const shouldTrack = Array.isArray(options.trackComponents)
-          ? options.trackComponents.indexOf(name) > -1
+          ? findTrackComponent(options.trackComponents, name)
           : options.trackComponents;
 
         // We always want to track root component

packages/vue/test/tracing/trackComponents.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+import { findTrackComponent } from '../../src/tracing';
+
+describe('findTrackComponent', () => {
+  describe('when user-defined array contains `<Component>`', () => {
+    it('returns true if a match is found', () => {
+      // arrange
+      const trackComponents = ['<ABC>', '<XYZ>'];
+      const formattedComponentName = '<XYZ>';
+
+      // act
+      const shouldTrack = findTrackComponent(trackComponents, formattedComponentName);
+
+      // assert
+      expect(shouldTrack).toBe(true);
+    });
+  });
+  describe('when user-defined array contains `Component` without the `<>`', () => {
+    it('returns true if a match is found', () => {
+      // arrange
+      const trackComponents = ['ABC', 'XYZ'];
+      const formattedComponentName = '<XYZ>';
+
+      // act
+      const shouldTrack = findTrackComponent(trackComponents, formattedComponentName);
+
+      // assert
+      expect(shouldTrack).toBe(true);
+    });
+  });
+  describe('when the vue file name is include in the formatted component name', () => {
+    it('returns true if a match is found', () => {
+      // arrange
+      const trackComponents = ['ABC', 'XYZ'];
+      const formattedComponentName = '<XYZ> at XYZ.vue';
+
+      // act
+      const shouldTrack = findTrackComponent(trackComponents, formattedComponentName);
+
+      // assert
+      expect(shouldTrack).toBe(true);
+    });
+  });
+});