React Admin请求报错时parseResponse未触发 如何捕获API返回的错误信息

你遇到的parseResponse未执行的原因是：该回调仅在请求成功返回时触发，API返回的错误（包括GraphQL业务错误、网络错误）会在请求链路层直接抛出异常，不会走到该回调。以下是3种可行的解决方案：

这是全局通用的处理方案，所有请求的错误都会在这里被统一捕获，转换为React Admin可识别的格式：

import { ApolloClient, InMemoryCache, from } from '@apollo/client';
import { onError } from '@apollo/client/link/error';
import buildGraphQLProvider from 'ra-data-graphql';

// 错误处理链路
const errorLink = onError(({ graphQLErrors, networkError }) => {
  let errorMessage = '请求出错';
  if (graphQLErrors) {
    // 可根据业务逻辑自定义错误信息聚合规则，这里默认取第一个错误信息
    errorMessage = graphQLErrors.map(err => err.message).join(', ');
  }
  if (networkError) {
    errorMessage = `网络错误: ${networkError.message}`;
  }
  // 抛出符合React Admin规范的错误，必须包含message字段
  throw new Error(errorMessage);
});

// 初始化Apollo Client时把错误链路放到http链路之前
const client = new ApolloClient({
  link: from([errorLink, yourHttpLink]),
  cache: new InMemoryCache(),
});

// 初始化dataProvider时传入自定义的client
const dataProvider = buildGraphQLProvider({ client });

如果不想改动Apollo Client配置，可以直接在数据提供者外层做错误拦截，还可以针对不同资源做定制化处理：

const originalDataProvider = buildGraphQLProvider({ client: yourApolloClient });

const dataProvider = {
  ...originalDataProvider,
  update: async (resource, params) => {
    try {
      return await originalDataProvider.update(resource, params);
    } catch (error) {
      // 针对用户资源的更新错误做特殊处理
      if (resource === 'users') {
        // 返回带errors字段的错误，表单会自动把错误映射到对应名称的表单项下方展示
        throw {
          message: '用户更新失败',
          errors: {
            email: '该邮箱已被其他账号占用',
            phone: '手机号格式不符合要求'
          }
        };
      }
      throw error;
    }
  }
};

如果只需要在用户编辑页单独处理错误，直接使用Edit组件的onFailure回调即可：

import { Edit, SimpleForm, TextInput, useNotify } from 'react-admin';

const UserEdit = () => {
  const notify = useNotify();

  const handleFailure = (error) => {
    // 弹出全局错误提示
    notify(error.message, { type: 'error' });
    // 可在此处添加自定义业务逻辑，比如日志上报、重置表单等
  };

  return (
    <Edit onFailure={handleFailure}>
      <SimpleForm>
        <TextInput source="name" label="用户名" />
        <TextInput source="email" label="邮箱" />
        <TextInput source="phone" label="手机号" />
      </SimpleForm>
    </Edit>
  );
};

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