Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

fix(v8/react): Improve handling of routes nested under path="/"#14897

Merged
chargome merged 1 commit intov8getsentry/sentry-javascript:v8from
onur/backport-rr-nested-under-slashgetsentry/sentry-javascript:onur/backport-rr-nested-under-slashCopy head branch name to clipboard
Jan 3, 2025
Merged

fix(v8/react): Improve handling of routes nested under path="/"#14897
chargome merged 1 commit intov8getsentry/sentry-javascript:v8from
onur/backport-rr-nested-under-slashgetsentry/sentry-javascript:onur/backport-rr-nested-under-slashCopy head branch name to clipboard

Conversation

@onurtemizkan
Copy link
Collaborator

Backports #14821

We noticed this in Sentry's `/issues/:groupId/` route, which uses SDK
v8.43.0. The full route tree is complex, but the relevant parts are:

```js
<Route path="/" element={<div>root</div>}>
  <Route path="/issues/:groupId/" element={<div>issues group</div>}>
    <Route index element={<div>index</div>} />
  </Route>
</Route>
```

If you navigate to e.g. `/issues/123` (no trailing slash), the recorded
transaction name is `//issues/:groupId/` (notice the double slash). This
looks messy but doesn't have too much of a consequence.

The worse issue is when you navigate to e.g. `/issues/123/` (with
trailing slash), the transaction name is `/issues/123/` - it is not
parameterized. This breaks transaction grouping. On the `master` and
`develop` branch of the SDK, the transaction name is recorded as `/`.
This causes the transactions to be grouped incorrectly with the root, as
well as any other routes nested under a route with `path="/"`.

(Thanks @JoshFerge for noticing the bad data in Sentry! 🙌)

---

Note that this commit effectively reverts a change from #14304 where

```js
if (basename + branch.pathname === location.pathname) {
```

became

```js
if (location.pathname.endsWith(basename + branch.pathname)) {
```

This is the change that caused the difference in results between SDK
versions. This will always match when `basename` is empty,
`branch.pathname` is `/`, and `location.pathname` ends with `/` - in
other words, if you have a parent route with `path="/"`, every request
ending in a slash will match it instead of the more specific child
route. (Depending on how often this kind of `Route` nesting happens in
the wild, this could be a wide regression in transaction names.) But, no
tests failed from the removal of `endsWith`. @onurtemizkan, who wrote
the change in question:

> I'd expect this to break descendant routes. But in the final
> implementation, descendant routes don't end up here. So, I
> believe it's safe to revert.
@onurtemizkan onurtemizkan changed the title fix(v8/react): improve handling of routes nested under path="/" (#14821) fix(v8/react): Improve handling of routes nested under path="/" Jan 3, 2025
@onurtemizkan onurtemizkan requested a review from chargome January 3, 2025 11:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

Morty Proxy This is a proxified and sanitized view of the page, visit original site.