Skip to content

componentStack is not available to errorComponent or defaultErrorComponent #2512

@absassi

Description

@absassi

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions