TanStack / TanStack/router

`defaultErrorComponent` default does not behave as expected

Open
#2,336 1 comment 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Which project does this relate to?

Router

Describe the bug

According to the docs/jsdoc, defaultErrorComponent defaults to ErrorComponent, but it doesn't behave as if ErrorComponent is set.

const router = createRouter({
  routeTree,
  defaultErrorComponent: ErrorComponent
});
Your Example Website or App

https://stackblitz.com/edit/github-svg4st?file=src%2Fmain.tsx,src%2Froutes%2Findex.tsx

Steps to Reproduce the Bug or Issue
  1. Click on the Crash the page button
  2. Notice that the outlet renders the error component
  3. Comment out the defaultErrorComponent line in main.tsx
  4. Crash the page again
  5. Notice that the whole page is now replaced with the error component, the navigation links are gone
Expected behavior

defaultErrorComponent should behave as documented, i.e. it should behave as if ErrorComponent is set.
In comparison, defaultNotFoundComponent works as expected in either case. 👍

Screenshots or Videos

Image
Image

Platform
  • OS: Windows
  • Browser: Chrome
  • Version: 1.57.13
Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the createRouter configuration in main.tsx and the error behavior shown by routes/index.tsx. Compare the documented defaultErrorComponent behavior with explicitly setting ErrorComponent, using the linked StackBlitz reproduction. Done means crashing the page preserves the navigation links and renders the same error component in both configurations.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.