Description
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.