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

packages/vue/src/tracing.ts

@@ -46,6 +46,25 @@ 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 +103,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);
+    });
+  });
+});