React中GQL/Apollo错误未被try/catch捕获的问题排查

你遇到的核心问题是：当请求因意外字段返回422状态码的ApolloError时，外层的try/catch没有捕获到错误，导致弹窗关闭、程序误判为执行成功，但其他类型错误（缺失字段、服务器错误）能正常触发catch块。

核心原因排查 #

1. onSave内部吞掉了422错误 #

如果onSave是你封装的GQL请求方法，很可能内部对422状态码做了特殊处理但没有抛出错误。比如：

const onSave = async () => {
  try {
    await apolloClient.mutate({ /* 你的mutation配置 */ });
  } catch (err) {
    // 只抛出非422的错误，422被内部吞掉
    if (err.networkError?.statusCode !== 422) throw err;
  }
};

这种情况下，onSave不会把422错误传递到外层try/catch，自然不会触发后续的错误处理逻辑。

2. Apollo Client默认错误策略导致422不抛出异常 #

Apollo Client的默认规则是：HTTP 4xx状态码（除401/403外）会被视为成功响应，不会抛出ApolloError，而是将错误信息放在响应的errors字段中。这就导致await onSave()不会触发Promise的reject，外层try/catch根本捕获不到错误。

比如返回422时，Apollo的响应结构可能是：

{
  data: null,
  errors: [/* 具体错误信息 */]
}

此时await会正常执行后续代码，不会进入catch块。

具体解决方法 #

方案一：修复onSave，确保所有错误向上抛出 #

检查onSave的实现，确保不管什么错误都要抛出，同时如果Apollo把错误放在响应的errors里，要手动抛出异常：

const onSave = async () => {
  const result = await apolloClient.mutate({
    mutation: YOUR_SAVE_MUTATION,
    variables: {/* 提交的变量 */}
  });

  // 如果响应里有errors字段，手动抛出ApolloError
  if (result.errors?.length) {
    throw new ApolloError({
      graphQLErrors: result.errors,
      networkError: new Error('请求参数验证失败')
    });
  }

  return result;
};

方案二：修改Apollo Client的错误策略 #

在创建Apollo Client实例或单个请求中，配置errorPolicy为'all'，让Apollo将所有错误都抛出：

全局配置（所有请求生效）

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: '/your-gql-endpoint',
  cache: new InMemoryCache(),
  defaultOptions: {
    mutate: {
      errorPolicy: 'all' // 强制Apollo抛出所有错误
    }
  }
});

单个请求配置（仅当前save请求生效）

const onSave = async () => {
  await apolloClient.mutate({
    mutation: YOUR_SAVE_MUTATION,
    variables: {/* 变量 */},
    errorPolicy: 'all' // 单独为这个请求设置错误策略
  });
};

方案三：用Apollo Link拦截422错误 #

通过apollo-link-error拦截器，主动将422状态码的错误转为可捕获的异常：

import { ApolloClient, InMemoryCache, ApolloLink, from } from '@apollo/client';
import { onError } from '@apollo/client/link/error';
import { HttpLink } from '@apollo/client/link/http';

// 错误拦截链路
const errorLink = onError(({ networkError, graphQLErrors }) => {
  if (networkError?.statusCode === 422) {
    throw new ApolloError({
      networkError: new Error('Response not successful: Received status code 422'),
      graphQLErrors: graphQLErrors || []
    });
  }
});

// 构建客户端链路
const client = new ApolloClient({
  link: from([errorLink, new HttpLink({ uri: '/your-gql-endpoint' })]),
  cache: new InMemoryCache()
});

额外检查项 #

• 确认onSave是异步函数且返回Promise（如果是同步函数，await不会生效，但你的其他错误能捕获，这个概率极低）
• 排查是否有全局错误处理组件/钩子（比如React Error Boundary）提前捕获了422错误并阻止了传递

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