如何禁用或穿透Tanstack Router的错误边界？

Tanstack Router内置了错误边界，我发现可以通过在Provider组件中设置defaultErrorComponent属性来自定义它。但我不想自定义该组件，而是希望完全禁用它，或者至少将错误向上传递到组件树中我自己定义的其他错误边界。我尝试直接重新抛出错误，但似乎没有效果：

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 }) => {
  // 这种方式无效
  throw error; 
  return <></>;
};

export default RouteProvider;

请问是否可以禁用Tanstack的错误边界或实现错误穿透？我不想使用Tanstack的任何错误处理，只想将所有错误交由组件树中更上层的自定义错误边界处理。

解决方案 #

直接在PassThruError组件的渲染函数中抛错会被Tanstack Router的错误边界再次捕获，所以需要让错误脱离当前的渲染周期，这样就能向上冒泡到你上层的自定义错误边界。可以通过以下两种方式实现：

方法1：使用useEffect抛出错误 #

利用React的副作用钩子，在组件渲染完成后抛出错误：

import { useEffect, FC } from 'react';

const PassThruError: FC<{ error: Error }> = ({ error }) => {
  useEffect(() => {
    throw error;
  }, [error]);

  return null;
};

方法2：使用setTimeout延迟抛出错误 #

通过宏任务延迟抛出，让错误脱离当前错误边界的捕获范围：

const PassThruError: FC<{ error: Error }> = ({ error }) => {
  setTimeout(() => {
    throw error;
  }, 0);
  
  return null;
};

这两种方式的核心思路都是让错误在Tanstack Router错误边界的捕获时机之外抛出，从而让上层的自定义错误边界能够捕获到这些错误。

内容的提问来源于stack exchange，提问作者oliakaoil