Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

componentStack is not available to errorComponent or defaultErrorComponent #2512

Closed
absassi opened this issue Oct 11, 2024 · 2 comments
Closed

Comments

@absassi
Copy link

absassi commented Oct 11, 2024

Which project does this relate to?

Router

Describe the bug

Even though info?: { componentStack: string; } appears in ErrorComponentProps, it is never passed to the error component.
The error info with the component stack is captured though, as it is logged to the console as warning and it is passed to onCatch and defaultOnCatch.

Your Example Website or App

https://stackblitz.com/edit/github-ktjn1n-i4bu1m?file=src%2Fmain.tsx,src%2Froutes%2Fabout.tsx

Steps to Reproduce the Bug or Issue

  1. Create an error component that attempts to render the component stack:
function CustomErrorComponent({ error, info }: ErrorComponentProps) {
  return (
    <div>
      <p>{error.message}</p>
      <div>
        <b>Stack:</b>
        <pre>{error.stack}</pre>
      </div>
      <div>
        <b>Component stack:</b>
        <pre>{info?.componentStack}</pre>
      </div>
    </div>
  );
}
  1. Register it as defaultErrorComponent:
const router = createRouter({ routeTree, defaultErrorComponent: CustomErrorComponent });
  1. Throw an error in some route.
  2. Navigate to that route and see that the component stack is undefined.

In the linked MCVE example, the about route is throwing an error. Opening the link and navigating to the About page will reproduce this.

Expected behavior

The same errorInfo with the component stack that is passed to onCatch as its second parameter would also be passed to the error component in the info prop.

Screenshots or Videos

No response

Platform

  • OS: WSL
  • Browser: Edge
  • Version: 1.64.0

Additional context

No response

@SeanCassiere SeanCassiere added the bug Something isn't working label Oct 12, 2024
@schiller-manuel
Copy link
Contributor

Since setting state in componentDidCatch is deprecated, we cannot do much here, as getDerivedStateFromError does not expose errorInfo
https://react.dev/reference/react/Component#componentdidcatch-caveats

The best "solution" would probably be to remove errorInfo from ErrorComponentProps

@schiller-manuel schiller-manuel removed the bug Something isn't working label Oct 21, 2024
@SeanCassiere
Copy link
Member

SeanCassiere commented Oct 26, 2024

Added this removal of errorInfo onto the v2 checklist.
#975

Closing this for now.

@SeanCassiere SeanCassiere closed this as not planned Won't fix, can't repro, duplicate, stale Oct 26, 2024
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

No branches or pull requests

3 participants