如何在React-Admin中展示自定义错误页面并捕获API错误？

React-Admin的默认行为中，API请求抛出的错误会被全局通知组件捕获并显示底部通知，而你配置的errorPage仅用于处理路由匹配失败、组件渲染错误这类全局级别的异常，不会自动处理API请求错误。要让API服务器错误触发自定义错误页面，需要手动拦截并处理这些错误，以下是具体实现方案：

方案1：全局拦截数据提供者的API错误 #

通过自定义数据提供者，统一处理所有API请求的错误，当检测到服务器错误（如5xx状态码）时，跳转到自定义错误页面，同时阻止默认通知的触发。

步骤1：修改数据提供者 #

// src/dataProvider.js
import jsonServerProvider from 'ra-data-json-server';

const baseDataProvider = jsonServerProvider('你的API地址');
let navigate; // 用于存储导航函数

const customDataProvider = {
  ...baseDataProvider,
  // 提供设置导航函数的方法
  setNavigate: (nav) => {
    navigate = nav;
  },
  // 重写需要处理错误的CRUD方法，这里以getList为例，其他方法同理
  getList: async (resource, params) => {
    try {
      return await baseDataProvider.getList(resource, params);
    } catch (error) {
      // 检测是否为服务器错误（可根据实际情况调整判断条件）
      if (error.status >= 500 && error.status < 600) {
        // 跳转到自定义错误页面
        navigate('/error-page');
        // 不抛出错误，避免触发默认通知
        return { data: [], total: 0 };
      }
      // 其他错误继续抛出，保持默认通知逻辑
      throw error;
    }
  },
  // 同理重写getOne、create、update、delete等方法
};

export default customDataProvider;

步骤2：配置自定义路由与导航函数 #

在Admin组件中添加自定义错误页面的路由，并将导航函数传递给数据提供者：

// src/App.js
import { Admin, Resource, Route, useNavigate } from 'react-admin';
import { useEffect } from 'react';
import customDataProvider from './dataProvider';
import ErrorList from './pages/ErrorList';
import CustomErrorPage from './error';

// 自定义路由，指向你的错误页面
const customRoutes = [
  <Route path="/error-page" element={<CustomErrorPage />} key="error-page" />,
];

const App = () => {
  const navigate = useNavigate();

  useEffect(() => {
    // 将导航函数传递给数据提供者
    customDataProvider.setNavigate(navigate);
  }, [navigate]);

  return (
    <Admin 
      dataProvider={customDataProvider} 
      customRoutes={customRoutes}
    >
      <Resource name="error" list={ErrorList} />
    </Admin>
  );
};

export default App;

方案2：页面级别处理API错误 #

如果仅需要在特定页面处理API错误并跳转，可以使用useQuery钩子的onError回调，这种方式更灵活：

// src/pages/ErrorList.js
import { useQuery, useNavigate, useNotify } from 'react-admin';
import { dataProvider } from '../dataProvider';

const ErrorList = () => {
  const navigate = useNavigate();
  const notify = useNotify();

  const { isLoading } = useQuery({
    queryKey: ['error'],
    queryFn: () => dataProvider.getList('error', {}),
    onError: (error) => {
      if (error.status >= 500) {
        // 跳转到自定义错误页面
        navigate('/error-page');
      } else {
        // 其他错误显示默认通知
        notify(error.message, { type: 'error' });
      }
    },
  });

  if (isLoading) return <div>加载中...</div>;

  // 页面渲染逻辑
  return <div>错误列表页面</div>;
};

export default ErrorList;

关键说明 #

• 确保自定义错误页面的路由已通过customRoutes添加到Admin组件中。
• 若需要完全禁用默认通知，可在Admin组件中添加disableNotifications属性，但不建议全局禁用，应根据错误类型选择性处理。
• 错误判断条件可根据你的API返回格式调整（如检查错误消息、状态码等）。

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