ApolloGraphQL控制台持续报错：如何捕获400错误不显示？

问题根源 #

useMutation的onError回调主要捕获GraphQL层面的业务错误（比如字段校验失败、权限问题等返回的GraphQL Error），但浏览器控制台出现的400错误属于HTTP层面的网络请求错误，这类错误默认会被浏览器和Apollo Client的底层网络链路输出到控制台，需要通过链路配置拦截处理。

解决方案 #

1. 全局配置apollo-link-error拦截错误 #

在创建Apollo Client实例时，添加错误拦截链路，统一处理HTTP和GraphQL错误，并阻止错误输出到控制台：

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(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    // 处理GraphQL业务错误，比如更新前端错误提示
    graphQLErrors.forEach(({ message }) => {
      setErrorMsg(prev => [...prev, message]); // 替换成你的错误提示逻辑
    });
  }
  if (networkError) {
    // 处理HTTP网络错误（如400），不打印到控制台即可避免显示
    setErrorMsg([networkError.message]);
    // 注释掉console.log就不会在控制台输出该错误
    // console.log(`Network error: ${networkError}`);
  }
});

// HTTP请求链路
const httpLink = new HttpLink({ uri: '你的GraphQL接口地址' });

// 组合链路并创建Client
const client = new ApolloClient({
  link: from([errorLink, httpLink]),
  cache: new InMemoryCache(),
});

2. 在useMutation的onError中处理networkError #

如果不需要全局配置，也可以在单个Mutation的回调中明确处理网络错误：

const [CreateDoc, { error, loading }] = useMutation(CREATE_DOC, {
  onError(err) {
    let errorMessages = [];
    // 处理GraphQL错误
    if (err.graphQLErrors) {
      errorMessages = err.graphQLErrors.map(e => e.message);
    }
    // 处理HTTP网络错误
    if (err.networkError) {
      errorMessages.push(err.networkError.message);
    }
    setErrorMsg(errorMessages);
    // 此处不调用console.log，控制台就不会输出错误
  }
});

CreateDoc({ variables: { input } });

注意事项 #

• 浏览器Network面板中的400请求记录无法消除，这是浏览器默认的网络日志，属于正常现象，我们能拦截的是Console面板中的错误提示。
• 全局链路配置是更优方案，能统一处理所有请求的错误，避免重复代码。

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