') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); feat(react-router): Add otel instrumentation for server requests by chargome · Pull Request #16147 · getsentry/sentry-javascript · GitHub
Skip to content

feat(react-router): Add otel instrumentation for server requests - #16147

Merged
chargome merged 16 commits into
developfrom
cg-rr-server-loaders
May 14, 2025
Merged

feat(react-router): Add otel instrumentation for server requests#16147
chargome merged 16 commits into
developfrom
cg-rr-server-loaders

Conversation

@chargome

@chargomechargome commented Apr 28, 2025

Copy link
Copy Markdown
Member

This PR adds OpenTelemetry instrumentation for server-side requests in React Router by tracing server requests for data loaders and actions.

@chargomechargome self-assigned this Apr 28, 2025
@chargome

chargome commented Apr 29, 2025

Copy link
Copy Markdown
MemberAuthor

Potentially blocked by #16160
good to go

@chargome
chargome marked this pull request as ready for review May 12, 2025 14:57

// Set the source and overwrite attributes on the root span to ensure the transaction name
// is derived from the raw URL pathname rather than any parameterized route that may be set later
// TODO: try to set derived parameterized route from build here (args[0])

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

want to ship this in a follow-up

Comment threadpackages/react-router/src/server/instrumentation/reactRouter.ts Outdated
Comment threadpackages/react-router/src/server/instrumentation/reactRouter.ts Outdated
Comment threadpackages/react-router/src/server/sdk.ts Outdated

@andreiborzaandreiborza left a comment

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.

🚀

@chargome
chargome merged commit 26731ed into developMay 14, 2025
@chargome
chargome deleted the cg-rr-server-loaders branch May 14, 2025 08:07
mergifyBot added a commit to reisene/HulajDusza-serwis that referenced this pull request Jun 9, 2025
![snyk-io[bot]](https://badgen.net/badge/icon/snyk-io%5Bbot%5D/green?label=)
![Contributor](https://badgen.net/badge/icon/Contributor/000000?label=)
[<img width="16" alt="Powered by Pull Request Badge"
src="https://user-images.githubusercontent.com/1393946/111216524-d2bb8e00-85d4-11eb-821b-ed4c00989c02.png">](https://pullrequestbadge.com/?utm_medium=github&utm_source=reisene&utm_campaign=badge_info)<!--
PR-BADGE: PLEASE DO NOT REMOVE THIS COMMENT -->
![snyk-top-banner](https://res.cloudinary.com/snyk/image/upload/r-d/scm-platform/snyk-pull-requests/pr-banner-default.svg)
<h3>Snyk has created this PR to upgrade @sentry/browser from 9.17.0 to
9.19.0.</h3>
:information_source: Keep your dependencies up-to-date. This makes it
easier to fix existing vulnerabilities and to more quickly identify and
fix newly disclosed vulnerabilities when they affect your project.
<hr/>
- The recommended version is **2 versions** ahead of your current
version.
- The recommended version was released **22 days ago**.
<details>
<summary><b>Release notes</b></summary>
<br/>
<details>
<summary>Package name: <b>@sentry/browser</b></summary>
<ul>
<li>
<b>9.19.0</b> - <a
href="https://redirect.github.com/getsentry/sentry-javascript/releases/tag/9.19.0">2025-05-14</a></br><ul>
<li>feat(react-router): Add otel instrumentation for server requests (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16147"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16147/hovercard">#16147</a>)</li>
<li>feat(remix): Vendor in
<code>opentelemetry-instrumentation-remix</code> (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16145"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16145/hovercard">#16145</a>)</li>
<li>fix(browser): Ensure spans auto-ended for navigations have
<code>cancelled</code> reason (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16277"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16277/hovercard">#16277</a>)</li>
<li>fix(node): Pin <code>@ fastify/otel</code> fork to direct url to
allow installing without git (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16287"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16287/hovercard">#16287</a>)</li>
<li>fix(react): Handle nested parameterized routes in reactrouterv3
transaction normalization (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16274"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16274/hovercard">#16274</a>)</li>
</ul>
<p>Work in this release was contributed by <a class="user-mention
notranslate" data-hovercard-type="user"
data-hovercard-url="/users/sidx1024/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/sidx1024">@ sidx1024</a>. Thank you
for your contribution!</p>
<h2>Bundle size 📦</h2>
<table>
<thead>
<tr>
<th>Path</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>@ sentry/browser</td>
<td>23.4 KB</td>
</tr>
<tr>
<td>@ sentry/browser - with treeshaking flags</td>
<td>23.06 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing)</td>
<td>37.31 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing, Replay)</td>
<td>74.53 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing, Replay) - with treeshaking
flags</td>
<td>67.72 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing, Replay with Canvas)</td>
<td>79.19 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing, Replay, Feedback)</td>
<td>91 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Feedback)</td>
<td>39.8 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. sendFeedback)</td>
<td>28.03 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. FeedbackAsync)</td>
<td>32.79 KB</td>
</tr>
<tr>
<td>@ sentry/react</td>
<td>25.17 KB</td>
</tr>
<tr>
<td>@ sentry/react (incl. Tracing)</td>
<td>39.27 KB</td>
</tr>
<tr>
<td>@ sentry/vue</td>
<td>27.67 KB</td>
</tr>
<tr>
<td>@ sentry/vue (incl. Tracing)</td>
<td>39.07 KB</td>
</tr>
<tr>
<td>@ sentry/svelte</td>
<td>23.43 KB</td>
</tr>
<tr>
<td>CDN Bundle</td>
<td>24.58 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing)</td>
<td>37.33 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing, Replay)</td>
<td>72.37 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing, Replay, Feedback)</td>
<td>77.68 KB</td>
</tr>
<tr>
<td>CDN Bundle - uncompressed</td>
<td>71.72 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing) - uncompressed</td>
<td>110.5 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing, Replay) - uncompressed</td>
<td>221.78 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed</td>
<td>234.31 KB</td>
</tr>
<tr>
<td>@ sentry/nextjs (client)</td>
<td>40.88 KB</td>
</tr>
<tr>
<td>@ sentry/sveltekit (client)</td>
<td>37.77 KB</td>
</tr>
<tr>
<td>@ sentry/node</td>
<td>154.29 KB</td>
</tr>
<tr>
<td>@ sentry/node - without tracing</td>
<td>95.6 KB</td>
</tr>
<tr>
<td>@ sentry/aws-serverless</td>
<td>120.36 KB</td>
</tr>
</tbody>
</table>
</li>
<li>
<b>9.18.0</b> - <a
href="https://redirect.github.com/getsentry/sentry-javascript/releases/tag/9.18.0">2025-05-13</a></br><h3>Important
changes</h3>
<ul>
<li><strong>feat: Support Node 24 (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16236"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16236/hovercard">#16236</a>)</strong></li>
</ul>
<p>We now also publish profiling binaries for Node 24.</p>
<h3>Other changes</h3>
<ul>
<li>deps(node): Bump <code>import-in-the-middle</code> to
<code>1.13.1</code> (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16260"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16260/hovercard">#16260</a>)</li>
<li>feat: Export <code>consoleLoggingIntegration</code> from vercel edge
sdk (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16228"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16228/hovercard">#16228</a>)</li>
<li>feat(cloudflare): Add support for email, queue, and tail handler (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16233"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16233/hovercard">#16233</a>)</li>
<li>feat(cloudflare): Improve http span data (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16232"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16232/hovercard">#16232</a>)</li>
<li>feat(nextjs): Add more attributes for generation functions (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16214"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16214/hovercard">#16214</a>)</li>
<li>feat(opentelemetry): Widen peer dependencies to support Otel v2 (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16246"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16246/hovercard">#16246</a>)</li>
<li>fix(core): Gracefully handle invalid baggage entries (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16257"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16257/hovercard">#16257</a>)</li>
<li>fix(node): Ensure traces are propagated without spans in Node 22+
(<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16221"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16221/hovercard">#16221</a>)</li>
<li>fix(node): Use sentry forked <code>@ fastify/otel</code> dependency
with pinned Otel v1 deps (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16256"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16256/hovercard">#16256</a>)</li>
<li>fix(remix): Remove vendored types (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16218"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16218/hovercard">#16218</a>)</li>
</ul>
<h2>Bundle size 📦</h2>
<table>
<thead>
<tr>
<th>Path</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>@ sentry/browser</td>
<td>23.4 KB</td>
</tr>
<tr>
<td>@ sentry/browser - with treeshaking flags</td>
<td>23.22 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing)</td>
<td>37.3 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing, Replay)</td>
<td>74.53 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing, Replay) - with treeshaking
flags</td>
<td>68.37 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing, Replay with Canvas)</td>
<td>79.18 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing, Replay, Feedback)</td>
<td>90.99 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Feedback)</td>
<td>39.8 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. sendFeedback)</td>
<td>28.03 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. FeedbackAsync)</td>
<td>32.79 KB</td>
</tr>
<tr>
<td>@ sentry/react</td>
<td>25.17 KB</td>
</tr>
<tr>
<td>@ sentry/react (incl. Tracing)</td>
<td>39.26 KB</td>
</tr>
<tr>
<td>@ sentry/vue</td>
<td>27.67 KB</td>
</tr>
<tr>
<td>@ sentry/vue (incl. Tracing)</td>
<td>39.06 KB</td>
</tr>
<tr>
<td>@ sentry/svelte</td>
<td>23.43 KB</td>
</tr>
<tr>
<td>CDN Bundle</td>
<td>24.58 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing)</td>
<td>37.33 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing, Replay)</td>
<td>72.37 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing, Replay, Feedback)</td>
<td>77.67 KB</td>
</tr>
<tr>
<td>CDN Bundle - uncompressed</td>
<td>71.72 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing) - uncompressed</td>
<td>110.46 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing, Replay) - uncompressed</td>
<td>221.75 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed</td>
<td>234.27 KB</td>
</tr>
<tr>
<td>@ sentry/nextjs (client)</td>
<td>40.88 KB</td>
</tr>
<tr>
<td>@ sentry/sveltekit (client)</td>
<td>37.76 KB</td>
</tr>
<tr>
<td>@ sentry/node</td>
<td>155.42 KB</td>
</tr>
<tr>
<td>@ sentry/node - without tracing</td>
<td>96 KB</td>
</tr>
<tr>
<td>@ sentry/aws-serverless</td>
<td>121.5 KB</td>
</tr>
</tbody>
</table>
</li>
<li>
<b>9.17.0</b> - 2025-05-08
</li>
</ul>
from <a
href="https://redirect.github.com/getsentry/sentry-javascript/releases">@sentry/browser
GitHub release notes</a>
</details>
</details>
---
> [!IMPORTANT]
>
> - Check the changes in this PR to ensure they won't cause issues with
your project.
> - This PR was automatically created by Snyk using the credentials of a
real user.
---
**Note:** _You are seeing this because you or someone else with access
to this repository has authorized Snyk to open upgrade PRs._
**For more information:** <img
src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiJhZGRlMzcwYy1hNTZkLTRmZjUtOWJhMC05N2Q3NTE4NmE5YmQiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6ImFkZGUzNzBjLWE1NmQtNGZmNS05YmEwLTk3ZDc1MTg2YTliZCJ9fQ=="
width="0" height="0"/>
> - 🧐 [View latest project
report](https://app.snyk.io/org/reisene/project/55e114f8-489e-4f14-b900-20574b041e59?utm_source&#x3D;github-cloud-app&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)
> - 📜 [Customise PR
templates](https://docs.snyk.io/scan-using-snyk/pull-requests/snyk-fix-pull-or-merge-requests/customize-pr-templates?utm_source=&utm_content=fix-pr-template)
> - 🛠 [Adjust upgrade PR
settings](https://app.snyk.io/org/reisene/project/55e114f8-489e-4f14-b900-20574b041e59/settings/integration?utm_source&#x3D;github-cloud-app&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)
> - 🔕 [Ignore this dependency or unsubscribe from future upgrade
PRs](https://app.snyk.io/org/reisene/project/55e114f8-489e-4f14-b900-20574b041e59/settings/integration?pkg&#x3D;@sentry/browser&amp;utm_source&#x3D;github-cloud-app&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr#auto-dep-upgrades)
[//]: #
'snyk:metadata:{"customTemplate":{"variablesUsed":[],"fieldsUsed":[]},"dependencies":[{"name":"@sentry/browser","from":"9.17.0","to":"9.19.0"}],"env":"prod","hasFixes":false,"isBreakingChange":false,"isMajorUpgrade":false,"issuesToFix":[],"prId":"adde370c-a56d-4ff5-9ba0-97d75186a9bd","prPublicId":"adde370c-a56d-4ff5-9ba0-97d75186a9bd","packageManager":"npm","priorityScoreList":[],"projectPublicId":"55e114f8-489e-4f14-b900-20574b041e59","projectUrl":"https://app.snyk.io/org/reisene/project/55e114f8-489e-4f14-b900-20574b041e59?utm_source=github-cloud-app&utm_medium=referral&page=upgrade-pr","prType":"upgrade","templateFieldSources":{"branchName":"default","commitMessage":"default","description":"default","title":"default"},"templateVariants":[],"type":"auto","upgrade":[],"upgradeInfo":{"versionsDiff":2,"publishedDate":"2025-05-14T12:07:24.206Z"},"vulns":[]}'
## Podsumowanie wygenerowane przez Sourcery
Build:
- Zaktualizowano wersję @sentry/browser w pliku package.json z 9.17.0 do
9.19.0
<details>
<summary>Original summary in English</summary>
## Summary by Sourcery
Build:
- Bump @sentry/browser version in package.json from 9.17.0 to 9.19.0
</details>
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.

2 participants

@chargome@andreiborza