如何判断ApolloError是由客户端网络连接问题导致的

ApolloError内置networkError属性，除了服务端返回4xx/5xx状态码的场景外，无网络、请求超时、DNS解析失败等纯网络连接异常场景也会对该属性赋值。你可以通过封装判断函数识别网络连接问题，具体实现如下： #

1. 封装判断函数 #

import { ApolloError } from '@apollo/client';

function isInternetConnectionError(error) {
  // 非ApolloError直接排除
  if (!(error instanceof ApolloError)) return false;
  const { networkError } = error;
  if (!networkError) return false;

  // 浏览器端在线状态前置校验
  if ('onLine' in navigator && !navigator.onLine) return true;

  // 匹配常见网络异常特征
  const errMsg = networkError.message || '';
  // 请求无法发出（无网络/跨域/请求被客户端拦截）
  if (networkError instanceof TypeError && /Failed to fetch|网络请求失败/.test(errMsg)) {
    return true;
  }
  // 请求超时
  if (/timeout|ETIMEDOUT/.test(errMsg)) return true;
  // DNS解析失败
  if (/ENOTFOUND|DNS解析失败/.test(errMsg)) return true;

  // 排除服务端主动返回的4xx/5xx响应（按需可调整为将502/503等服务不可用状态归入网络异常）
  if ('statusCode' in networkError && networkError.statusCode >= 400) return false;

  return false;
}

2. 业务代码中调用 #

注意需要给异步请求添加await，否则try/catch无法捕获异步抛出的错误：

try {
  await apolloClient.query(someQuery)
} catch (error) {
  if (isInternetConnectionError(error)) {
    Alert.alert('请检查你的网络连接！')
  } else {
    logException(error);
  }
}

适配提示 #

如果是在React Native、小程序等非浏览器环境使用，可以替换navigator.onLine为对应端侧的网络状态查询API，同时根据端侧返回的网络错误信息关键词补充匹配规则即可。 #

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