sentry-javascript: [React Router] Transaction unexpectedly ended early, cancelling spans from componentDidMount()

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 package are you using?

@sentry/react

SDK Version

7.17.3 - but tested on 7.23.0 with same result

Framework Version

17.0.2 (react-router-dom: 6.4.3)

Link to Sentry event

https://sentry.io/organizations/testorg-az/performance/application-monitoring-javascript:755fa61c341044a19a38b718efff2b35/?project=5808623&query=sdk.version%3A7.17.3&referrer=performance-transaction-summary&statsPeriod=30d&transaction=%2Fproducts&unselectedSeries=p100()

Steps to Reproduce

1. Examine our project’s SDK configuration index.js#L60-65 and index.js#L104 0.1 Examine code that initiates span that gets cut short before it finishes: Products.js#L39 - called from componentDidMount()
2. Go to https://application-monitoring-react-dot-sales-engineering-sf.appspot.com/products
3. Open devtools
4. (optional) set breakpoint in idletransaction.tx - will eventually point you to reactrouterv6.tsx: handleNavigation() and _useEffect()
5. Reload page
6. Inspect console log (Debug level)
7. Get transaction ID from Network tab and plug into search in /products transaction of this project

• Internal ticket: https://getsentry.atlassian.net/browse/FEEDBACK-1679

Expected Result

Transaction runs its course and does not finish prematurely before http.client span (GET https://…/products) is complete.

Actual Result

• Logs show “[Tracing] cancelling span since transaction ended early”
• In Sentry UI the last http.client span (GET https://…/products) of the transaction is cut short even though corresponding backend transaction is ~ 2 seconds.