Browser Tracing causing TanStack Router to be stuck in pending state after v1.98.3

[nikolovlazar]

ℹ️ Originally posted by @MTG2000 on TanStack Router's repo: TanStack/router#3277. Just resurfacing it here.

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

8.51.0

Framework Version

React 18.2.0

Link to Sentry event

No response

Reproduction Example/SDK Setup

StackBlitz by original author: https://stackblitz.com/edit/github-pp1nvw-hhnn1f54?file=src%2Fmain.tsx

Steps to Reproduce

1. Updated TanStack Router to v1.98.3
2. Routes stuck in pending state

Expected Result

Routing works

Actual Result

Routes stuck in pending state

[TkDodo]

I think router made a breaking change by making a previously always defined field optional here:

https://github.com/TanStack/router/pull/3191/files#diff-64427616e4d29617d5d71c4a67f2128314a368057c5faa14c8d98a46637787a8R12

-fromLocation: ParsedLocation
+fromLocation?: ParsedLocation

the sentry integration reads fromLocation.state here:

sentry-javascript/packages/react/src/tanstackrouter.ts

Line 68 in 9ce4ad1

if (onBeforeNavigateArgs.toLocation.state === onBeforeNavigateArgs.fromLocation.state) {

I think we can fix this on our end by adding optional chaining:

if (onBeforeNavigateArgs.toLocation.state === onBeforeNavigateArgs.fromLocation?.state) { 

and maybe update our dependencies to the latest router version to get the correct types. This should be backwards compatible, but we’d need to find all places where we access fromLocation