[Feature]: Expose errorInfo from the ErrorBoundary

[marvinroger]

What is the new or updated feature that you are suggesting?

A React ErrorBoundary componentDidCatch exposes two things:

• error, which is the thrown error
• info, "An object with a componentStack key containing information about which component threw the error"

My understanding is that React Router implements an ErrorBoundary and forwards the error to errorElement, which can get the error by using useRouterError. However, only the error is accessible, not the info.

My feature request is the following: being able to access, from within the errorElement, to the info.
I understand that getDerivedStateFromError does not expose info, so it might tricky to access it from the errorElement. In this case, an onError(error, info) callback on RouterProvider might also be a solution?

Why should this feature be included?

Currently, we lose this info and, to my knowledge, there's no way to get it back, as we cannot create our own React ErrorBoundary, given the React Router one takes precedence. Am I wrong?

[ha404]

I'm having issue not able to wrap a specific component with a custom ErrorBoundary :(

[abetoots]

Having the same issue. Would be great to have access to the componentStack

[brophdawg11]

Duplicate proposal closed in favor of this one: #11206

[brophdawg11]

I understand that getDerivedStateFromError does not expose info, so it might tricky to access it from the errorElement. In this case, an onError(error, info) callback on RouterProvider might also be a solution?

Yeah this is where we've landed in our discussions around this, I think we'll be looking into landing some form of API to let you log this information out/send it to Sentry, etc. - but you won't have it in the ErrorBoundary via useRouteError for 2 reasons:

• Logging is the documented purpose of componentDidCatch:
  • "this lets you log that error to an error reporting service in production"
• Setting state is deprecated in componentDidCatch
  • "In the past, it was common to call setState inside componentDidCatch in order to update the UI and display the fallback error message. This is deprecated in favor of defining static getDerivedStateFromError."

Changes are this will basically be a client-side version of the Remix handleError API for logging out error son the server.

[Tasin5541]

This would render components exposed through various analytics libraries useless and require users to basically build the same thing manually through the callback approach.

[wizardlyhel]

We have similar request but it's more around how to surface the partial failed deferred promise errors. For example, I have the following loader:

export async function loader() {
  return {
    promise1: new Promise((resolve, reject) => setTimeout(() => {
      resolve('stuff');
    }, 1000)),
    promise2: new Promise((resolve, reject) => setTimeout(() => {
      reject(new Response('failed', {status: 404}));
    }, 3000)),
  };
}

It is intentional that I reject a promise with Response. This caused the .data payload to return a SanitizedError message.

However, there is no way to know that a failed deferred promise happened unless we <Await> on the failed promise and defined an errorElement on the <Await> component and manually log out an error .. and even if we did, in this case, a SanitizedError would make no sense.

So maybe ... a hook to log a failed deferred promise on the server-side, with information about a deferred Promise has returned a Response - which is not a proper data format. This is just for this specific example. But it would be nice to know why a deferred promise failed instead of going silent.