Core Web Vitals aren't reported when enabling Tanstack Router integration #18425
Description
Is there an existing issue for this?
- I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
- I have reviewed the documentation https://docs.sentry.io/
- I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases
How do you use Sentry?
Sentry Saas (sentry.io)
Which SDK are you using?
@sentry/react
SDK Version
10.29.0
Framework Version
React 19.2.0
Link to Sentry event
No response
Reproduction Example/SDK Setup
Sentry.init({
dsn: "https://3fc2dae8dcedfae62a6df7e42540440b@o4510449154457600.ingest.de.sentry.io/4510449155965008",
debug: true,
sendDefaultPii: true,
tracesSampleRate: 1.0,
integrations: [
Sentry.browserTracingIntegration(),
Sentry.tanstackRouterBrowserTracingIntegration(router)
],
});Steps to Reproduce
- Download the repo and install the dependencies
- Start the app by running:
npm run dev
Expected Result
All the Core Web Vitals reported on Sentry in the trace, including LCP and CLS.
Actual Result
Only TTFB (and FCP in certain cases are reported) are reported.
Additional Context
Note: Web vitals are correctly reported when disabling the tanstack integration.
After turning on debug mode, it appears that on initial page load the tanstack integration always stop the pageload root span to create a new navigation span. Based on my understanding of how custom routing should be implemented the tanstack router integration should preserving the ongoing pageload span to enable the browser tracing integration to attach the webvitals metrics.
Priority
React with 👍 to help prioritize this issue. Please use comments to provide useful context, avoiding +1 or me too, to help us triage it.
Metadata
Metadata
Assignees
Projects
Status