Skip to content

Conversation

@stevan-borus
Copy link

Description

Summary: convertBigIntToString in packages/react-router-devtools/src/shared/bigint-util.ts recurses over loader/route data with no depth limit or cycle detection. When loader data is very deep (e.g. TanStack Query dehydratedState with many pages of posts) or contains circular references, the function blows the call stack and the devtools crash with "RangeError: Maximum call stack size exceeded" in the RouteSegmentInfo component.

This change adds an optional max depth (and cycle detection via a WeakSet) so that deep or cyclic structures are truncated with placeholders instead of causing infinite recursion. The serialized output for display remains bounded and the devtools no longer crash on routes that return heavy loader data.

Motivation: Routes that return dehydrate(queryClient) and/or Promises (e.g. pages with prefetched infinite queries) were causing the devtools to crash when opening the Routes tab. The fix keeps the existing behavior for normal payloads and only limits recursion for problematic ones.

Dependencies: None. Change is confined to shared/bigint-util.ts (and call sites if you added an options argument).


Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

  • Reproduced the crash by opening a React Router app route whose loader returns data containing TanStack Query dehydratedState with a large infinite-query cache and/or circular references.
  • With the fix, the same route loads without crashing; the Routes tab shows loader data with deep/cyclic parts replaced by placeholders (e.g. "[Max depth reached]" / "[Circular]").
  • Verified that routes with small, acyclic loader data still serialize and display as before.

Repro (before fix): Use a loader that returns dehydrate(queryClient) including a heavy infinite query. Open that route with React Router devtools visible; the RouteSegmentInfo component crashes with "Maximum call stack size exceeded".

  • Unit tests (if the repo has tests for bigint-util.ts, add a test that deep/cyclic input is truncated and does not throw)

Checklist:

  • My code follows the guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings or errors
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules

Sign up for free to 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