feat(remix): Add parameterized transaction naming for routes - #17951

Merged
onurtemizkan merged 11 commits into
developfrom
onur/remix-parameterized-routes
Nov 26, 2025
Merged

feat(remix): Add parameterized transaction naming for routes#17951
onurtemizkan merged 11 commits into
developfrom
onur/remix-parameterized-routes

Conversation

@onurtemizkan

@onurtemizkanonurtemizkan commented Oct 16, 2025

Copy link
Copy Markdown
Contributor

This PR adds parameterized routes for Remix SDK, similarly to the NextJS SDK

Resolves: #16690
Needs docs PR for the Vite plugin

Adds automatic parameterization of Remix route IDs for transaction naming. Converts internal Remix route file patterns to parameterized paths similar to the other SDKs (routes/user.$id -> /user/:id).

  • Created sentryRemixVitePlugin that extracts route information from Remix builds and generates a manifest file containing route ID to parameterized route mappings.
  • Added remixRouteParameterization.ts with regex-based route conversion that handles dynamic segments ($param:param), splat routes ($:*), and nested routes.
  • Updated both client and server instrumentation in performance.tsx and instrumentServer.ts to use parameterized transaction names.
  • It also works with Hydrogen

Vite plugin is used like:

// vite.config.tsimport{defineConfig}from'vite';import{vitePluginasremix}from'@remix-run/dev';import{sentryRemixVitePlugin}from'@sentry/remix';exportdefaultdefineConfig({plugins: [remix(),sentryRemixVitePlugin({appDirPath: './app',// Default is 'app' in project root}),],});

Updated all Remix E2E test applications to expect parameterized route names. Added new E2E test application create-remix-app-v2-non-vite for testing backward compatibility for non-Vite builds - these continue to use routes/user.$id format.

Summary

Route FileExample URLBeforeAfter (Server - All Apps)After (Client - Vite Plugin)
_index.tsx/routes/_index//
user.$id.tsx/user/123routes/user.$id/user/:id/user/:id
users.$userId.posts.$postId.tsx/users/123/posts/456routes/users.$userId.posts.$postId/users/:userId/posts/:postId/users/:userId/posts/:postId
$.tsx (splat)/docs/guide/introroutes/$/:*/:*
docs.$.tsx (scoped splat)/docs/guide/introroutes/docs.$/docs/:*/docs/:*

Notes

  • Server-side: Parameterization works automatically for all Remix apps (Vite, non-Vite, Hydrogen, Express).
  • Client-side: Requires the Vite plugin. Without it, client transactions continue using route IDs (e.g., routes/user.$id).

@onurtemizkan
onurtemizkanforce-pushed the onur/remix-parameterized-routes branch from 0460a75 to 8886ddcCompareOctober 16, 2025 12:17
@onurtemizkan
onurtemizkan marked this pull request as ready for review October 16, 2025 14:06
cursor[bot]

This comment was marked as outdated.

@github-actions

github-actionsBot commented Oct 16, 2025

Copy link
Copy Markdown
Contributor

node-overhead report 🧳

Note: This is a synthetic benchmark with a minimal express app and does not necessarily reflect the real-world performance impact in an application.

ScenarioRequests/s% of BaselinePrev. Requests/sChange %
GET Baseline11,282-9,086+24%
GET With Sentry1,91417%1,761+9%
GET With Sentry (error only)7,67168%6,153+25%
POST Baseline1,153-1,210-5%
POST With Sentry57550%597-4%
POST With Sentry (error only)1,03189%1,075-4%
MYSQL Baseline3,924-3,326+18%
MYSQL With Sentry47712%493-3%
MYSQL With Sentry (error only)3,29584%2,708+22%

View base workflow run

if: needs.job_build.outputs.changed_remix == 'true' || github.event_name != 'pull_request'
runs-on: ubuntu-24.04
timeout-minutes: 10
timeout-minutes: 15

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did this increase so much?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After adding the new tests, some of them started randomly timing out slightly above the 10-minute threshold on CI. It can be 11-12. I just increased this much to be ready for when we add more tests.


// No manifest available (legacy app without Vite plugin)
// Fall back to route ID for backward compatibility
return { name: routeId, source: 'route' };

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be url here then? In the legacy case this will not be parameterized right?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this is still not an unparameterized url really, in the previous implementation we were using route for the routeId (e.g. routes/users.$userId.posts.$postId) as well, so while it's not a parameterized route by its format, it still contains the parameterized route info.

Comment threadpackages/remix/src/server/instrumentServer.ts
@chargome

Copy link
Copy Markdown
Member

@onurtemizkan please merge in once linting issues are solved ✅

Comment threadpackages/remix/src/client/performance.tsx
Comment threadpackages/remix/src/config/vite.ts
Comment threadpackages/remix/src/client/remixRouteParameterization.ts
Comment threadpackages/remix/src/config/vite.ts
@onurtemizkan
onurtemizkanforce-pushed the onur/remix-parameterized-routes branch from 8e8d7c6 to eb00778CompareNovember 26, 2025 13:30
Comment threadpackages/remix/src/config/vite.ts
@onurtemizkan
onurtemizkan merged commit a3875c5 into developNov 26, 2025
78 checks passed
@onurtemizkan
onurtemizkan deleted the onur/remix-parameterized-routes branch November 26, 2025 13:42
Doridian pushed a commit to foxCaves/foxCaves that referenced this pull request Dec 3, 2025
This PR contains the following updates:
| Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) |
|---|---|---|---|
| [@sentry/react](https://github.com/getsentry/sentry-javascript/tree/master/packages/react) ([source](https://github.com/getsentry/sentry-javascript)) | [`10.27.0` -> `10.28.0`](https://renovatebot.com/diffs/npm/@sentry%2freact/10.27.0/10.28.0) | ![age](https://developer.mend.io/api/mc/badges/age/npm/@sentry%2freact/10.28.0?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@sentry%2freact/10.27.0/10.28.0?slim=true) |
---
### Release Notes
<details>
<summary>getsentry/sentry-javascript (@&#8203;sentry/react)</summary>
### [`v10.28.0`](https://github.com/getsentry/sentry-javascript/releases/tag/10.28.0)
[Compare Source](getsentry/sentry-javascript@10.27.0...10.28.0)
##### Important Changes
- **feat(core): Make `matcher` parameter optional in `makeMultiplexedTransport` ([#&#8203;10798](getsentry/sentry-javascript#10798
The `matcher` parameter in `makeMultiplexedTransport` is now optional with a sensible default. This makes it much easier to use the multiplexed transport for sending events to multiple DSNs based on runtime configuration.
**Before:**
```javascript
import { makeFetchTransport, makeMultiplexedTransport } from '@&#8203;sentry/browser';
const EXTRA_KEY = 'ROUTE_TO';
const transport = makeMultiplexedTransport(makeFetchTransport, args => {
const event = args.getEvent();
if (event?.extra?.[EXTRA_KEY] && Array.isArray(event.extra[EXTRA_KEY])) {
return event.extra[EXTRA_KEY];
}
return [];
});
Sentry.init({
transport,
// ... other options
});
// Capture events with routing info
Sentry.captureException(error, {
extra: {
[EXTRA_KEY]: [
{ dsn: 'https://key1@&#8203;sentry.io/project1', release: 'v1.0.0' },
{ dsn: 'https://key2@&#8203;sentry.io/project2' },
],
},
});
```
**After:**
```javascript
import { makeFetchTransport, makeMultiplexedTransport, MULTIPLEXED_TRANSPORT_EXTRA_KEY } from '@&#8203;sentry/browser';
// Just pass the transport generator - the default matcher handles the rest!
Sentry.init({
transport: makeMultiplexedTransport(makeFetchTransport),
// ... other options
});
// Capture events with routing info using the exported constant
Sentry.captureException(error, {
extra: {
[MULTIPLEXED_TRANSPORT_EXTRA_KEY]: [
{ dsn: 'https://key1@&#8203;sentry.io/project1', release: 'v1.0.0' },
{ dsn: 'https://key2@&#8203;sentry.io/project2' },
],
},
});
```
The default matcher looks for routing information in `event.extra[MULTIPLEXED_TRANSPORT_EXTRA_KEY]`. You can still provide a custom matcher function for advanced use cases.
- **feat(nextjs): Support cacheComponents on turbopack ([#&#8203;18304](getsentry/sentry-javascript#18304
This release adds support for `cacheComponents` on turbopack builds. We are working on adding support for this feature in webpack builds as well.
##### Other Changes
- feat: Publish AWS Lambda Layer for Node 24 ([#&#8203;18327](getsentry/sentry-javascript#18327))
- feat(browser): Expose langchain instrumentation ([#&#8203;18342](getsentry/sentry-javascript#18342))
- feat(browser): Expose langgraph instrumentation ([#&#8203;18345](getsentry/sentry-javascript#18345))
- feat(cloudflare): Allow specifying a custom fetch in Cloudflare transport options ([#&#8203;18335](getsentry/sentry-javascript#18335))
- feat(core): Add `isolateTrace` option to `Sentry.withMonitor()` ([#&#8203;18079](getsentry/sentry-javascript#18079))
- feat(deps): bump [@&#8203;sentry/webpack-plugin](https://github.com/sentry/webpack-plugin) from 4.3.0 to 4.6.1 ([#&#8203;18272](getsentry/sentry-javascript#18272))
- feat(nextjs): Add cloudflare `waitUntil` detection ([#&#8203;18336](getsentry/sentry-javascript#18336))
- feat(node): Add LangChain v1 support ([#&#8203;18306](getsentry/sentry-javascript#18306))
- feat(remix): Add parameterized transaction naming for routes ([#&#8203;17951](getsentry/sentry-javascript#17951))
- fix(cloudflare): Keep http root span alive until streaming responses are consumed ([#&#8203;18087](getsentry/sentry-javascript#18087))
- fix(cloudflare): Wait for async events to finish ([#&#8203;18334](getsentry/sentry-javascript#18334))
- fix(core): `continueTrace` doesn't propagate given trace ID if active span exists ([#&#8203;18328](getsentry/sentry-javascript#18328))
- fix(node-core): Handle custom scope in log messages without parameters ([#&#8203;18322](getsentry/sentry-javascript#18322))
- fix(opentelemetry): Ensure Sentry spans don't leak when tracing is disabled ([#&#8203;18337](getsentry/sentry-javascript#18337))
- fix(react-router): Use underscores in trace origin values ([#&#8203;18351](getsentry/sentry-javascript#18351))
- chore(tanstackstart-react): Export custom inits from tanstackstart-react ([#&#8203;18369](getsentry/sentry-javascript#18369))
- chore(tanstackstart-react)!: Remove empty placeholder implementations ([#&#8203;18338](getsentry/sentry-javascript#18338))
<details>
<summary><strong>Internal Changes</strong></summary>
- chore: Allow URLs as issue ([#&#8203;18372](getsentry/sentry-javascript#18372))
- chore(changelog): Add entry for [#&#8203;18304](getsentry/sentry-javascript#18304) ([#&#8203;18329](getsentry/sentry-javascript#18329))
- chore(ci): Add action to track all PRs as issues ([#&#8203;18363](getsentry/sentry-javascript#18363))
- chore(github): Adjust `BUGBOT.md` rules to flag invalid op and origin values during review ([#&#8203;18352](getsentry/sentry-javascript#18352))
- ci: Add action to create issue on gitflow merge conflicts ([#&#8203;18319](getsentry/sentry-javascript#18319))
- ci(deps): bump actions/checkout from 5 to 6 ([#&#8203;18268](getsentry/sentry-javascript#18268))
- ci(deps): bump peter-evans/create-pull-request from 7.0.8 to 7.0.9 ([#&#8203;18361](getsentry/sentry-javascript#18361))
- test(cloudflare): Add typechecks for cloudflare-worker e2e test ([#&#8203;18321](getsentry/sentry-javascript#18321))
</details>
#### Bundle size 📦
| Path | Size |
| ----------------------------------------------------------------------------------------------------- | --------- |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) | 24.22 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) - with treeshaking flags | 22.76 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing) | 40.57 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Profiling) | 45.05 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay) | 78.08 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay) - with treeshaking flags | 68.05 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay with Canvas) | 82.65 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay, Feedback) | 94.61 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Feedback) | 40.51 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. sendFeedback) | 28.8 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. FeedbackAsync) | 33.66 KB |
| [@&#8203;sentry/react](https://github.com/sentry/react) | 25.9 KB |
| [@&#8203;sentry/react](https://github.com/sentry/react) (incl. Tracing) | 42.72 KB |
| [@&#8203;sentry/vue](https://github.com/sentry/vue) | 28.56 KB |
| [@&#8203;sentry/vue](https://github.com/sentry/vue) (incl. Tracing) | 42.32 KB |
| [@&#8203;sentry/svelte](https://github.com/sentry/svelte) | 24.24 KB |
| CDN Bundle | 26.57 KB |
| CDN Bundle (incl. Tracing) | 41.22 KB |
| CDN Bundle (incl. Tracing, Replay) | 76.9 KB |
| CDN Bundle (incl. Tracing, Replay, Feedback) | 82.23 KB |
| CDN Bundle - uncompressed | 78.09 KB |
| CDN Bundle (incl. Tracing) - uncompressed | 122.4 KB |
| CDN Bundle (incl. Tracing, Replay) - uncompressed | 235.71 KB |
| CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed | 248.17 KB |
| [@&#8203;sentry/nextjs](https://github.com/sentry/nextjs) (client) | 44.88 KB |
| [@&#8203;sentry/sveltekit](https://github.com/sentry/sveltekit) (client) | 40.92 KB |
| [@&#8203;sentry/node-core](https://github.com/sentry/node-core) | 50.06 KB |
| [@&#8203;sentry/node](https://github.com/sentry/node) | 155.7 KB |
| [@&#8203;sentry/node](https://github.com/sentry/node) - without tracing | 90.67 KB |
| [@&#8203;sentry/aws-serverless](https://github.com/sentry/aws-serverless) | 105.61 KB |
</details>
---
### Configuration
📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.
♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 **Ignore**: Close this PR and you won't be reminded about this update again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box
---
This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi4yNy4xIiwidXBkYXRlZEluVmVyIjoiNDIuMjcuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->
Reviewed-on: https://git.foxden.network/foxCaves/foxCaves/pulls/12
Co-authored-by: Renovate <renovate@foxden.network>
Co-committed-by: Renovate <renovate@foxden.network>
Sign up for freeto 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.

Implement parametrized routes for Remix Client

2 participants

@onurtemizkan@chargome
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

feat(remix): Add parameterized transaction naming for routes - #17951

Merged
onurtemizkan merged 11 commits into
developfrom
onur/remix-parameterized-routes
Nov 26, 2025
Merged

feat(remix): Add parameterized transaction naming for routes#17951
onurtemizkan merged 11 commits into
developfrom
onur/remix-parameterized-routes

Conversation

@onurtemizkan

@onurtemizkanonurtemizkan commented Oct 16, 2025

Copy link
Copy Markdown
Contributor

This PR adds parameterized routes for Remix SDK, similarly to the NextJS SDK

Resolves: #16690
Needs docs PR for the Vite plugin

Adds automatic parameterization of Remix route IDs for transaction naming. Converts internal Remix route file patterns to parameterized paths similar to the other SDKs (routes/user.$id -> /user/:id).

  • Created sentryRemixVitePlugin that extracts route information from Remix builds and generates a manifest file containing route ID to parameterized route mappings.
  • Added remixRouteParameterization.ts with regex-based route conversion that handles dynamic segments ($param:param), splat routes ($:*), and nested routes.
  • Updated both client and server instrumentation in performance.tsx and instrumentServer.ts to use parameterized transaction names.
  • It also works with Hydrogen

Vite plugin is used like:

// vite.config.tsimport{defineConfig}from'vite';import{vitePluginasremix}from'@remix-run/dev';import{sentryRemixVitePlugin}from'@sentry/remix';exportdefaultdefineConfig({plugins: [remix(),sentryRemixVitePlugin({appDirPath: './app',// Default is 'app' in project root}),],});

Updated all Remix E2E test applications to expect parameterized route names. Added new E2E test application create-remix-app-v2-non-vite for testing backward compatibility for non-Vite builds - these continue to use routes/user.$id format.

Summary

Route FileExample URLBeforeAfter (Server - All Apps)After (Client - Vite Plugin)
_index.tsx/routes/_index//
user.$id.tsx/user/123routes/user.$id/user/:id/user/:id
users.$userId.posts.$postId.tsx/users/123/posts/456routes/users.$userId.posts.$postId/users/:userId/posts/:postId/users/:userId/posts/:postId
$.tsx (splat)/docs/guide/introroutes/$/:*/:*
docs.$.tsx (scoped splat)/docs/guide/introroutes/docs.$/docs/:*/docs/:*

Notes

  • Server-side: Parameterization works automatically for all Remix apps (Vite, non-Vite, Hydrogen, Express).
  • Client-side: Requires the Vite plugin. Without it, client transactions continue using route IDs (e.g., routes/user.$id).

@onurtemizkan
onurtemizkanforce-pushed the onur/remix-parameterized-routes branch from 0460a75 to 8886ddcCompareOctober 16, 2025 12:17
@onurtemizkan
onurtemizkan marked this pull request as ready for review October 16, 2025 14:06
cursor[bot]

This comment was marked as outdated.

@github-actions

github-actionsBot commented Oct 16, 2025

Copy link
Copy Markdown
Contributor

node-overhead report 🧳

Note: This is a synthetic benchmark with a minimal express app and does not necessarily reflect the real-world performance impact in an application.

ScenarioRequests/s% of BaselinePrev. Requests/sChange %
GET Baseline11,282-9,086+24%
GET With Sentry1,91417%1,761+9%
GET With Sentry (error only)7,67168%6,153+25%
POST Baseline1,153-1,210-5%
POST With Sentry57550%597-4%
POST With Sentry (error only)1,03189%1,075-4%
MYSQL Baseline3,924-3,326+18%
MYSQL With Sentry47712%493-3%
MYSQL With Sentry (error only)3,29584%2,708+22%

View base workflow run

if: needs.job_build.outputs.changed_remix == 'true' || github.event_name != 'pull_request'
runs-on: ubuntu-24.04
timeout-minutes: 10
timeout-minutes: 15

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did this increase so much?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After adding the new tests, some of them started randomly timing out slightly above the 10-minute threshold on CI. It can be 11-12. I just increased this much to be ready for when we add more tests.


// No manifest available (legacy app without Vite plugin)
// Fall back to route ID for backward compatibility
return { name: routeId, source: 'route' };

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be url here then? In the legacy case this will not be parameterized right?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this is still not an unparameterized url really, in the previous implementation we were using route for the routeId (e.g. routes/users.$userId.posts.$postId) as well, so while it's not a parameterized route by its format, it still contains the parameterized route info.

Comment threadpackages/remix/src/server/instrumentServer.ts
@chargome

Copy link
Copy Markdown
Member

@onurtemizkan please merge in once linting issues are solved ✅

Comment threadpackages/remix/src/client/performance.tsx
Comment threadpackages/remix/src/config/vite.ts
Comment threadpackages/remix/src/client/remixRouteParameterization.ts
Comment threadpackages/remix/src/config/vite.ts
@onurtemizkan
onurtemizkanforce-pushed the onur/remix-parameterized-routes branch from 8e8d7c6 to eb00778CompareNovember 26, 2025 13:30
Comment threadpackages/remix/src/config/vite.ts
@onurtemizkan
onurtemizkan merged commit a3875c5 into developNov 26, 2025
78 checks passed
@onurtemizkan
onurtemizkan deleted the onur/remix-parameterized-routes branch November 26, 2025 13:42
Doridian pushed a commit to foxCaves/foxCaves that referenced this pull request Dec 3, 2025
This PR contains the following updates:
| Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) |
|---|---|---|---|
| [@sentry/react](https://github.com/getsentry/sentry-javascript/tree/master/packages/react) ([source](https://github.com/getsentry/sentry-javascript)) | [`10.27.0` -> `10.28.0`](https://renovatebot.com/diffs/npm/@sentry%2freact/10.27.0/10.28.0) | ![age](https://developer.mend.io/api/mc/badges/age/npm/@sentry%2freact/10.28.0?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@sentry%2freact/10.27.0/10.28.0?slim=true) |
---
### Release Notes
<details>
<summary>getsentry/sentry-javascript (@&#8203;sentry/react)</summary>
### [`v10.28.0`](https://github.com/getsentry/sentry-javascript/releases/tag/10.28.0)
[Compare Source](getsentry/sentry-javascript@10.27.0...10.28.0)
##### Important Changes
- **feat(core): Make `matcher` parameter optional in `makeMultiplexedTransport` ([#&#8203;10798](getsentry/sentry-javascript#10798
The `matcher` parameter in `makeMultiplexedTransport` is now optional with a sensible default. This makes it much easier to use the multiplexed transport for sending events to multiple DSNs based on runtime configuration.
**Before:**
```javascript
import { makeFetchTransport, makeMultiplexedTransport } from '@&#8203;sentry/browser';
const EXTRA_KEY = 'ROUTE_TO';
const transport = makeMultiplexedTransport(makeFetchTransport, args => {
const event = args.getEvent();
if (event?.extra?.[EXTRA_KEY] && Array.isArray(event.extra[EXTRA_KEY])) {
return event.extra[EXTRA_KEY];
}
return [];
});
Sentry.init({
transport,
// ... other options
});
// Capture events with routing info
Sentry.captureException(error, {
extra: {
[EXTRA_KEY]: [
{ dsn: 'https://key1@&#8203;sentry.io/project1', release: 'v1.0.0' },
{ dsn: 'https://key2@&#8203;sentry.io/project2' },
],
},
});
```
**After:**
```javascript
import { makeFetchTransport, makeMultiplexedTransport, MULTIPLEXED_TRANSPORT_EXTRA_KEY } from '@&#8203;sentry/browser';
// Just pass the transport generator - the default matcher handles the rest!
Sentry.init({
transport: makeMultiplexedTransport(makeFetchTransport),
// ... other options
});
// Capture events with routing info using the exported constant
Sentry.captureException(error, {
extra: {
[MULTIPLEXED_TRANSPORT_EXTRA_KEY]: [
{ dsn: 'https://key1@&#8203;sentry.io/project1', release: 'v1.0.0' },
{ dsn: 'https://key2@&#8203;sentry.io/project2' },
],
},
});
```
The default matcher looks for routing information in `event.extra[MULTIPLEXED_TRANSPORT_EXTRA_KEY]`. You can still provide a custom matcher function for advanced use cases.
- **feat(nextjs): Support cacheComponents on turbopack ([#&#8203;18304](getsentry/sentry-javascript#18304
This release adds support for `cacheComponents` on turbopack builds. We are working on adding support for this feature in webpack builds as well.
##### Other Changes
- feat: Publish AWS Lambda Layer for Node 24 ([#&#8203;18327](getsentry/sentry-javascript#18327))
- feat(browser): Expose langchain instrumentation ([#&#8203;18342](getsentry/sentry-javascript#18342))
- feat(browser): Expose langgraph instrumentation ([#&#8203;18345](getsentry/sentry-javascript#18345))
- feat(cloudflare): Allow specifying a custom fetch in Cloudflare transport options ([#&#8203;18335](getsentry/sentry-javascript#18335))
- feat(core): Add `isolateTrace` option to `Sentry.withMonitor()` ([#&#8203;18079](getsentry/sentry-javascript#18079))
- feat(deps): bump [@&#8203;sentry/webpack-plugin](https://github.com/sentry/webpack-plugin) from 4.3.0 to 4.6.1 ([#&#8203;18272](getsentry/sentry-javascript#18272))
- feat(nextjs): Add cloudflare `waitUntil` detection ([#&#8203;18336](getsentry/sentry-javascript#18336))
- feat(node): Add LangChain v1 support ([#&#8203;18306](getsentry/sentry-javascript#18306))
- feat(remix): Add parameterized transaction naming for routes ([#&#8203;17951](getsentry/sentry-javascript#17951))
- fix(cloudflare): Keep http root span alive until streaming responses are consumed ([#&#8203;18087](getsentry/sentry-javascript#18087))
- fix(cloudflare): Wait for async events to finish ([#&#8203;18334](getsentry/sentry-javascript#18334))
- fix(core): `continueTrace` doesn't propagate given trace ID if active span exists ([#&#8203;18328](getsentry/sentry-javascript#18328))
- fix(node-core): Handle custom scope in log messages without parameters ([#&#8203;18322](getsentry/sentry-javascript#18322))
- fix(opentelemetry): Ensure Sentry spans don't leak when tracing is disabled ([#&#8203;18337](getsentry/sentry-javascript#18337))
- fix(react-router): Use underscores in trace origin values ([#&#8203;18351](getsentry/sentry-javascript#18351))
- chore(tanstackstart-react): Export custom inits from tanstackstart-react ([#&#8203;18369](getsentry/sentry-javascript#18369))
- chore(tanstackstart-react)!: Remove empty placeholder implementations ([#&#8203;18338](getsentry/sentry-javascript#18338))
<details>
<summary><strong>Internal Changes</strong></summary>
- chore: Allow URLs as issue ([#&#8203;18372](getsentry/sentry-javascript#18372))
- chore(changelog): Add entry for [#&#8203;18304](getsentry/sentry-javascript#18304) ([#&#8203;18329](getsentry/sentry-javascript#18329))
- chore(ci): Add action to track all PRs as issues ([#&#8203;18363](getsentry/sentry-javascript#18363))
- chore(github): Adjust `BUGBOT.md` rules to flag invalid op and origin values during review ([#&#8203;18352](getsentry/sentry-javascript#18352))
- ci: Add action to create issue on gitflow merge conflicts ([#&#8203;18319](getsentry/sentry-javascript#18319))
- ci(deps): bump actions/checkout from 5 to 6 ([#&#8203;18268](getsentry/sentry-javascript#18268))
- ci(deps): bump peter-evans/create-pull-request from 7.0.8 to 7.0.9 ([#&#8203;18361](getsentry/sentry-javascript#18361))
- test(cloudflare): Add typechecks for cloudflare-worker e2e test ([#&#8203;18321](getsentry/sentry-javascript#18321))
</details>
#### Bundle size 📦
| Path | Size |
| ----------------------------------------------------------------------------------------------------- | --------- |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) | 24.22 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) - with treeshaking flags | 22.76 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing) | 40.57 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Profiling) | 45.05 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay) | 78.08 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay) - with treeshaking flags | 68.05 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay with Canvas) | 82.65 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay, Feedback) | 94.61 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Feedback) | 40.51 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. sendFeedback) | 28.8 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. FeedbackAsync) | 33.66 KB |
| [@&#8203;sentry/react](https://github.com/sentry/react) | 25.9 KB |
| [@&#8203;sentry/react](https://github.com/sentry/react) (incl. Tracing) | 42.72 KB |
| [@&#8203;sentry/vue](https://github.com/sentry/vue) | 28.56 KB |
| [@&#8203;sentry/vue](https://github.com/sentry/vue) (incl. Tracing) | 42.32 KB |
| [@&#8203;sentry/svelte](https://github.com/sentry/svelte) | 24.24 KB |
| CDN Bundle | 26.57 KB |
| CDN Bundle (incl. Tracing) | 41.22 KB |
| CDN Bundle (incl. Tracing, Replay) | 76.9 KB |
| CDN Bundle (incl. Tracing, Replay, Feedback) | 82.23 KB |
| CDN Bundle - uncompressed | 78.09 KB |
| CDN Bundle (incl. Tracing) - uncompressed | 122.4 KB |
| CDN Bundle (incl. Tracing, Replay) - uncompressed | 235.71 KB |
| CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed | 248.17 KB |
| [@&#8203;sentry/nextjs](https://github.com/sentry/nextjs) (client) | 44.88 KB |
| [@&#8203;sentry/sveltekit](https://github.com/sentry/sveltekit) (client) | 40.92 KB |
| [@&#8203;sentry/node-core](https://github.com/sentry/node-core) | 50.06 KB |
| [@&#8203;sentry/node](https://github.com/sentry/node) | 155.7 KB |
| [@&#8203;sentry/node](https://github.com/sentry/node) - without tracing | 90.67 KB |
| [@&#8203;sentry/aws-serverless](https://github.com/sentry/aws-serverless) | 105.61 KB |
</details>
---
### Configuration
📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.
♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 **Ignore**: Close this PR and you won't be reminded about this update again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box
---
This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi4yNy4xIiwidXBkYXRlZEluVmVyIjoiNDIuMjcuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->
Reviewed-on: https://git.foxden.network/foxCaves/foxCaves/pulls/12
Co-authored-by: Renovate <renovate@foxden.network>
Co-committed-by: Renovate <renovate@foxden.network>
Sign up for freeto 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.

Implement parametrized routes for Remix Client

2 participants

@onurtemizkan@chargome
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(remix): Add parameterized transaction naming for routes - #17951

Merged
onurtemizkan merged 11 commits into
developfrom
onur/remix-parameterized-routes
Nov 26, 2025
Merged

feat(remix): Add parameterized transaction naming for routes#17951
onurtemizkan merged 11 commits into
developfrom
onur/remix-parameterized-routes

Conversation

@onurtemizkan

@onurtemizkanonurtemizkan commented Oct 16, 2025

Copy link
Copy Markdown
Contributor

This PR adds parameterized routes for Remix SDK, similarly to the NextJS SDK

Resolves: #16690
Needs docs PR for the Vite plugin

Adds automatic parameterization of Remix route IDs for transaction naming. Converts internal Remix route file patterns to parameterized paths similar to the other SDKs (routes/user.$id -> /user/:id).

  • Created sentryRemixVitePlugin that extracts route information from Remix builds and generates a manifest file containing route ID to parameterized route mappings.
  • Added remixRouteParameterization.ts with regex-based route conversion that handles dynamic segments ($param:param), splat routes ($:*), and nested routes.
  • Updated both client and server instrumentation in performance.tsx and instrumentServer.ts to use parameterized transaction names.
  • It also works with Hydrogen

Vite plugin is used like:

// vite.config.tsimport{defineConfig}from'vite';import{vitePluginasremix}from'@remix-run/dev';import{sentryRemixVitePlugin}from'@sentry/remix';exportdefaultdefineConfig({plugins: [remix(),sentryRemixVitePlugin({appDirPath: './app',// Default is 'app' in project root}),],});

Updated all Remix E2E test applications to expect parameterized route names. Added new E2E test application create-remix-app-v2-non-vite for testing backward compatibility for non-Vite builds - these continue to use routes/user.$id format.

Summary

Route FileExample URLBeforeAfter (Server - All Apps)After (Client - Vite Plugin)
_index.tsx/routes/_index//
user.$id.tsx/user/123routes/user.$id/user/:id/user/:id
users.$userId.posts.$postId.tsx/users/123/posts/456routes/users.$userId.posts.$postId/users/:userId/posts/:postId/users/:userId/posts/:postId
$.tsx (splat)/docs/guide/introroutes/$/:*/:*
docs.$.tsx (scoped splat)/docs/guide/introroutes/docs.$/docs/:*/docs/:*

Notes

  • Server-side: Parameterization works automatically for all Remix apps (Vite, non-Vite, Hydrogen, Express).
  • Client-side: Requires the Vite plugin. Without it, client transactions continue using route IDs (e.g., routes/user.$id).

@onurtemizkan
onurtemizkanforce-pushed the onur/remix-parameterized-routes branch from 0460a75 to 8886ddcCompareOctober 16, 2025 12:17
@onurtemizkan
onurtemizkan marked this pull request as ready for review October 16, 2025 14:06
cursor[bot]

This comment was marked as outdated.

@github-actions

github-actionsBot commented Oct 16, 2025

Copy link
Copy Markdown
Contributor

node-overhead report 🧳

Note: This is a synthetic benchmark with a minimal express app and does not necessarily reflect the real-world performance impact in an application.

ScenarioRequests/s% of BaselinePrev. Requests/sChange %
GET Baseline11,282-9,086+24%
GET With Sentry1,91417%1,761+9%
GET With Sentry (error only)7,67168%6,153+25%
POST Baseline1,153-1,210-5%
POST With Sentry57550%597-4%
POST With Sentry (error only)1,03189%1,075-4%
MYSQL Baseline3,924-3,326+18%
MYSQL With Sentry47712%493-3%
MYSQL With Sentry (error only)3,29584%2,708+22%

View base workflow run

if: needs.job_build.outputs.changed_remix == 'true' || github.event_name != 'pull_request'
runs-on: ubuntu-24.04
timeout-minutes: 10
timeout-minutes: 15

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did this increase so much?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After adding the new tests, some of them started randomly timing out slightly above the 10-minute threshold on CI. It can be 11-12. I just increased this much to be ready for when we add more tests.


// No manifest available (legacy app without Vite plugin)
// Fall back to route ID for backward compatibility
return { name: routeId, source: 'route' };

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be url here then? In the legacy case this will not be parameterized right?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this is still not an unparameterized url really, in the previous implementation we were using route for the routeId (e.g. routes/users.$userId.posts.$postId) as well, so while it's not a parameterized route by its format, it still contains the parameterized route info.

Comment threadpackages/remix/src/server/instrumentServer.ts
@chargome

Copy link
Copy Markdown
Member

@onurtemizkan please merge in once linting issues are solved ✅

Comment threadpackages/remix/src/client/performance.tsx
Comment threadpackages/remix/src/config/vite.ts
Comment threadpackages/remix/src/client/remixRouteParameterization.ts
Comment threadpackages/remix/src/config/vite.ts
@onurtemizkan
onurtemizkanforce-pushed the onur/remix-parameterized-routes branch from 8e8d7c6 to eb00778CompareNovember 26, 2025 13:30
Comment threadpackages/remix/src/config/vite.ts
@onurtemizkan
onurtemizkan merged commit a3875c5 into developNov 26, 2025
78 checks passed
@onurtemizkan
onurtemizkan deleted the onur/remix-parameterized-routes branch November 26, 2025 13:42
Doridian pushed a commit to foxCaves/foxCaves that referenced this pull request Dec 3, 2025
This PR contains the following updates:
| Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) |
|---|---|---|---|
| [@sentry/react](https://github.com/getsentry/sentry-javascript/tree/master/packages/react) ([source](https://github.com/getsentry/sentry-javascript)) | [`10.27.0` -> `10.28.0`](https://renovatebot.com/diffs/npm/@sentry%2freact/10.27.0/10.28.0) | ![age](https://developer.mend.io/api/mc/badges/age/npm/@sentry%2freact/10.28.0?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@sentry%2freact/10.27.0/10.28.0?slim=true) |
---
### Release Notes
<details>
<summary>getsentry/sentry-javascript (@&#8203;sentry/react)</summary>
### [`v10.28.0`](https://github.com/getsentry/sentry-javascript/releases/tag/10.28.0)
[Compare Source](getsentry/sentry-javascript@10.27.0...10.28.0)
##### Important Changes
- **feat(core): Make `matcher` parameter optional in `makeMultiplexedTransport` ([#&#8203;10798](getsentry/sentry-javascript#10798
The `matcher` parameter in `makeMultiplexedTransport` is now optional with a sensible default. This makes it much easier to use the multiplexed transport for sending events to multiple DSNs based on runtime configuration.
**Before:**
```javascript
import { makeFetchTransport, makeMultiplexedTransport } from '@&#8203;sentry/browser';
const EXTRA_KEY = 'ROUTE_TO';
const transport = makeMultiplexedTransport(makeFetchTransport, args => {
const event = args.getEvent();
if (event?.extra?.[EXTRA_KEY] && Array.isArray(event.extra[EXTRA_KEY])) {
return event.extra[EXTRA_KEY];
}
return [];
});
Sentry.init({
transport,
// ... other options
});
// Capture events with routing info
Sentry.captureException(error, {
extra: {
[EXTRA_KEY]: [
{ dsn: 'https://key1@&#8203;sentry.io/project1', release: 'v1.0.0' },
{ dsn: 'https://key2@&#8203;sentry.io/project2' },
],
},
});
```
**After:**
```javascript
import { makeFetchTransport, makeMultiplexedTransport, MULTIPLEXED_TRANSPORT_EXTRA_KEY } from '@&#8203;sentry/browser';
// Just pass the transport generator - the default matcher handles the rest!
Sentry.init({
transport: makeMultiplexedTransport(makeFetchTransport),
// ... other options
});
// Capture events with routing info using the exported constant
Sentry.captureException(error, {
extra: {
[MULTIPLEXED_TRANSPORT_EXTRA_KEY]: [
{ dsn: 'https://key1@&#8203;sentry.io/project1', release: 'v1.0.0' },
{ dsn: 'https://key2@&#8203;sentry.io/project2' },
],
},
});
```
The default matcher looks for routing information in `event.extra[MULTIPLEXED_TRANSPORT_EXTRA_KEY]`. You can still provide a custom matcher function for advanced use cases.
- **feat(nextjs): Support cacheComponents on turbopack ([#&#8203;18304](getsentry/sentry-javascript#18304
This release adds support for `cacheComponents` on turbopack builds. We are working on adding support for this feature in webpack builds as well.
##### Other Changes
- feat: Publish AWS Lambda Layer for Node 24 ([#&#8203;18327](getsentry/sentry-javascript#18327))
- feat(browser): Expose langchain instrumentation ([#&#8203;18342](getsentry/sentry-javascript#18342))
- feat(browser): Expose langgraph instrumentation ([#&#8203;18345](getsentry/sentry-javascript#18345))
- feat(cloudflare): Allow specifying a custom fetch in Cloudflare transport options ([#&#8203;18335](getsentry/sentry-javascript#18335))
- feat(core): Add `isolateTrace` option to `Sentry.withMonitor()` ([#&#8203;18079](getsentry/sentry-javascript#18079))
- feat(deps): bump [@&#8203;sentry/webpack-plugin](https://github.com/sentry/webpack-plugin) from 4.3.0 to 4.6.1 ([#&#8203;18272](getsentry/sentry-javascript#18272))
- feat(nextjs): Add cloudflare `waitUntil` detection ([#&#8203;18336](getsentry/sentry-javascript#18336))
- feat(node): Add LangChain v1 support ([#&#8203;18306](getsentry/sentry-javascript#18306))
- feat(remix): Add parameterized transaction naming for routes ([#&#8203;17951](getsentry/sentry-javascript#17951))
- fix(cloudflare): Keep http root span alive until streaming responses are consumed ([#&#8203;18087](getsentry/sentry-javascript#18087))
- fix(cloudflare): Wait for async events to finish ([#&#8203;18334](getsentry/sentry-javascript#18334))
- fix(core): `continueTrace` doesn't propagate given trace ID if active span exists ([#&#8203;18328](getsentry/sentry-javascript#18328))
- fix(node-core): Handle custom scope in log messages without parameters ([#&#8203;18322](getsentry/sentry-javascript#18322))
- fix(opentelemetry): Ensure Sentry spans don't leak when tracing is disabled ([#&#8203;18337](getsentry/sentry-javascript#18337))
- fix(react-router): Use underscores in trace origin values ([#&#8203;18351](getsentry/sentry-javascript#18351))
- chore(tanstackstart-react): Export custom inits from tanstackstart-react ([#&#8203;18369](getsentry/sentry-javascript#18369))
- chore(tanstackstart-react)!: Remove empty placeholder implementations ([#&#8203;18338](getsentry/sentry-javascript#18338))
<details>
<summary><strong>Internal Changes</strong></summary>
- chore: Allow URLs as issue ([#&#8203;18372](getsentry/sentry-javascript#18372))
- chore(changelog): Add entry for [#&#8203;18304](getsentry/sentry-javascript#18304) ([#&#8203;18329](getsentry/sentry-javascript#18329))
- chore(ci): Add action to track all PRs as issues ([#&#8203;18363](getsentry/sentry-javascript#18363))
- chore(github): Adjust `BUGBOT.md` rules to flag invalid op and origin values during review ([#&#8203;18352](getsentry/sentry-javascript#18352))
- ci: Add action to create issue on gitflow merge conflicts ([#&#8203;18319](getsentry/sentry-javascript#18319))
- ci(deps): bump actions/checkout from 5 to 6 ([#&#8203;18268](getsentry/sentry-javascript#18268))
- ci(deps): bump peter-evans/create-pull-request from 7.0.8 to 7.0.9 ([#&#8203;18361](getsentry/sentry-javascript#18361))
- test(cloudflare): Add typechecks for cloudflare-worker e2e test ([#&#8203;18321](getsentry/sentry-javascript#18321))
</details>
#### Bundle size 📦
| Path | Size |
| ----------------------------------------------------------------------------------------------------- | --------- |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) | 24.22 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) - with treeshaking flags | 22.76 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing) | 40.57 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Profiling) | 45.05 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay) | 78.08 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay) - with treeshaking flags | 68.05 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay with Canvas) | 82.65 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay, Feedback) | 94.61 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Feedback) | 40.51 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. sendFeedback) | 28.8 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. FeedbackAsync) | 33.66 KB |
| [@&#8203;sentry/react](https://github.com/sentry/react) | 25.9 KB |
| [@&#8203;sentry/react](https://github.com/sentry/react) (incl. Tracing) | 42.72 KB |
| [@&#8203;sentry/vue](https://github.com/sentry/vue) | 28.56 KB |
| [@&#8203;sentry/vue](https://github.com/sentry/vue) (incl. Tracing) | 42.32 KB |
| [@&#8203;sentry/svelte](https://github.com/sentry/svelte) | 24.24 KB |
| CDN Bundle | 26.57 KB |
| CDN Bundle (incl. Tracing) | 41.22 KB |
| CDN Bundle (incl. Tracing, Replay) | 76.9 KB |
| CDN Bundle (incl. Tracing, Replay, Feedback) | 82.23 KB |
| CDN Bundle - uncompressed | 78.09 KB |
| CDN Bundle (incl. Tracing) - uncompressed | 122.4 KB |
| CDN Bundle (incl. Tracing, Replay) - uncompressed | 235.71 KB |
| CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed | 248.17 KB |
| [@&#8203;sentry/nextjs](https://github.com/sentry/nextjs) (client) | 44.88 KB |
| [@&#8203;sentry/sveltekit](https://github.com/sentry/sveltekit) (client) | 40.92 KB |
| [@&#8203;sentry/node-core](https://github.com/sentry/node-core) | 50.06 KB |
| [@&#8203;sentry/node](https://github.com/sentry/node) | 155.7 KB |
| [@&#8203;sentry/node](https://github.com/sentry/node) - without tracing | 90.67 KB |
| [@&#8203;sentry/aws-serverless](https://github.com/sentry/aws-serverless) | 105.61 KB |
</details>
---
### Configuration
📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.
♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 **Ignore**: Close this PR and you won't be reminded about this update again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box
---
This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi4yNy4xIiwidXBkYXRlZEluVmVyIjoiNDIuMjcuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->
Reviewed-on: https://git.foxden.network/foxCaves/foxCaves/pulls/12
Co-authored-by: Renovate <renovate@foxden.network>
Co-committed-by: Renovate <renovate@foxden.network>
Sign up for freeto 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.

Implement parametrized routes for Remix Client

2 participants

@onurtemizkan@chargome
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(remix): Add parameterized transaction naming for routes - #17951

Merged
onurtemizkan merged 11 commits into
developfrom
onur/remix-parameterized-routes
Nov 26, 2025
Merged

feat(remix): Add parameterized transaction naming for routes#17951
onurtemizkan merged 11 commits into
developfrom
onur/remix-parameterized-routes

Conversation

@onurtemizkan

@onurtemizkanonurtemizkan commented Oct 16, 2025

Copy link
Copy Markdown
Contributor

This PR adds parameterized routes for Remix SDK, similarly to the NextJS SDK

Resolves: #16690
Needs docs PR for the Vite plugin

Adds automatic parameterization of Remix route IDs for transaction naming. Converts internal Remix route file patterns to parameterized paths similar to the other SDKs (routes/user.$id -> /user/:id).

  • Created sentryRemixVitePlugin that extracts route information from Remix builds and generates a manifest file containing route ID to parameterized route mappings.
  • Added remixRouteParameterization.ts with regex-based route conversion that handles dynamic segments ($param:param), splat routes ($:*), and nested routes.
  • Updated both client and server instrumentation in performance.tsx and instrumentServer.ts to use parameterized transaction names.
  • It also works with Hydrogen

Vite plugin is used like:

// vite.config.tsimport{defineConfig}from'vite';import{vitePluginasremix}from'@remix-run/dev';import{sentryRemixVitePlugin}from'@sentry/remix';exportdefaultdefineConfig({plugins: [remix(),sentryRemixVitePlugin({appDirPath: './app',// Default is 'app' in project root}),],});

Updated all Remix E2E test applications to expect parameterized route names. Added new E2E test application create-remix-app-v2-non-vite for testing backward compatibility for non-Vite builds - these continue to use routes/user.$id format.

Summary

Route FileExample URLBeforeAfter (Server - All Apps)After (Client - Vite Plugin)
_index.tsx/routes/_index//
user.$id.tsx/user/123routes/user.$id/user/:id/user/:id
users.$userId.posts.$postId.tsx/users/123/posts/456routes/users.$userId.posts.$postId/users/:userId/posts/:postId/users/:userId/posts/:postId
$.tsx (splat)/docs/guide/introroutes/$/:*/:*
docs.$.tsx (scoped splat)/docs/guide/introroutes/docs.$/docs/:*/docs/:*

Notes

  • Server-side: Parameterization works automatically for all Remix apps (Vite, non-Vite, Hydrogen, Express).
  • Client-side: Requires the Vite plugin. Without it, client transactions continue using route IDs (e.g., routes/user.$id).

@onurtemizkan
onurtemizkanforce-pushed the onur/remix-parameterized-routes branch from 0460a75 to 8886ddcCompareOctober 16, 2025 12:17
@onurtemizkan
onurtemizkan marked this pull request as ready for review October 16, 2025 14:06
cursor[bot]

This comment was marked as outdated.

@github-actions

github-actionsBot commented Oct 16, 2025

Copy link
Copy Markdown
Contributor

node-overhead report 🧳

Note: This is a synthetic benchmark with a minimal express app and does not necessarily reflect the real-world performance impact in an application.

ScenarioRequests/s% of BaselinePrev. Requests/sChange %
GET Baseline11,282-9,086+24%
GET With Sentry1,91417%1,761+9%
GET With Sentry (error only)7,67168%6,153+25%
POST Baseline1,153-1,210-5%
POST With Sentry57550%597-4%
POST With Sentry (error only)1,03189%1,075-4%
MYSQL Baseline3,924-3,326+18%
MYSQL With Sentry47712%493-3%
MYSQL With Sentry (error only)3,29584%2,708+22%

View base workflow run

if: needs.job_build.outputs.changed_remix == 'true' || github.event_name != 'pull_request'
runs-on: ubuntu-24.04
timeout-minutes: 10
timeout-minutes: 15

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did this increase so much?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After adding the new tests, some of them started randomly timing out slightly above the 10-minute threshold on CI. It can be 11-12. I just increased this much to be ready for when we add more tests.


// No manifest available (legacy app without Vite plugin)
// Fall back to route ID for backward compatibility
return { name: routeId, source: 'route' };

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be url here then? In the legacy case this will not be parameterized right?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this is still not an unparameterized url really, in the previous implementation we were using route for the routeId (e.g. routes/users.$userId.posts.$postId) as well, so while it's not a parameterized route by its format, it still contains the parameterized route info.

Comment threadpackages/remix/src/server/instrumentServer.ts
@chargome

Copy link
Copy Markdown
Member

@onurtemizkan please merge in once linting issues are solved ✅

Comment threadpackages/remix/src/client/performance.tsx
Comment threadpackages/remix/src/config/vite.ts
Comment threadpackages/remix/src/client/remixRouteParameterization.ts
Comment threadpackages/remix/src/config/vite.ts
@onurtemizkan
onurtemizkanforce-pushed the onur/remix-parameterized-routes branch from 8e8d7c6 to eb00778CompareNovember 26, 2025 13:30
Comment threadpackages/remix/src/config/vite.ts
@onurtemizkan
onurtemizkan merged commit a3875c5 into developNov 26, 2025
78 checks passed
@onurtemizkan
onurtemizkan deleted the onur/remix-parameterized-routes branch November 26, 2025 13:42
Doridian pushed a commit to foxCaves/foxCaves that referenced this pull request Dec 3, 2025
This PR contains the following updates:
| Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) |
|---|---|---|---|
| [@sentry/react](https://github.com/getsentry/sentry-javascript/tree/master/packages/react) ([source](https://github.com/getsentry/sentry-javascript)) | [`10.27.0` -> `10.28.0`](https://renovatebot.com/diffs/npm/@sentry%2freact/10.27.0/10.28.0) | ![age](https://developer.mend.io/api/mc/badges/age/npm/@sentry%2freact/10.28.0?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@sentry%2freact/10.27.0/10.28.0?slim=true) |
---
### Release Notes
<details>
<summary>getsentry/sentry-javascript (@&#8203;sentry/react)</summary>
### [`v10.28.0`](https://github.com/getsentry/sentry-javascript/releases/tag/10.28.0)
[Compare Source](getsentry/sentry-javascript@10.27.0...10.28.0)
##### Important Changes
- **feat(core): Make `matcher` parameter optional in `makeMultiplexedTransport` ([#&#8203;10798](getsentry/sentry-javascript#10798
The `matcher` parameter in `makeMultiplexedTransport` is now optional with a sensible default. This makes it much easier to use the multiplexed transport for sending events to multiple DSNs based on runtime configuration.
**Before:**
```javascript
import { makeFetchTransport, makeMultiplexedTransport } from '@&#8203;sentry/browser';
const EXTRA_KEY = 'ROUTE_TO';
const transport = makeMultiplexedTransport(makeFetchTransport, args => {
const event = args.getEvent();
if (event?.extra?.[EXTRA_KEY] && Array.isArray(event.extra[EXTRA_KEY])) {
return event.extra[EXTRA_KEY];
}
return [];
});
Sentry.init({
transport,
// ... other options
});
// Capture events with routing info
Sentry.captureException(error, {
extra: {
[EXTRA_KEY]: [
{ dsn: 'https://key1@&#8203;sentry.io/project1', release: 'v1.0.0' },
{ dsn: 'https://key2@&#8203;sentry.io/project2' },
],
},
});
```
**After:**
```javascript
import { makeFetchTransport, makeMultiplexedTransport, MULTIPLEXED_TRANSPORT_EXTRA_KEY } from '@&#8203;sentry/browser';
// Just pass the transport generator - the default matcher handles the rest!
Sentry.init({
transport: makeMultiplexedTransport(makeFetchTransport),
// ... other options
});
// Capture events with routing info using the exported constant
Sentry.captureException(error, {
extra: {
[MULTIPLEXED_TRANSPORT_EXTRA_KEY]: [
{ dsn: 'https://key1@&#8203;sentry.io/project1', release: 'v1.0.0' },
{ dsn: 'https://key2@&#8203;sentry.io/project2' },
],
},
});
```
The default matcher looks for routing information in `event.extra[MULTIPLEXED_TRANSPORT_EXTRA_KEY]`. You can still provide a custom matcher function for advanced use cases.
- **feat(nextjs): Support cacheComponents on turbopack ([#&#8203;18304](getsentry/sentry-javascript#18304
This release adds support for `cacheComponents` on turbopack builds. We are working on adding support for this feature in webpack builds as well.
##### Other Changes
- feat: Publish AWS Lambda Layer for Node 24 ([#&#8203;18327](getsentry/sentry-javascript#18327))
- feat(browser): Expose langchain instrumentation ([#&#8203;18342](getsentry/sentry-javascript#18342))
- feat(browser): Expose langgraph instrumentation ([#&#8203;18345](getsentry/sentry-javascript#18345))
- feat(cloudflare): Allow specifying a custom fetch in Cloudflare transport options ([#&#8203;18335](getsentry/sentry-javascript#18335))
- feat(core): Add `isolateTrace` option to `Sentry.withMonitor()` ([#&#8203;18079](getsentry/sentry-javascript#18079))
- feat(deps): bump [@&#8203;sentry/webpack-plugin](https://github.com/sentry/webpack-plugin) from 4.3.0 to 4.6.1 ([#&#8203;18272](getsentry/sentry-javascript#18272))
- feat(nextjs): Add cloudflare `waitUntil` detection ([#&#8203;18336](getsentry/sentry-javascript#18336))
- feat(node): Add LangChain v1 support ([#&#8203;18306](getsentry/sentry-javascript#18306))
- feat(remix): Add parameterized transaction naming for routes ([#&#8203;17951](getsentry/sentry-javascript#17951))
- fix(cloudflare): Keep http root span alive until streaming responses are consumed ([#&#8203;18087](getsentry/sentry-javascript#18087))
- fix(cloudflare): Wait for async events to finish ([#&#8203;18334](getsentry/sentry-javascript#18334))
- fix(core): `continueTrace` doesn't propagate given trace ID if active span exists ([#&#8203;18328](getsentry/sentry-javascript#18328))
- fix(node-core): Handle custom scope in log messages without parameters ([#&#8203;18322](getsentry/sentry-javascript#18322))
- fix(opentelemetry): Ensure Sentry spans don't leak when tracing is disabled ([#&#8203;18337](getsentry/sentry-javascript#18337))
- fix(react-router): Use underscores in trace origin values ([#&#8203;18351](getsentry/sentry-javascript#18351))
- chore(tanstackstart-react): Export custom inits from tanstackstart-react ([#&#8203;18369](getsentry/sentry-javascript#18369))
- chore(tanstackstart-react)!: Remove empty placeholder implementations ([#&#8203;18338](getsentry/sentry-javascript#18338))
<details>
<summary><strong>Internal Changes</strong></summary>
- chore: Allow URLs as issue ([#&#8203;18372](getsentry/sentry-javascript#18372))
- chore(changelog): Add entry for [#&#8203;18304](getsentry/sentry-javascript#18304) ([#&#8203;18329](getsentry/sentry-javascript#18329))
- chore(ci): Add action to track all PRs as issues ([#&#8203;18363](getsentry/sentry-javascript#18363))
- chore(github): Adjust `BUGBOT.md` rules to flag invalid op and origin values during review ([#&#8203;18352](getsentry/sentry-javascript#18352))
- ci: Add action to create issue on gitflow merge conflicts ([#&#8203;18319](getsentry/sentry-javascript#18319))
- ci(deps): bump actions/checkout from 5 to 6 ([#&#8203;18268](getsentry/sentry-javascript#18268))
- ci(deps): bump peter-evans/create-pull-request from 7.0.8 to 7.0.9 ([#&#8203;18361](getsentry/sentry-javascript#18361))
- test(cloudflare): Add typechecks for cloudflare-worker e2e test ([#&#8203;18321](getsentry/sentry-javascript#18321))
</details>
#### Bundle size 📦
| Path | Size |
| ----------------------------------------------------------------------------------------------------- | --------- |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) | 24.22 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) - with treeshaking flags | 22.76 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing) | 40.57 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Profiling) | 45.05 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay) | 78.08 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay) - with treeshaking flags | 68.05 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay with Canvas) | 82.65 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay, Feedback) | 94.61 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Feedback) | 40.51 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. sendFeedback) | 28.8 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. FeedbackAsync) | 33.66 KB |
| [@&#8203;sentry/react](https://github.com/sentry/react) | 25.9 KB |
| [@&#8203;sentry/react](https://github.com/sentry/react) (incl. Tracing) | 42.72 KB |
| [@&#8203;sentry/vue](https://github.com/sentry/vue) | 28.56 KB |
| [@&#8203;sentry/vue](https://github.com/sentry/vue) (incl. Tracing) | 42.32 KB |
| [@&#8203;sentry/svelte](https://github.com/sentry/svelte) | 24.24 KB |
| CDN Bundle | 26.57 KB |
| CDN Bundle (incl. Tracing) | 41.22 KB |
| CDN Bundle (incl. Tracing, Replay) | 76.9 KB |
| CDN Bundle (incl. Tracing, Replay, Feedback) | 82.23 KB |
| CDN Bundle - uncompressed | 78.09 KB |
| CDN Bundle (incl. Tracing) - uncompressed | 122.4 KB |
| CDN Bundle (incl. Tracing, Replay) - uncompressed | 235.71 KB |
| CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed | 248.17 KB |
| [@&#8203;sentry/nextjs](https://github.com/sentry/nextjs) (client) | 44.88 KB |
| [@&#8203;sentry/sveltekit](https://github.com/sentry/sveltekit) (client) | 40.92 KB |
| [@&#8203;sentry/node-core](https://github.com/sentry/node-core) | 50.06 KB |
| [@&#8203;sentry/node](https://github.com/sentry/node) | 155.7 KB |
| [@&#8203;sentry/node](https://github.com/sentry/node) - without tracing | 90.67 KB |
| [@&#8203;sentry/aws-serverless](https://github.com/sentry/aws-serverless) | 105.61 KB |
</details>
---
### Configuration
📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.
♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 **Ignore**: Close this PR and you won't be reminded about this update again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box
---
This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi4yNy4xIiwidXBkYXRlZEluVmVyIjoiNDIuMjcuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->
Reviewed-on: https://git.foxden.network/foxCaves/foxCaves/pulls/12
Co-authored-by: Renovate <renovate@foxden.network>
Co-committed-by: Renovate <renovate@foxden.network>
Sign up for freeto 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.

Implement parametrized routes for Remix Client

2 participants

@onurtemizkan@chargome
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

feat(remix): Add parameterized transaction naming for routes - #17951

Merged
onurtemizkan merged 11 commits into
developfrom
onur/remix-parameterized-routes
Nov 26, 2025
Merged

feat(remix): Add parameterized transaction naming for routes#17951
onurtemizkan merged 11 commits into
developfrom
onur/remix-parameterized-routes

Conversation

@onurtemizkan

@onurtemizkanonurtemizkan commented Oct 16, 2025

Copy link
Copy Markdown
Contributor

This PR adds parameterized routes for Remix SDK, similarly to the NextJS SDK

Resolves: #16690
Needs docs PR for the Vite plugin

Adds automatic parameterization of Remix route IDs for transaction naming. Converts internal Remix route file patterns to parameterized paths similar to the other SDKs (routes/user.$id -> /user/:id).

  • Created sentryRemixVitePlugin that extracts route information from Remix builds and generates a manifest file containing route ID to parameterized route mappings.
  • Added remixRouteParameterization.ts with regex-based route conversion that handles dynamic segments ($param:param), splat routes ($:*), and nested routes.
  • Updated both client and server instrumentation in performance.tsx and instrumentServer.ts to use parameterized transaction names.
  • It also works with Hydrogen

Vite plugin is used like:

// vite.config.tsimport{defineConfig}from'vite';import{vitePluginasremix}from'@remix-run/dev';import{sentryRemixVitePlugin}from'@sentry/remix';exportdefaultdefineConfig({plugins: [remix(),sentryRemixVitePlugin({appDirPath: './app',// Default is 'app' in project root}),],});

Updated all Remix E2E test applications to expect parameterized route names. Added new E2E test application create-remix-app-v2-non-vite for testing backward compatibility for non-Vite builds - these continue to use routes/user.$id format.

Summary

Route FileExample URLBeforeAfter (Server - All Apps)After (Client - Vite Plugin)
_index.tsx/routes/_index//
user.$id.tsx/user/123routes/user.$id/user/:id/user/:id
users.$userId.posts.$postId.tsx/users/123/posts/456routes/users.$userId.posts.$postId/users/:userId/posts/:postId/users/:userId/posts/:postId
$.tsx (splat)/docs/guide/introroutes/$/:*/:*
docs.$.tsx (scoped splat)/docs/guide/introroutes/docs.$/docs/:*/docs/:*

Notes

  • Server-side: Parameterization works automatically for all Remix apps (Vite, non-Vite, Hydrogen, Express).
  • Client-side: Requires the Vite plugin. Without it, client transactions continue using route IDs (e.g., routes/user.$id).

@onurtemizkan
onurtemizkanforce-pushed the onur/remix-parameterized-routes branch from 0460a75 to 8886ddcCompareOctober 16, 2025 12:17
@onurtemizkan
onurtemizkan marked this pull request as ready for review October 16, 2025 14:06
cursor[bot]

This comment was marked as outdated.

@github-actions

github-actionsBot commented Oct 16, 2025

Copy link
Copy Markdown
Contributor

node-overhead report 🧳

Note: This is a synthetic benchmark with a minimal express app and does not necessarily reflect the real-world performance impact in an application.

ScenarioRequests/s% of BaselinePrev. Requests/sChange %
GET Baseline11,282-9,086+24%
GET With Sentry1,91417%1,761+9%
GET With Sentry (error only)7,67168%6,153+25%
POST Baseline1,153-1,210-5%
POST With Sentry57550%597-4%
POST With Sentry (error only)1,03189%1,075-4%
MYSQL Baseline3,924-3,326+18%
MYSQL With Sentry47712%493-3%
MYSQL With Sentry (error only)3,29584%2,708+22%

View base workflow run

if: needs.job_build.outputs.changed_remix == 'true' || github.event_name != 'pull_request'
runs-on: ubuntu-24.04
timeout-minutes: 10
timeout-minutes: 15

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did this increase so much?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After adding the new tests, some of them started randomly timing out slightly above the 10-minute threshold on CI. It can be 11-12. I just increased this much to be ready for when we add more tests.


// No manifest available (legacy app without Vite plugin)
// Fall back to route ID for backward compatibility
return { name: routeId, source: 'route' };

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be url here then? In the legacy case this will not be parameterized right?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this is still not an unparameterized url really, in the previous implementation we were using route for the routeId (e.g. routes/users.$userId.posts.$postId) as well, so while it's not a parameterized route by its format, it still contains the parameterized route info.

Comment threadpackages/remix/src/server/instrumentServer.ts
@chargome

Copy link
Copy Markdown
Member

@onurtemizkan please merge in once linting issues are solved ✅

Comment threadpackages/remix/src/client/performance.tsx
Comment threadpackages/remix/src/config/vite.ts
Comment threadpackages/remix/src/client/remixRouteParameterization.ts
Comment threadpackages/remix/src/config/vite.ts
@onurtemizkan
onurtemizkanforce-pushed the onur/remix-parameterized-routes branch from 8e8d7c6 to eb00778CompareNovember 26, 2025 13:30
Comment threadpackages/remix/src/config/vite.ts
@onurtemizkan
onurtemizkan merged commit a3875c5 into developNov 26, 2025
78 checks passed
@onurtemizkan
onurtemizkan deleted the onur/remix-parameterized-routes branch November 26, 2025 13:42
Doridian pushed a commit to foxCaves/foxCaves that referenced this pull request Dec 3, 2025
This PR contains the following updates:
| Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) |
|---|---|---|---|
| [@sentry/react](https://github.com/getsentry/sentry-javascript/tree/master/packages/react) ([source](https://github.com/getsentry/sentry-javascript)) | [`10.27.0` -> `10.28.0`](https://renovatebot.com/diffs/npm/@sentry%2freact/10.27.0/10.28.0) | ![age](https://developer.mend.io/api/mc/badges/age/npm/@sentry%2freact/10.28.0?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@sentry%2freact/10.27.0/10.28.0?slim=true) |
---
### Release Notes
<details>
<summary>getsentry/sentry-javascript (@&#8203;sentry/react)</summary>
### [`v10.28.0`](https://github.com/getsentry/sentry-javascript/releases/tag/10.28.0)
[Compare Source](getsentry/sentry-javascript@10.27.0...10.28.0)
##### Important Changes
- **feat(core): Make `matcher` parameter optional in `makeMultiplexedTransport` ([#&#8203;10798](getsentry/sentry-javascript#10798
The `matcher` parameter in `makeMultiplexedTransport` is now optional with a sensible default. This makes it much easier to use the multiplexed transport for sending events to multiple DSNs based on runtime configuration.
**Before:**
```javascript
import { makeFetchTransport, makeMultiplexedTransport } from '@&#8203;sentry/browser';
const EXTRA_KEY = 'ROUTE_TO';
const transport = makeMultiplexedTransport(makeFetchTransport, args => {
const event = args.getEvent();
if (event?.extra?.[EXTRA_KEY] && Array.isArray(event.extra[EXTRA_KEY])) {
return event.extra[EXTRA_KEY];
}
return [];
});
Sentry.init({
transport,
// ... other options
});
// Capture events with routing info
Sentry.captureException(error, {
extra: {
[EXTRA_KEY]: [
{ dsn: 'https://key1@&#8203;sentry.io/project1', release: 'v1.0.0' },
{ dsn: 'https://key2@&#8203;sentry.io/project2' },
],
},
});
```
**After:**
```javascript
import { makeFetchTransport, makeMultiplexedTransport, MULTIPLEXED_TRANSPORT_EXTRA_KEY } from '@&#8203;sentry/browser';
// Just pass the transport generator - the default matcher handles the rest!
Sentry.init({
transport: makeMultiplexedTransport(makeFetchTransport),
// ... other options
});
// Capture events with routing info using the exported constant
Sentry.captureException(error, {
extra: {
[MULTIPLEXED_TRANSPORT_EXTRA_KEY]: [
{ dsn: 'https://key1@&#8203;sentry.io/project1', release: 'v1.0.0' },
{ dsn: 'https://key2@&#8203;sentry.io/project2' },
],
},
});
```
The default matcher looks for routing information in `event.extra[MULTIPLEXED_TRANSPORT_EXTRA_KEY]`. You can still provide a custom matcher function for advanced use cases.
- **feat(nextjs): Support cacheComponents on turbopack ([#&#8203;18304](getsentry/sentry-javascript#18304
This release adds support for `cacheComponents` on turbopack builds. We are working on adding support for this feature in webpack builds as well.
##### Other Changes
- feat: Publish AWS Lambda Layer for Node 24 ([#&#8203;18327](getsentry/sentry-javascript#18327))
- feat(browser): Expose langchain instrumentation ([#&#8203;18342](getsentry/sentry-javascript#18342))
- feat(browser): Expose langgraph instrumentation ([#&#8203;18345](getsentry/sentry-javascript#18345))
- feat(cloudflare): Allow specifying a custom fetch in Cloudflare transport options ([#&#8203;18335](getsentry/sentry-javascript#18335))
- feat(core): Add `isolateTrace` option to `Sentry.withMonitor()` ([#&#8203;18079](getsentry/sentry-javascript#18079))
- feat(deps): bump [@&#8203;sentry/webpack-plugin](https://github.com/sentry/webpack-plugin) from 4.3.0 to 4.6.1 ([#&#8203;18272](getsentry/sentry-javascript#18272))
- feat(nextjs): Add cloudflare `waitUntil` detection ([#&#8203;18336](getsentry/sentry-javascript#18336))
- feat(node): Add LangChain v1 support ([#&#8203;18306](getsentry/sentry-javascript#18306))
- feat(remix): Add parameterized transaction naming for routes ([#&#8203;17951](getsentry/sentry-javascript#17951))
- fix(cloudflare): Keep http root span alive until streaming responses are consumed ([#&#8203;18087](getsentry/sentry-javascript#18087))
- fix(cloudflare): Wait for async events to finish ([#&#8203;18334](getsentry/sentry-javascript#18334))
- fix(core): `continueTrace` doesn't propagate given trace ID if active span exists ([#&#8203;18328](getsentry/sentry-javascript#18328))
- fix(node-core): Handle custom scope in log messages without parameters ([#&#8203;18322](getsentry/sentry-javascript#18322))
- fix(opentelemetry): Ensure Sentry spans don't leak when tracing is disabled ([#&#8203;18337](getsentry/sentry-javascript#18337))
- fix(react-router): Use underscores in trace origin values ([#&#8203;18351](getsentry/sentry-javascript#18351))
- chore(tanstackstart-react): Export custom inits from tanstackstart-react ([#&#8203;18369](getsentry/sentry-javascript#18369))
- chore(tanstackstart-react)!: Remove empty placeholder implementations ([#&#8203;18338](getsentry/sentry-javascript#18338))
<details>
<summary><strong>Internal Changes</strong></summary>
- chore: Allow URLs as issue ([#&#8203;18372](getsentry/sentry-javascript#18372))
- chore(changelog): Add entry for [#&#8203;18304](getsentry/sentry-javascript#18304) ([#&#8203;18329](getsentry/sentry-javascript#18329))
- chore(ci): Add action to track all PRs as issues ([#&#8203;18363](getsentry/sentry-javascript#18363))
- chore(github): Adjust `BUGBOT.md` rules to flag invalid op and origin values during review ([#&#8203;18352](getsentry/sentry-javascript#18352))
- ci: Add action to create issue on gitflow merge conflicts ([#&#8203;18319](getsentry/sentry-javascript#18319))
- ci(deps): bump actions/checkout from 5 to 6 ([#&#8203;18268](getsentry/sentry-javascript#18268))
- ci(deps): bump peter-evans/create-pull-request from 7.0.8 to 7.0.9 ([#&#8203;18361](getsentry/sentry-javascript#18361))
- test(cloudflare): Add typechecks for cloudflare-worker e2e test ([#&#8203;18321](getsentry/sentry-javascript#18321))
</details>
#### Bundle size 📦
| Path | Size |
| ----------------------------------------------------------------------------------------------------- | --------- |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) | 24.22 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) - with treeshaking flags | 22.76 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing) | 40.57 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Profiling) | 45.05 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay) | 78.08 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay) - with treeshaking flags | 68.05 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay with Canvas) | 82.65 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay, Feedback) | 94.61 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Feedback) | 40.51 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. sendFeedback) | 28.8 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. FeedbackAsync) | 33.66 KB |
| [@&#8203;sentry/react](https://github.com/sentry/react) | 25.9 KB |
| [@&#8203;sentry/react](https://github.com/sentry/react) (incl. Tracing) | 42.72 KB |
| [@&#8203;sentry/vue](https://github.com/sentry/vue) | 28.56 KB |
| [@&#8203;sentry/vue](https://github.com/sentry/vue) (incl. Tracing) | 42.32 KB |
| [@&#8203;sentry/svelte](https://github.com/sentry/svelte) | 24.24 KB |
| CDN Bundle | 26.57 KB |
| CDN Bundle (incl. Tracing) | 41.22 KB |
| CDN Bundle (incl. Tracing, Replay) | 76.9 KB |
| CDN Bundle (incl. Tracing, Replay, Feedback) | 82.23 KB |
| CDN Bundle - uncompressed | 78.09 KB |
| CDN Bundle (incl. Tracing) - uncompressed | 122.4 KB |
| CDN Bundle (incl. Tracing, Replay) - uncompressed | 235.71 KB |
| CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed | 248.17 KB |
| [@&#8203;sentry/nextjs](https://github.com/sentry/nextjs) (client) | 44.88 KB |
| [@&#8203;sentry/sveltekit](https://github.com/sentry/sveltekit) (client) | 40.92 KB |
| [@&#8203;sentry/node-core](https://github.com/sentry/node-core) | 50.06 KB |
| [@&#8203;sentry/node](https://github.com/sentry/node) | 155.7 KB |
| [@&#8203;sentry/node](https://github.com/sentry/node) - without tracing | 90.67 KB |
| [@&#8203;sentry/aws-serverless](https://github.com/sentry/aws-serverless) | 105.61 KB |
</details>
---
### Configuration
📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.
♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 **Ignore**: Close this PR and you won't be reminded about this update again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box
---
This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi4yNy4xIiwidXBkYXRlZEluVmVyIjoiNDIuMjcuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->
Reviewed-on: https://git.foxden.network/foxCaves/foxCaves/pulls/12
Co-authored-by: Renovate <renovate@foxden.network>
Co-committed-by: Renovate <renovate@foxden.network>
Sign up for freeto 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.

Implement parametrized routes for Remix Client

2 participants

@onurtemizkan@chargome
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(remix): Add parameterized transaction naming for routes - #17951

Merged
onurtemizkan merged 11 commits into
developfrom
onur/remix-parameterized-routes
Nov 26, 2025
Merged

feat(remix): Add parameterized transaction naming for routes#17951
onurtemizkan merged 11 commits into
developfrom
onur/remix-parameterized-routes

Conversation

@onurtemizkan

@onurtemizkanonurtemizkan commented Oct 16, 2025

Copy link
Copy Markdown
Contributor

This PR adds parameterized routes for Remix SDK, similarly to the NextJS SDK

Resolves: #16690
Needs docs PR for the Vite plugin

Adds automatic parameterization of Remix route IDs for transaction naming. Converts internal Remix route file patterns to parameterized paths similar to the other SDKs (routes/user.$id -> /user/:id).

  • Created sentryRemixVitePlugin that extracts route information from Remix builds and generates a manifest file containing route ID to parameterized route mappings.
  • Added remixRouteParameterization.ts with regex-based route conversion that handles dynamic segments ($param:param), splat routes ($:*), and nested routes.
  • Updated both client and server instrumentation in performance.tsx and instrumentServer.ts to use parameterized transaction names.
  • It also works with Hydrogen

Vite plugin is used like:

// vite.config.tsimport{defineConfig}from'vite';import{vitePluginasremix}from'@remix-run/dev';import{sentryRemixVitePlugin}from'@sentry/remix';exportdefaultdefineConfig({plugins: [remix(),sentryRemixVitePlugin({appDirPath: './app',// Default is 'app' in project root}),],});

Updated all Remix E2E test applications to expect parameterized route names. Added new E2E test application create-remix-app-v2-non-vite for testing backward compatibility for non-Vite builds - these continue to use routes/user.$id format.

Summary

Route FileExample URLBeforeAfter (Server - All Apps)After (Client - Vite Plugin)
_index.tsx/routes/_index//
user.$id.tsx/user/123routes/user.$id/user/:id/user/:id
users.$userId.posts.$postId.tsx/users/123/posts/456routes/users.$userId.posts.$postId/users/:userId/posts/:postId/users/:userId/posts/:postId
$.tsx (splat)/docs/guide/introroutes/$/:*/:*
docs.$.tsx (scoped splat)/docs/guide/introroutes/docs.$/docs/:*/docs/:*

Notes

  • Server-side: Parameterization works automatically for all Remix apps (Vite, non-Vite, Hydrogen, Express).
  • Client-side: Requires the Vite plugin. Without it, client transactions continue using route IDs (e.g., routes/user.$id).

@onurtemizkan
onurtemizkanforce-pushed the onur/remix-parameterized-routes branch from 0460a75 to 8886ddcCompareOctober 16, 2025 12:17
@onurtemizkan
onurtemizkan marked this pull request as ready for review October 16, 2025 14:06
cursor[bot]

This comment was marked as outdated.

@github-actions

github-actionsBot commented Oct 16, 2025

Copy link
Copy Markdown
Contributor

node-overhead report 🧳

Note: This is a synthetic benchmark with a minimal express app and does not necessarily reflect the real-world performance impact in an application.

ScenarioRequests/s% of BaselinePrev. Requests/sChange %
GET Baseline11,282-9,086+24%
GET With Sentry1,91417%1,761+9%
GET With Sentry (error only)7,67168%6,153+25%
POST Baseline1,153-1,210-5%
POST With Sentry57550%597-4%
POST With Sentry (error only)1,03189%1,075-4%
MYSQL Baseline3,924-3,326+18%
MYSQL With Sentry47712%493-3%
MYSQL With Sentry (error only)3,29584%2,708+22%

View base workflow run

if: needs.job_build.outputs.changed_remix == 'true' || github.event_name != 'pull_request'
runs-on: ubuntu-24.04
timeout-minutes: 10
timeout-minutes: 15

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did this increase so much?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After adding the new tests, some of them started randomly timing out slightly above the 10-minute threshold on CI. It can be 11-12. I just increased this much to be ready for when we add more tests.


// No manifest available (legacy app without Vite plugin)
// Fall back to route ID for backward compatibility
return { name: routeId, source: 'route' };

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be url here then? In the legacy case this will not be parameterized right?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this is still not an unparameterized url really, in the previous implementation we were using route for the routeId (e.g. routes/users.$userId.posts.$postId) as well, so while it's not a parameterized route by its format, it still contains the parameterized route info.

Comment threadpackages/remix/src/server/instrumentServer.ts
@chargome

Copy link
Copy Markdown
Member

@onurtemizkan please merge in once linting issues are solved ✅

Comment threadpackages/remix/src/client/performance.tsx
Comment threadpackages/remix/src/config/vite.ts
Comment threadpackages/remix/src/client/remixRouteParameterization.ts
Comment threadpackages/remix/src/config/vite.ts
@onurtemizkan
onurtemizkanforce-pushed the onur/remix-parameterized-routes branch from 8e8d7c6 to eb00778CompareNovember 26, 2025 13:30
Comment threadpackages/remix/src/config/vite.ts
@onurtemizkan
onurtemizkan merged commit a3875c5 into developNov 26, 2025
78 checks passed
@onurtemizkan
onurtemizkan deleted the onur/remix-parameterized-routes branch November 26, 2025 13:42
Doridian pushed a commit to foxCaves/foxCaves that referenced this pull request Dec 3, 2025
This PR contains the following updates:
| Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) |
|---|---|---|---|
| [@sentry/react](https://github.com/getsentry/sentry-javascript/tree/master/packages/react) ([source](https://github.com/getsentry/sentry-javascript)) | [`10.27.0` -> `10.28.0`](https://renovatebot.com/diffs/npm/@sentry%2freact/10.27.0/10.28.0) | ![age](https://developer.mend.io/api/mc/badges/age/npm/@sentry%2freact/10.28.0?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@sentry%2freact/10.27.0/10.28.0?slim=true) |
---
### Release Notes
<details>
<summary>getsentry/sentry-javascript (@&#8203;sentry/react)</summary>
### [`v10.28.0`](https://github.com/getsentry/sentry-javascript/releases/tag/10.28.0)
[Compare Source](getsentry/sentry-javascript@10.27.0...10.28.0)
##### Important Changes
- **feat(core): Make `matcher` parameter optional in `makeMultiplexedTransport` ([#&#8203;10798](getsentry/sentry-javascript#10798
The `matcher` parameter in `makeMultiplexedTransport` is now optional with a sensible default. This makes it much easier to use the multiplexed transport for sending events to multiple DSNs based on runtime configuration.
**Before:**
```javascript
import { makeFetchTransport, makeMultiplexedTransport } from '@&#8203;sentry/browser';
const EXTRA_KEY = 'ROUTE_TO';
const transport = makeMultiplexedTransport(makeFetchTransport, args => {
const event = args.getEvent();
if (event?.extra?.[EXTRA_KEY] && Array.isArray(event.extra[EXTRA_KEY])) {
return event.extra[EXTRA_KEY];
}
return [];
});
Sentry.init({
transport,
// ... other options
});
// Capture events with routing info
Sentry.captureException(error, {
extra: {
[EXTRA_KEY]: [
{ dsn: 'https://key1@&#8203;sentry.io/project1', release: 'v1.0.0' },
{ dsn: 'https://key2@&#8203;sentry.io/project2' },
],
},
});
```
**After:**
```javascript
import { makeFetchTransport, makeMultiplexedTransport, MULTIPLEXED_TRANSPORT_EXTRA_KEY } from '@&#8203;sentry/browser';
// Just pass the transport generator - the default matcher handles the rest!
Sentry.init({
transport: makeMultiplexedTransport(makeFetchTransport),
// ... other options
});
// Capture events with routing info using the exported constant
Sentry.captureException(error, {
extra: {
[MULTIPLEXED_TRANSPORT_EXTRA_KEY]: [
{ dsn: 'https://key1@&#8203;sentry.io/project1', release: 'v1.0.0' },
{ dsn: 'https://key2@&#8203;sentry.io/project2' },
],
},
});
```
The default matcher looks for routing information in `event.extra[MULTIPLEXED_TRANSPORT_EXTRA_KEY]`. You can still provide a custom matcher function for advanced use cases.
- **feat(nextjs): Support cacheComponents on turbopack ([#&#8203;18304](getsentry/sentry-javascript#18304
This release adds support for `cacheComponents` on turbopack builds. We are working on adding support for this feature in webpack builds as well.
##### Other Changes
- feat: Publish AWS Lambda Layer for Node 24 ([#&#8203;18327](getsentry/sentry-javascript#18327))
- feat(browser): Expose langchain instrumentation ([#&#8203;18342](getsentry/sentry-javascript#18342))
- feat(browser): Expose langgraph instrumentation ([#&#8203;18345](getsentry/sentry-javascript#18345))
- feat(cloudflare): Allow specifying a custom fetch in Cloudflare transport options ([#&#8203;18335](getsentry/sentry-javascript#18335))
- feat(core): Add `isolateTrace` option to `Sentry.withMonitor()` ([#&#8203;18079](getsentry/sentry-javascript#18079))
- feat(deps): bump [@&#8203;sentry/webpack-plugin](https://github.com/sentry/webpack-plugin) from 4.3.0 to 4.6.1 ([#&#8203;18272](getsentry/sentry-javascript#18272))
- feat(nextjs): Add cloudflare `waitUntil` detection ([#&#8203;18336](getsentry/sentry-javascript#18336))
- feat(node): Add LangChain v1 support ([#&#8203;18306](getsentry/sentry-javascript#18306))
- feat(remix): Add parameterized transaction naming for routes ([#&#8203;17951](getsentry/sentry-javascript#17951))
- fix(cloudflare): Keep http root span alive until streaming responses are consumed ([#&#8203;18087](getsentry/sentry-javascript#18087))
- fix(cloudflare): Wait for async events to finish ([#&#8203;18334](getsentry/sentry-javascript#18334))
- fix(core): `continueTrace` doesn't propagate given trace ID if active span exists ([#&#8203;18328](getsentry/sentry-javascript#18328))
- fix(node-core): Handle custom scope in log messages without parameters ([#&#8203;18322](getsentry/sentry-javascript#18322))
- fix(opentelemetry): Ensure Sentry spans don't leak when tracing is disabled ([#&#8203;18337](getsentry/sentry-javascript#18337))
- fix(react-router): Use underscores in trace origin values ([#&#8203;18351](getsentry/sentry-javascript#18351))
- chore(tanstackstart-react): Export custom inits from tanstackstart-react ([#&#8203;18369](getsentry/sentry-javascript#18369))
- chore(tanstackstart-react)!: Remove empty placeholder implementations ([#&#8203;18338](getsentry/sentry-javascript#18338))
<details>
<summary><strong>Internal Changes</strong></summary>
- chore: Allow URLs as issue ([#&#8203;18372](getsentry/sentry-javascript#18372))
- chore(changelog): Add entry for [#&#8203;18304](getsentry/sentry-javascript#18304) ([#&#8203;18329](getsentry/sentry-javascript#18329))
- chore(ci): Add action to track all PRs as issues ([#&#8203;18363](getsentry/sentry-javascript#18363))
- chore(github): Adjust `BUGBOT.md` rules to flag invalid op and origin values during review ([#&#8203;18352](getsentry/sentry-javascript#18352))
- ci: Add action to create issue on gitflow merge conflicts ([#&#8203;18319](getsentry/sentry-javascript#18319))
- ci(deps): bump actions/checkout from 5 to 6 ([#&#8203;18268](getsentry/sentry-javascript#18268))
- ci(deps): bump peter-evans/create-pull-request from 7.0.8 to 7.0.9 ([#&#8203;18361](getsentry/sentry-javascript#18361))
- test(cloudflare): Add typechecks for cloudflare-worker e2e test ([#&#8203;18321](getsentry/sentry-javascript#18321))
</details>
#### Bundle size 📦
| Path | Size |
| ----------------------------------------------------------------------------------------------------- | --------- |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) | 24.22 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) - with treeshaking flags | 22.76 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing) | 40.57 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Profiling) | 45.05 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay) | 78.08 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay) - with treeshaking flags | 68.05 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay with Canvas) | 82.65 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay, Feedback) | 94.61 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Feedback) | 40.51 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. sendFeedback) | 28.8 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. FeedbackAsync) | 33.66 KB |
| [@&#8203;sentry/react](https://github.com/sentry/react) | 25.9 KB |
| [@&#8203;sentry/react](https://github.com/sentry/react) (incl. Tracing) | 42.72 KB |
| [@&#8203;sentry/vue](https://github.com/sentry/vue) | 28.56 KB |
| [@&#8203;sentry/vue](https://github.com/sentry/vue) (incl. Tracing) | 42.32 KB |
| [@&#8203;sentry/svelte](https://github.com/sentry/svelte) | 24.24 KB |
| CDN Bundle | 26.57 KB |
| CDN Bundle (incl. Tracing) | 41.22 KB |
| CDN Bundle (incl. Tracing, Replay) | 76.9 KB |
| CDN Bundle (incl. Tracing, Replay, Feedback) | 82.23 KB |
| CDN Bundle - uncompressed | 78.09 KB |
| CDN Bundle (incl. Tracing) - uncompressed | 122.4 KB |
| CDN Bundle (incl. Tracing, Replay) - uncompressed | 235.71 KB |
| CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed | 248.17 KB |
| [@&#8203;sentry/nextjs](https://github.com/sentry/nextjs) (client) | 44.88 KB |
| [@&#8203;sentry/sveltekit](https://github.com/sentry/sveltekit) (client) | 40.92 KB |
| [@&#8203;sentry/node-core](https://github.com/sentry/node-core) | 50.06 KB |
| [@&#8203;sentry/node](https://github.com/sentry/node) | 155.7 KB |
| [@&#8203;sentry/node](https://github.com/sentry/node) - without tracing | 90.67 KB |
| [@&#8203;sentry/aws-serverless](https://github.com/sentry/aws-serverless) | 105.61 KB |
</details>
---
### Configuration
📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.
♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 **Ignore**: Close this PR and you won't be reminded about this update again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box
---
This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi4yNy4xIiwidXBkYXRlZEluVmVyIjoiNDIuMjcuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->
Reviewed-on: https://git.foxden.network/foxCaves/foxCaves/pulls/12
Co-authored-by: Renovate <renovate@foxden.network>
Co-committed-by: Renovate <renovate@foxden.network>
Sign up for freeto 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.

Implement parametrized routes for Remix Client

2 participants

@onurtemizkan@chargome
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(remix): Add parameterized transaction naming for routes - #17951

Merged
onurtemizkan merged 11 commits into
developfrom
onur/remix-parameterized-routes
Nov 26, 2025
Merged

feat(remix): Add parameterized transaction naming for routes#17951
onurtemizkan merged 11 commits into
developfrom
onur/remix-parameterized-routes

Conversation

@onurtemizkan

@onurtemizkanonurtemizkan commented Oct 16, 2025

Copy link
Copy Markdown
Contributor

This PR adds parameterized routes for Remix SDK, similarly to the NextJS SDK

Resolves: #16690
Needs docs PR for the Vite plugin

Adds automatic parameterization of Remix route IDs for transaction naming. Converts internal Remix route file patterns to parameterized paths similar to the other SDKs (routes/user.$id -> /user/:id).

  • Created sentryRemixVitePlugin that extracts route information from Remix builds and generates a manifest file containing route ID to parameterized route mappings.
  • Added remixRouteParameterization.ts with regex-based route conversion that handles dynamic segments ($param:param), splat routes ($:*), and nested routes.
  • Updated both client and server instrumentation in performance.tsx and instrumentServer.ts to use parameterized transaction names.
  • It also works with Hydrogen

Vite plugin is used like:

// vite.config.tsimport{defineConfig}from'vite';import{vitePluginasremix}from'@remix-run/dev';import{sentryRemixVitePlugin}from'@sentry/remix';exportdefaultdefineConfig({plugins: [remix(),sentryRemixVitePlugin({appDirPath: './app',// Default is 'app' in project root}),],});

Updated all Remix E2E test applications to expect parameterized route names. Added new E2E test application create-remix-app-v2-non-vite for testing backward compatibility for non-Vite builds - these continue to use routes/user.$id format.

Summary

Route FileExample URLBeforeAfter (Server - All Apps)After (Client - Vite Plugin)
_index.tsx/routes/_index//
user.$id.tsx/user/123routes/user.$id/user/:id/user/:id
users.$userId.posts.$postId.tsx/users/123/posts/456routes/users.$userId.posts.$postId/users/:userId/posts/:postId/users/:userId/posts/:postId
$.tsx (splat)/docs/guide/introroutes/$/:*/:*
docs.$.tsx (scoped splat)/docs/guide/introroutes/docs.$/docs/:*/docs/:*

Notes

  • Server-side: Parameterization works automatically for all Remix apps (Vite, non-Vite, Hydrogen, Express).
  • Client-side: Requires the Vite plugin. Without it, client transactions continue using route IDs (e.g., routes/user.$id).

@onurtemizkan
onurtemizkanforce-pushed the onur/remix-parameterized-routes branch from 0460a75 to 8886ddcCompareOctober 16, 2025 12:17
@onurtemizkan
onurtemizkan marked this pull request as ready for review October 16, 2025 14:06
cursor[bot]

This comment was marked as outdated.

@github-actions

github-actionsBot commented Oct 16, 2025

Copy link
Copy Markdown
Contributor

node-overhead report 🧳

Note: This is a synthetic benchmark with a minimal express app and does not necessarily reflect the real-world performance impact in an application.

ScenarioRequests/s% of BaselinePrev. Requests/sChange %
GET Baseline11,282-9,086+24%
GET With Sentry1,91417%1,761+9%
GET With Sentry (error only)7,67168%6,153+25%
POST Baseline1,153-1,210-5%
POST With Sentry57550%597-4%
POST With Sentry (error only)1,03189%1,075-4%
MYSQL Baseline3,924-3,326+18%
MYSQL With Sentry47712%493-3%
MYSQL With Sentry (error only)3,29584%2,708+22%

View base workflow run

if: needs.job_build.outputs.changed_remix == 'true' || github.event_name != 'pull_request'
runs-on: ubuntu-24.04
timeout-minutes: 10
timeout-minutes: 15

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did this increase so much?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After adding the new tests, some of them started randomly timing out slightly above the 10-minute threshold on CI. It can be 11-12. I just increased this much to be ready for when we add more tests.


// No manifest available (legacy app without Vite plugin)
// Fall back to route ID for backward compatibility
return { name: routeId, source: 'route' };

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be url here then? In the legacy case this will not be parameterized right?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this is still not an unparameterized url really, in the previous implementation we were using route for the routeId (e.g. routes/users.$userId.posts.$postId) as well, so while it's not a parameterized route by its format, it still contains the parameterized route info.

Comment threadpackages/remix/src/server/instrumentServer.ts
@chargome

Copy link
Copy Markdown
Member

@onurtemizkan please merge in once linting issues are solved ✅

Comment threadpackages/remix/src/client/performance.tsx
Comment threadpackages/remix/src/config/vite.ts
Comment threadpackages/remix/src/client/remixRouteParameterization.ts
Comment threadpackages/remix/src/config/vite.ts
@onurtemizkan
onurtemizkanforce-pushed the onur/remix-parameterized-routes branch from 8e8d7c6 to eb00778CompareNovember 26, 2025 13:30
Comment threadpackages/remix/src/config/vite.ts
@onurtemizkan
onurtemizkan merged commit a3875c5 into developNov 26, 2025
78 checks passed
@onurtemizkan
onurtemizkan deleted the onur/remix-parameterized-routes branch November 26, 2025 13:42
Doridian pushed a commit to foxCaves/foxCaves that referenced this pull request Dec 3, 2025
This PR contains the following updates:
| Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) |
|---|---|---|---|
| [@sentry/react](https://github.com/getsentry/sentry-javascript/tree/master/packages/react) ([source](https://github.com/getsentry/sentry-javascript)) | [`10.27.0` -> `10.28.0`](https://renovatebot.com/diffs/npm/@sentry%2freact/10.27.0/10.28.0) | ![age](https://developer.mend.io/api/mc/badges/age/npm/@sentry%2freact/10.28.0?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@sentry%2freact/10.27.0/10.28.0?slim=true) |
---
### Release Notes
<details>
<summary>getsentry/sentry-javascript (@&#8203;sentry/react)</summary>
### [`v10.28.0`](https://github.com/getsentry/sentry-javascript/releases/tag/10.28.0)
[Compare Source](getsentry/sentry-javascript@10.27.0...10.28.0)
##### Important Changes
- **feat(core): Make `matcher` parameter optional in `makeMultiplexedTransport` ([#&#8203;10798](getsentry/sentry-javascript#10798
The `matcher` parameter in `makeMultiplexedTransport` is now optional with a sensible default. This makes it much easier to use the multiplexed transport for sending events to multiple DSNs based on runtime configuration.
**Before:**
```javascript
import { makeFetchTransport, makeMultiplexedTransport } from '@&#8203;sentry/browser';
const EXTRA_KEY = 'ROUTE_TO';
const transport = makeMultiplexedTransport(makeFetchTransport, args => {
const event = args.getEvent();
if (event?.extra?.[EXTRA_KEY] && Array.isArray(event.extra[EXTRA_KEY])) {
return event.extra[EXTRA_KEY];
}
return [];
});
Sentry.init({
transport,
// ... other options
});
// Capture events with routing info
Sentry.captureException(error, {
extra: {
[EXTRA_KEY]: [
{ dsn: 'https://key1@&#8203;sentry.io/project1', release: 'v1.0.0' },
{ dsn: 'https://key2@&#8203;sentry.io/project2' },
],
},
});
```
**After:**
```javascript
import { makeFetchTransport, makeMultiplexedTransport, MULTIPLEXED_TRANSPORT_EXTRA_KEY } from '@&#8203;sentry/browser';
// Just pass the transport generator - the default matcher handles the rest!
Sentry.init({
transport: makeMultiplexedTransport(makeFetchTransport),
// ... other options
});
// Capture events with routing info using the exported constant
Sentry.captureException(error, {
extra: {
[MULTIPLEXED_TRANSPORT_EXTRA_KEY]: [
{ dsn: 'https://key1@&#8203;sentry.io/project1', release: 'v1.0.0' },
{ dsn: 'https://key2@&#8203;sentry.io/project2' },
],
},
});
```
The default matcher looks for routing information in `event.extra[MULTIPLEXED_TRANSPORT_EXTRA_KEY]`. You can still provide a custom matcher function for advanced use cases.
- **feat(nextjs): Support cacheComponents on turbopack ([#&#8203;18304](getsentry/sentry-javascript#18304
This release adds support for `cacheComponents` on turbopack builds. We are working on adding support for this feature in webpack builds as well.
##### Other Changes
- feat: Publish AWS Lambda Layer for Node 24 ([#&#8203;18327](getsentry/sentry-javascript#18327))
- feat(browser): Expose langchain instrumentation ([#&#8203;18342](getsentry/sentry-javascript#18342))
- feat(browser): Expose langgraph instrumentation ([#&#8203;18345](getsentry/sentry-javascript#18345))
- feat(cloudflare): Allow specifying a custom fetch in Cloudflare transport options ([#&#8203;18335](getsentry/sentry-javascript#18335))
- feat(core): Add `isolateTrace` option to `Sentry.withMonitor()` ([#&#8203;18079](getsentry/sentry-javascript#18079))
- feat(deps): bump [@&#8203;sentry/webpack-plugin](https://github.com/sentry/webpack-plugin) from 4.3.0 to 4.6.1 ([#&#8203;18272](getsentry/sentry-javascript#18272))
- feat(nextjs): Add cloudflare `waitUntil` detection ([#&#8203;18336](getsentry/sentry-javascript#18336))
- feat(node): Add LangChain v1 support ([#&#8203;18306](getsentry/sentry-javascript#18306))
- feat(remix): Add parameterized transaction naming for routes ([#&#8203;17951](getsentry/sentry-javascript#17951))
- fix(cloudflare): Keep http root span alive until streaming responses are consumed ([#&#8203;18087](getsentry/sentry-javascript#18087))
- fix(cloudflare): Wait for async events to finish ([#&#8203;18334](getsentry/sentry-javascript#18334))
- fix(core): `continueTrace` doesn't propagate given trace ID if active span exists ([#&#8203;18328](getsentry/sentry-javascript#18328))
- fix(node-core): Handle custom scope in log messages without parameters ([#&#8203;18322](getsentry/sentry-javascript#18322))
- fix(opentelemetry): Ensure Sentry spans don't leak when tracing is disabled ([#&#8203;18337](getsentry/sentry-javascript#18337))
- fix(react-router): Use underscores in trace origin values ([#&#8203;18351](getsentry/sentry-javascript#18351))
- chore(tanstackstart-react): Export custom inits from tanstackstart-react ([#&#8203;18369](getsentry/sentry-javascript#18369))
- chore(tanstackstart-react)!: Remove empty placeholder implementations ([#&#8203;18338](getsentry/sentry-javascript#18338))
<details>
<summary><strong>Internal Changes</strong></summary>
- chore: Allow URLs as issue ([#&#8203;18372](getsentry/sentry-javascript#18372))
- chore(changelog): Add entry for [#&#8203;18304](getsentry/sentry-javascript#18304) ([#&#8203;18329](getsentry/sentry-javascript#18329))
- chore(ci): Add action to track all PRs as issues ([#&#8203;18363](getsentry/sentry-javascript#18363))
- chore(github): Adjust `BUGBOT.md` rules to flag invalid op and origin values during review ([#&#8203;18352](getsentry/sentry-javascript#18352))
- ci: Add action to create issue on gitflow merge conflicts ([#&#8203;18319](getsentry/sentry-javascript#18319))
- ci(deps): bump actions/checkout from 5 to 6 ([#&#8203;18268](getsentry/sentry-javascript#18268))
- ci(deps): bump peter-evans/create-pull-request from 7.0.8 to 7.0.9 ([#&#8203;18361](getsentry/sentry-javascript#18361))
- test(cloudflare): Add typechecks for cloudflare-worker e2e test ([#&#8203;18321](getsentry/sentry-javascript#18321))
</details>
#### Bundle size 📦
| Path | Size |
| ----------------------------------------------------------------------------------------------------- | --------- |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) | 24.22 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) - with treeshaking flags | 22.76 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing) | 40.57 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Profiling) | 45.05 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay) | 78.08 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay) - with treeshaking flags | 68.05 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay with Canvas) | 82.65 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay, Feedback) | 94.61 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Feedback) | 40.51 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. sendFeedback) | 28.8 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. FeedbackAsync) | 33.66 KB |
| [@&#8203;sentry/react](https://github.com/sentry/react) | 25.9 KB |
| [@&#8203;sentry/react](https://github.com/sentry/react) (incl. Tracing) | 42.72 KB |
| [@&#8203;sentry/vue](https://github.com/sentry/vue) | 28.56 KB |
| [@&#8203;sentry/vue](https://github.com/sentry/vue) (incl. Tracing) | 42.32 KB |
| [@&#8203;sentry/svelte](https://github.com/sentry/svelte) | 24.24 KB |
| CDN Bundle | 26.57 KB |
| CDN Bundle (incl. Tracing) | 41.22 KB |
| CDN Bundle (incl. Tracing, Replay) | 76.9 KB |
| CDN Bundle (incl. Tracing, Replay, Feedback) | 82.23 KB |
| CDN Bundle - uncompressed | 78.09 KB |
| CDN Bundle (incl. Tracing) - uncompressed | 122.4 KB |
| CDN Bundle (incl. Tracing, Replay) - uncompressed | 235.71 KB |
| CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed | 248.17 KB |
| [@&#8203;sentry/nextjs](https://github.com/sentry/nextjs) (client) | 44.88 KB |
| [@&#8203;sentry/sveltekit](https://github.com/sentry/sveltekit) (client) | 40.92 KB |
| [@&#8203;sentry/node-core](https://github.com/sentry/node-core) | 50.06 KB |
| [@&#8203;sentry/node](https://github.com/sentry/node) | 155.7 KB |
| [@&#8203;sentry/node](https://github.com/sentry/node) - without tracing | 90.67 KB |
| [@&#8203;sentry/aws-serverless](https://github.com/sentry/aws-serverless) | 105.61 KB |
</details>
---
### Configuration
📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.
♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 **Ignore**: Close this PR and you won't be reminded about this update again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box
---
This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi4yNy4xIiwidXBkYXRlZEluVmVyIjoiNDIuMjcuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->
Reviewed-on: https://git.foxden.network/foxCaves/foxCaves/pulls/12
Co-authored-by: Renovate <renovate@foxden.network>
Co-committed-by: Renovate <renovate@foxden.network>
Sign up for freeto 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.

Implement parametrized routes for Remix Client

2 participants

@onurtemizkan@chargome
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

feat(remix): Add parameterized transaction naming for routes - #17951

Merged
onurtemizkan merged 11 commits into
developfrom
onur/remix-parameterized-routes
Nov 26, 2025
Merged

feat(remix): Add parameterized transaction naming for routes#17951
onurtemizkan merged 11 commits into
developfrom
onur/remix-parameterized-routes

Conversation

@onurtemizkan

@onurtemizkanonurtemizkan commented Oct 16, 2025

Copy link
Copy Markdown
Contributor

This PR adds parameterized routes for Remix SDK, similarly to the NextJS SDK

Resolves: #16690
Needs docs PR for the Vite plugin

Adds automatic parameterization of Remix route IDs for transaction naming. Converts internal Remix route file patterns to parameterized paths similar to the other SDKs (routes/user.$id -> /user/:id).

  • Created sentryRemixVitePlugin that extracts route information from Remix builds and generates a manifest file containing route ID to parameterized route mappings.
  • Added remixRouteParameterization.ts with regex-based route conversion that handles dynamic segments ($param:param), splat routes ($:*), and nested routes.
  • Updated both client and server instrumentation in performance.tsx and instrumentServer.ts to use parameterized transaction names.
  • It also works with Hydrogen

Vite plugin is used like:

// vite.config.tsimport{defineConfig}from'vite';import{vitePluginasremix}from'@remix-run/dev';import{sentryRemixVitePlugin}from'@sentry/remix';exportdefaultdefineConfig({plugins: [remix(),sentryRemixVitePlugin({appDirPath: './app',// Default is 'app' in project root}),],});

Updated all Remix E2E test applications to expect parameterized route names. Added new E2E test application create-remix-app-v2-non-vite for testing backward compatibility for non-Vite builds - these continue to use routes/user.$id format.

Summary

Route FileExample URLBeforeAfter (Server - All Apps)After (Client - Vite Plugin)
_index.tsx/routes/_index//
user.$id.tsx/user/123routes/user.$id/user/:id/user/:id
users.$userId.posts.$postId.tsx/users/123/posts/456routes/users.$userId.posts.$postId/users/:userId/posts/:postId/users/:userId/posts/:postId
$.tsx (splat)/docs/guide/introroutes/$/:*/:*
docs.$.tsx (scoped splat)/docs/guide/introroutes/docs.$/docs/:*/docs/:*

Notes

  • Server-side: Parameterization works automatically for all Remix apps (Vite, non-Vite, Hydrogen, Express).
  • Client-side: Requires the Vite plugin. Without it, client transactions continue using route IDs (e.g., routes/user.$id).

@onurtemizkan
onurtemizkanforce-pushed the onur/remix-parameterized-routes branch from 0460a75 to 8886ddcCompareOctober 16, 2025 12:17
@onurtemizkan
onurtemizkan marked this pull request as ready for review October 16, 2025 14:06
cursor[bot]

This comment was marked as outdated.

@github-actions

github-actionsBot commented Oct 16, 2025

Copy link
Copy Markdown
Contributor

node-overhead report 🧳

Note: This is a synthetic benchmark with a minimal express app and does not necessarily reflect the real-world performance impact in an application.

ScenarioRequests/s% of BaselinePrev. Requests/sChange %
GET Baseline11,282-9,086+24%
GET With Sentry1,91417%1,761+9%
GET With Sentry (error only)7,67168%6,153+25%
POST Baseline1,153-1,210-5%
POST With Sentry57550%597-4%
POST With Sentry (error only)1,03189%1,075-4%
MYSQL Baseline3,924-3,326+18%
MYSQL With Sentry47712%493-3%
MYSQL With Sentry (error only)3,29584%2,708+22%

View base workflow run

if: needs.job_build.outputs.changed_remix == 'true' || github.event_name != 'pull_request'
runs-on: ubuntu-24.04
timeout-minutes: 10
timeout-minutes: 15

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did this increase so much?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After adding the new tests, some of them started randomly timing out slightly above the 10-minute threshold on CI. It can be 11-12. I just increased this much to be ready for when we add more tests.


// No manifest available (legacy app without Vite plugin)
// Fall back to route ID for backward compatibility
return { name: routeId, source: 'route' };

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be url here then? In the legacy case this will not be parameterized right?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this is still not an unparameterized url really, in the previous implementation we were using route for the routeId (e.g. routes/users.$userId.posts.$postId) as well, so while it's not a parameterized route by its format, it still contains the parameterized route info.

Comment threadpackages/remix/src/server/instrumentServer.ts
@chargome

Copy link
Copy Markdown
Member

@onurtemizkan please merge in once linting issues are solved ✅

Comment threadpackages/remix/src/client/performance.tsx
Comment threadpackages/remix/src/config/vite.ts
Comment threadpackages/remix/src/client/remixRouteParameterization.ts
Comment threadpackages/remix/src/config/vite.ts
@onurtemizkan
onurtemizkanforce-pushed the onur/remix-parameterized-routes branch from 8e8d7c6 to eb00778CompareNovember 26, 2025 13:30
Comment threadpackages/remix/src/config/vite.ts
@onurtemizkan
onurtemizkan merged commit a3875c5 into developNov 26, 2025
78 checks passed
@onurtemizkan
onurtemizkan deleted the onur/remix-parameterized-routes branch November 26, 2025 13:42
Doridian pushed a commit to foxCaves/foxCaves that referenced this pull request Dec 3, 2025
This PR contains the following updates:
| Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) |
|---|---|---|---|
| [@sentry/react](https://github.com/getsentry/sentry-javascript/tree/master/packages/react) ([source](https://github.com/getsentry/sentry-javascript)) | [`10.27.0` -> `10.28.0`](https://renovatebot.com/diffs/npm/@sentry%2freact/10.27.0/10.28.0) | ![age](https://developer.mend.io/api/mc/badges/age/npm/@sentry%2freact/10.28.0?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@sentry%2freact/10.27.0/10.28.0?slim=true) |
---
### Release Notes
<details>
<summary>getsentry/sentry-javascript (@&#8203;sentry/react)</summary>
### [`v10.28.0`](https://github.com/getsentry/sentry-javascript/releases/tag/10.28.0)
[Compare Source](getsentry/sentry-javascript@10.27.0...10.28.0)
##### Important Changes
- **feat(core): Make `matcher` parameter optional in `makeMultiplexedTransport` ([#&#8203;10798](getsentry/sentry-javascript#10798
The `matcher` parameter in `makeMultiplexedTransport` is now optional with a sensible default. This makes it much easier to use the multiplexed transport for sending events to multiple DSNs based on runtime configuration.
**Before:**
```javascript
import { makeFetchTransport, makeMultiplexedTransport } from '@&#8203;sentry/browser';
const EXTRA_KEY = 'ROUTE_TO';
const transport = makeMultiplexedTransport(makeFetchTransport, args => {
const event = args.getEvent();
if (event?.extra?.[EXTRA_KEY] && Array.isArray(event.extra[EXTRA_KEY])) {
return event.extra[EXTRA_KEY];
}
return [];
});
Sentry.init({
transport,
// ... other options
});
// Capture events with routing info
Sentry.captureException(error, {
extra: {
[EXTRA_KEY]: [
{ dsn: 'https://key1@&#8203;sentry.io/project1', release: 'v1.0.0' },
{ dsn: 'https://key2@&#8203;sentry.io/project2' },
],
},
});
```
**After:**
```javascript
import { makeFetchTransport, makeMultiplexedTransport, MULTIPLEXED_TRANSPORT_EXTRA_KEY } from '@&#8203;sentry/browser';
// Just pass the transport generator - the default matcher handles the rest!
Sentry.init({
transport: makeMultiplexedTransport(makeFetchTransport),
// ... other options
});
// Capture events with routing info using the exported constant
Sentry.captureException(error, {
extra: {
[MULTIPLEXED_TRANSPORT_EXTRA_KEY]: [
{ dsn: 'https://key1@&#8203;sentry.io/project1', release: 'v1.0.0' },
{ dsn: 'https://key2@&#8203;sentry.io/project2' },
],
},
});
```
The default matcher looks for routing information in `event.extra[MULTIPLEXED_TRANSPORT_EXTRA_KEY]`. You can still provide a custom matcher function for advanced use cases.
- **feat(nextjs): Support cacheComponents on turbopack ([#&#8203;18304](getsentry/sentry-javascript#18304
This release adds support for `cacheComponents` on turbopack builds. We are working on adding support for this feature in webpack builds as well.
##### Other Changes
- feat: Publish AWS Lambda Layer for Node 24 ([#&#8203;18327](getsentry/sentry-javascript#18327))
- feat(browser): Expose langchain instrumentation ([#&#8203;18342](getsentry/sentry-javascript#18342))
- feat(browser): Expose langgraph instrumentation ([#&#8203;18345](getsentry/sentry-javascript#18345))
- feat(cloudflare): Allow specifying a custom fetch in Cloudflare transport options ([#&#8203;18335](getsentry/sentry-javascript#18335))
- feat(core): Add `isolateTrace` option to `Sentry.withMonitor()` ([#&#8203;18079](getsentry/sentry-javascript#18079))
- feat(deps): bump [@&#8203;sentry/webpack-plugin](https://github.com/sentry/webpack-plugin) from 4.3.0 to 4.6.1 ([#&#8203;18272](getsentry/sentry-javascript#18272))
- feat(nextjs): Add cloudflare `waitUntil` detection ([#&#8203;18336](getsentry/sentry-javascript#18336))
- feat(node): Add LangChain v1 support ([#&#8203;18306](getsentry/sentry-javascript#18306))
- feat(remix): Add parameterized transaction naming for routes ([#&#8203;17951](getsentry/sentry-javascript#17951))
- fix(cloudflare): Keep http root span alive until streaming responses are consumed ([#&#8203;18087](getsentry/sentry-javascript#18087))
- fix(cloudflare): Wait for async events to finish ([#&#8203;18334](getsentry/sentry-javascript#18334))
- fix(core): `continueTrace` doesn't propagate given trace ID if active span exists ([#&#8203;18328](getsentry/sentry-javascript#18328))
- fix(node-core): Handle custom scope in log messages without parameters ([#&#8203;18322](getsentry/sentry-javascript#18322))
- fix(opentelemetry): Ensure Sentry spans don't leak when tracing is disabled ([#&#8203;18337](getsentry/sentry-javascript#18337))
- fix(react-router): Use underscores in trace origin values ([#&#8203;18351](getsentry/sentry-javascript#18351))
- chore(tanstackstart-react): Export custom inits from tanstackstart-react ([#&#8203;18369](getsentry/sentry-javascript#18369))
- chore(tanstackstart-react)!: Remove empty placeholder implementations ([#&#8203;18338](getsentry/sentry-javascript#18338))
<details>
<summary><strong>Internal Changes</strong></summary>
- chore: Allow URLs as issue ([#&#8203;18372](getsentry/sentry-javascript#18372))
- chore(changelog): Add entry for [#&#8203;18304](getsentry/sentry-javascript#18304) ([#&#8203;18329](getsentry/sentry-javascript#18329))
- chore(ci): Add action to track all PRs as issues ([#&#8203;18363](getsentry/sentry-javascript#18363))
- chore(github): Adjust `BUGBOT.md` rules to flag invalid op and origin values during review ([#&#8203;18352](getsentry/sentry-javascript#18352))
- ci: Add action to create issue on gitflow merge conflicts ([#&#8203;18319](getsentry/sentry-javascript#18319))
- ci(deps): bump actions/checkout from 5 to 6 ([#&#8203;18268](getsentry/sentry-javascript#18268))
- ci(deps): bump peter-evans/create-pull-request from 7.0.8 to 7.0.9 ([#&#8203;18361](getsentry/sentry-javascript#18361))
- test(cloudflare): Add typechecks for cloudflare-worker e2e test ([#&#8203;18321](getsentry/sentry-javascript#18321))
</details>
#### Bundle size 📦
| Path | Size |
| ----------------------------------------------------------------------------------------------------- | --------- |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) | 24.22 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) - with treeshaking flags | 22.76 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing) | 40.57 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Profiling) | 45.05 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay) | 78.08 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay) - with treeshaking flags | 68.05 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay with Canvas) | 82.65 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Tracing, Replay, Feedback) | 94.61 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. Feedback) | 40.51 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. sendFeedback) | 28.8 KB |
| [@&#8203;sentry/browser](https://github.com/sentry/browser) (incl. FeedbackAsync) | 33.66 KB |
| [@&#8203;sentry/react](https://github.com/sentry/react) | 25.9 KB |
| [@&#8203;sentry/react](https://github.com/sentry/react) (incl. Tracing) | 42.72 KB |
| [@&#8203;sentry/vue](https://github.com/sentry/vue) | 28.56 KB |
| [@&#8203;sentry/vue](https://github.com/sentry/vue) (incl. Tracing) | 42.32 KB |
| [@&#8203;sentry/svelte](https://github.com/sentry/svelte) | 24.24 KB |
| CDN Bundle | 26.57 KB |
| CDN Bundle (incl. Tracing) | 41.22 KB |
| CDN Bundle (incl. Tracing, Replay) | 76.9 KB |
| CDN Bundle (incl. Tracing, Replay, Feedback) | 82.23 KB |
| CDN Bundle - uncompressed | 78.09 KB |
| CDN Bundle (incl. Tracing) - uncompressed | 122.4 KB |
| CDN Bundle (incl. Tracing, Replay) - uncompressed | 235.71 KB |
| CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed | 248.17 KB |
| [@&#8203;sentry/nextjs](https://github.com/sentry/nextjs) (client) | 44.88 KB |
| [@&#8203;sentry/sveltekit](https://github.com/sentry/sveltekit) (client) | 40.92 KB |
| [@&#8203;sentry/node-core](https://github.com/sentry/node-core) | 50.06 KB |
| [@&#8203;sentry/node](https://github.com/sentry/node) | 155.7 KB |
| [@&#8203;sentry/node](https://github.com/sentry/node) - without tracing | 90.67 KB |
| [@&#8203;sentry/aws-serverless](https://github.com/sentry/aws-serverless) | 105.61 KB |
</details>
---
### Configuration
📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).
🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.
♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 **Ignore**: Close this PR and you won't be reminded about this update again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box
---
This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi4yNy4xIiwidXBkYXRlZEluVmVyIjoiNDIuMjcuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->
Reviewed-on: https://git.foxden.network/foxCaves/foxCaves/pulls/12
Co-authored-by: Renovate <renovate@foxden.network>
Co-committed-by: Renovate <renovate@foxden.network>
Sign up for freeto 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.

Implement parametrized routes for Remix Client

2 participants

@onurtemizkan@chargome