getsentry
fix(vue): Correctly obtain component name
In some cases, Vue components do not have options.name defined, but instead have options.__name. Such components will be displayed as anonymous in Sentry and currently won't be matched in trackComponents.
The same fix was also done in Vue devtools (vuejs/devtools#2020). In my case, the problem were components from my own project, but this change also fixes that.
Also related to component names, the documentation should probably be fixed. It currently lists components such as RwvHeader in the example, but components are actually named like <RwvHeader>.
Heads-up: I'm just assigning myself to track internally that I'm reviewing the PR. Please feel free to continue, I won't interfere :)
Would you mind adding a test to this file? Thanks!
Yeah, I can add a test.
Do you by any chance have a concrete scenario where we could reproduce .name not being available?
Well, it happens in my project that uses Vue 3 with Vite. It has some custom Sentry setup, but I've also tested it with normal Sentry Vue integration.
None my my components have .name defined for some reason. Based on the devtools PR, it might be because they are imported in <script setup>? But unlike in that PR, RouterView from Vue Router has .name, even though it is imported in <script setup>, so I'm not sure if this is actually the cause.
Unfortunately, I don't have much time to do further testing.
Would you be interested in opening a PR in our docs repo for it?
Yes.
Thanks, perhaps that's even the current state in our Vue 3 e2e test app (also Vue 3 + Vite). I'll write an e2e test when I get some time. For this PR, a unit test is more than enough, thanks!
I've added a unit test and docs PR: getsentry/sentry-docs#11167
Alternatively to updating the docs, Vue integration could be modified to allow matching both components surrounded with <> and without. trackComponents is also used for Svelte, and based on the docs is is used without <>, so it might make sense to also allow component names without <> in Vue. However, the current behavour of component names with <> should be preserved for backwards compatibility. But this can probably be done later if needed.
Alternatively to updating the docs, Vue integration could be modified to allow matching both components surrounded with
<>and without
Yeah you're bringing up a good point. Let's do that instead. If you want to do this (you don't have to, feel free to decline), please open a separate PR for it. Otherwise I'll backlog this for us to take care of.