Skip to content

fix(router-core): model error component props as unknown#7868

Open
leesb971204 wants to merge 1 commit into
TanStack:mainfrom
leesb971204:fix/error-component-props-unknown
Open

fix(router-core): model error component props as unknown#7868
leesb971204 wants to merge 1 commit into
TanStack:mainfrom
leesb971204:fix/error-component-props-unknown

Conversation

@leesb971204

@leesb971204 leesb971204 commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

fixes #7788

Summary by CodeRabbit

  • Bug Fixes

    • Error components now safely handle any thrown value, including non-Error values, instead of assuming an error message is always available.
    • Error handling is more consistent across React, Solid, Vue, server-rendered, and client-rendered applications.
  • Documentation

    • Updated API guides and examples to demonstrate narrowing unknown errors before accessing properties such as message or stack.
  • Type Improvements

    • Updated the error component contract so its error prop is typed as unknown, encouraging safer error handling.

Signed-off-by: leesb971204 <leesb971204@gmail.com>
@coderabbitai

coderabbitai Bot commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

The public ErrorComponentProps.error type changes from Error to unknown, removing its unused generic parameter. React, Solid, and Vue implementations, tests, examples, and documentation now narrow errors before accessing error-specific properties.

Changes

Unknown error component contract

Layer / File(s) Summary
Contract and runtime propagation
packages/router-core/src/route.ts, packages/react-router/src/Match.tsx, packages/vue-router/src/*, .changeset/*
ErrorComponentProps.error is now unknown; React passes route errors directly, and Vue uses the shared contract without object validation.
Framework error rendering
packages/react-router/tests/*, packages/solid-router/tests/*, packages/vue-router/src/*, packages/vue-router/tests/*
Error components and test renderers narrow Error values before reading message, name, or stack, with string fallbacks where applicable.
Type and runtime validation
packages/react-router/tests/errorComponent.test-d.tsx, packages/solid-router/tests/errorComponent.test-d.tsx, packages/vue-router/tests/errorComponent.test-d.tsx, packages/*/tests/router.test.tsx
Type tests require narrowing before property access, and search-parameter tests capture errors as unknown before domain-specific assertions.
Documentation examples
docs/router/**, docs/start/framework/react/guide/server-components.md
Error-component API descriptions and examples document unknown values and use instanceof Error with String fallbacks.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

  • TanStack/router#7812: Updates the same invalidation-transition error test area with related regression coverage.

Suggested labels: package: router-core, package: react-router, package: vue-router

Suggested reviewers: sheraff

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 12.50% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely summarizes the main change: modeling router-core error component props as unknown.
Linked Issues check ✅ Passed The PR satisfies #7788 by widening error props to unknown, updating React/Solid/Vue contracts, adding type tests, keeping runtime coverage, and refreshing docs.
Out of Scope Changes check ✅ Passed The changes stay within the issue scope; the added docs, tests, and Vue runtime validator update all support the error-prop type change.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/vue-router/src/CatchBoundary.tsx`:
- Line 108: Update the error fallback in CatchBoundary to render
String(props.error) so thrown strings and numbers retain their messages, and
change the error prop declaration from null to unknown to preserve the correct
prop type.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 26e887ec-6a28-4ea4-ba22-076d074647e5

📥 Commits

Reviewing files that changed from the base of the PR and between edf5575 and 6db6d2c.

📒 Files selected for processing (27)
  • .changeset/error-component-props-unknown.md
  • docs/router/api/router/errorComponentComponent.md
  • docs/router/guide/data-loading.md
  • docs/router/guide/external-data-loading.md
  • docs/router/how-to/setup-testing.md
  • docs/router/how-to/use-environment-variables.md
  • docs/router/how-to/validate-search-params.md
  • docs/start/framework/react/guide/server-components.md
  • packages/react-router/src/Match.tsx
  • packages/react-router/tests/errorComponent.test-d.tsx
  • packages/react-router/tests/errorComponent.test.tsx
  • packages/react-router/tests/issue-7638-invalidate-transition-error.test.tsx
  • packages/react-router/tests/lazy/error.tsx
  • packages/react-router/tests/loaders.test.tsx
  • packages/react-router/tests/router.test.tsx
  • packages/router-core/src/route.ts
  • packages/solid-router/tests/errorComponent.test-d.tsx
  • packages/solid-router/tests/errorComponent.test.tsx
  • packages/solid-router/tests/link.test.tsx
  • packages/solid-router/tests/router.test.tsx
  • packages/solid-router/tests/server/errorComponent.test.tsx
  • packages/vue-router/src/CatchBoundary.tsx
  • packages/vue-router/src/Matches.tsx
  • packages/vue-router/tests/errorComponent.test-d.tsx
  • packages/vue-router/tests/errorComponent.test.tsx
  • packages/vue-router/tests/link.test.tsx
  • packages/vue-router/tests/router.test.tsx

name: 'ErrorComponent',
props: {
error: Object,
error: null,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -eu

rg -n 'error:\s*null|props\.error\?\.message|String\(props\.error\)' \
  packages/vue-router/src/CatchBoundary.tsx \
  packages/vue-router/src/Matches.tsx

rg -n 'InferPropType|extends \[null\]' . \
  --glob '*vue*.d.ts' \
  --glob '*.d.ts' || true

Repository: TanStack/router

Length of output: 369


🏁 Script executed:

#!/bin/bash
set -eu

sed -n '1,240p' packages/vue-router/src/CatchBoundary.tsx
printf '\n--- Matches ---\n'
sed -n '1,180p' packages/vue-router/src/Matches.tsx

Repository: TanStack/router

Length of output: 10611


🏁 Script executed:

#!/bin/bash
set -eu

python3 - <<'PY'
from pathlib import Path
for path in [
    Path('packages/vue-router/src/CatchBoundary.tsx'),
    Path('packages/vue-router/src/Matches.tsx'),
]:
    print(f"\n## {path}\n")
    for i, line in enumerate(path.read_text().splitlines(), 1):
        if 90 <= i <= 175:
            print(f"{i:4}: {line}")
PY

Repository: TanStack/router

Length of output: 6339


Render non-Error throws instead of dropping their message. props.error?.message hides thrown strings and numbers, and error: null weakens the prop type. Switch the fallback to String(props.error) and keep the prop typed as unknown.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/vue-router/src/CatchBoundary.tsx` at line 108, Update the error
fallback in CatchBoundary to render String(props.error) so thrown strings and
numbers retain their messages, and change the error prop declaration from null
to unknown to preserve the correct prop type.

@leesb971204

Copy link
Copy Markdown
Contributor Author

@LadyBluenotes
can you please review this?

@LadyBluenotes

Copy link
Copy Markdown
Member

@LadyBluenotes

can you please review this?

Someone will review it when they've got the time. Please be patient

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.

fix(router-core): model error component props as unknown

2 participants