How to disable or pass through Tanstack Router error boundary

70 Views Asked by At

Tanstack router has a built-in error boundary which I've discovered you can customize by setting the defaultErrorComponent prop in the provider component. However, rather than customizing this component, I want to disable it entirely, or at least pass the error up the component tree to another boundary that I define. I tried simply re-throwing the error, but this seems to have no effect:

import { RouterProvider as TSRouteProvider } from '@tanstack/react-router';
import { FC } from 'react';
import router from './';
import useApp from '../hooks/use-app.hook';
import Loader from '../components/loader';

const RouteProvider: FC = () => {
  const { loadState } = useApp();

  if (loadState !== 'loaded') {
    return <Loader />;
  }

  return <TSRouteProvider router={router} defaultErrorComponent={PassThruError} />;
};

const PassThruError: FC = ({ error }: { error: Error }) => {
  // this does not seem to work: 
  throw error; 
  return <></>;
};

export default RouteProvider;

Is it possible to disable Tanstack's error boundary, or pass through it? I don't want to use any of Tanstack's error handling, I simply want to hand everything over to my own error boundary further up the component tree.

0

There are 0 best solutions below