feat(vue): Set navigation.route.id from the route name#22372
Conversation
Sets the navigation.route.id attribute (from @sentry/conventions) on pageload and navigation spans, sourced from the Vue Router route name (to.name). This is the framework-assigned route identifier, which Relay prefers over url.template for span description inference. The attribute is set independently of the routeLabel option: routeLabel only controls the span name/source, whereas the route id identifies the route regardless. This is most valuable when to.name drives the span (source 'custom'), where url.template is not set today, so navigation.route.id becomes the only structured route identifier. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
size-limit report 📦
|
|
bugbot run |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
✅ Bugbot reviewed your changes and found no new issues!
Comment @cursor review or bugbot run to trigger another review on this PR
Reviewed by Cursor Bugbot for commit c098258. Configure here.
msonnb
changed the title
navigation.route.id from the Vue Router route namenavigation.route.id from the route name
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
| if (to.name) { | ||
| attributes[NAVIGATION_ROUTE_ID] = to.name.toString(); | ||
| } |
There was a problem hiding this comment.
Bug: When a Vue route name is a Symbol, to.name.toString() incorrectly serializes it to the format "Symbol(routeName)" for the navigation.route.id attribute.
Severity: LOW
Suggested Fix
Before setting the attribute, check if to.name is a Symbol. If it is, use its description property to get a clean identifier. For other types, continue using toString(). For example: const routeId = typeof to.name === 'symbol' ? to.name.description : to.name?.toString(); if (routeId) { attributes[NAVIGATION_ROUTE_ID] = routeId; }.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.
Location: packages/vue/src/router.ts#L109-L111
Potential issue: The code at `packages/vue/src/router.ts` sets the `navigation.route.id`
attribute by calling `to.name.toString()`. While Vue Router's type definitions allow a
route's `name` to be a `Symbol`, calling `toString()` on a `Symbol` (e.g.,
`Symbol('about')`) produces a string like `"Symbol(about)"`. This results in a verbose
and likely unintended value for the `navigation.route.id` attribute when developers use
`Symbol`-named routes, which are a supported, albeit uncommon, feature of Vue Router.
Did we get this right? 👍 / 👎 to inform future reviews.
chargome
left a comment
chargome
left a comment
There was a problem hiding this comment.
LGTM, but there's also tanstackrouter for vue which will likely need the same?
Lms24
left a comment
Lms24
left a comment
There was a problem hiding this comment.
Nice, thanks!
(I'm not sure about TanStack Router if it provides the same route names like Vue router. If it does, we can also add the id. If it doesn't that's fine, too :) )
|
TanStack Router's |
3 participants
Sets the
navigation.route.idattribute on pageload and navigation spans, sourced from the Vue Router route name (to.name).ref #22069