Vue `trackComponents` allowlist should match for components without `<>`

[Lms24]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/vue

SDK Version

8.26.0

Framework Version

Vue 3, possibly Vue 2

Link to Sentry event

No response

Reproduction Example/SDK Setup

Configure component tracking in the Vue SDK with an allowlist which components should be tracked like so

Sentry.init({
  //...
  trackComponents: [
    "App",
    "RwvHeader",
    "RwvFooter",
    "RwvArticleList",
    "Pagination",
  ],
})

Steps to Reproduce

Configure SDK as shown above

Expected Result

Only the components mentioned in trackComponents will get component lifecycle spans

Actual Result

As reported in #13484, no spans at all are recorded because the list doesn't match any of the internally formatted component names. Instead, what users would need to enter is:

Sentry.init({
  //...
  trackComponents: [
    "<App>",
    "<RwvHeader>",
    "<RwvFooter>",
    "<RwvArticleList>",
    "<Pagination>",
  ],
})

which is very unintuitive.

To solve this, we should match for both, the component name with and without angle brackets. We should continue to match with <> to not break existing setups where users figured this out already.

[Lms24]

This was fixed in #13543 and will be included in the next release (8.29.0)