You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Apollo 1.x全局捕获网络错误并展示用户友好提示的方法

Apollo 1.4 全局统一处理网络错误方案

我明白你想在Apollo 1.4里全局捕获网络错误、统一给用户展示通知的需求——之前用afterware没生效确实挺闹心的,我在老项目里也踩过这个坑,给你分享下亲测有效的实现方式:

核心思路

Apollo 1.4的错误处理逻辑和高版本(比如2.0+)不一样,它没有后来的ApolloLink机制,而是通过networkInterface的中间件(middleware/afterware)来做全局处理。我们需要同时覆盖服务器返回的GraphQL错误底层网络请求失败两种场景,才能做到真正的全局统一处理。

具体实现代码

1. 创建带错误处理的NetworkInterface

import { ApolloClient, createNetworkInterface } from 'react-apollo';

// 初始化网络接口
const networkInterface = createNetworkInterface({
  uri: '/your-graphql-endpoint', // 替换成你的GraphQL接口地址
});

// 处理底层网络请求失败(比如断网、Failed to fetch)
networkInterface.use([{
  applyMiddleware(req, next) {
    // 重写fetch方法,捕获底层网络错误
    const originalFetch = req.fetch;
    req.fetch = (...fetchArgs) => {
      return originalFetch(...fetchArgs)
        .catch(fetchError => {
          // 这里统一展示用户友好的通知
          alert('网络连接失败,请检查网络状态后重试');
          // 也可以用你项目里的通知组件,比如自定义Toast、Modal等
          // notification.error({ title: '网络错误', content: '无法连接到服务器,请稍后再试' });
          
          // 不要忘记抛出错误,让Apollo继续处理后续逻辑
          throw fetchError;
        });
    };
    next();
  }
}]);

// 处理服务器返回的GraphQL错误(包括Apollo包装后的网络错误)
networkInterface.useAfter([{
  applyAfterware({ response }, next) {
    if (response.errors) {
      response.errors.forEach(error => {
        // 识别网络错误(匹配Apollo输出的错误关键词)
        if (error.message.includes('Network error')) {
          alert('网络请求失败,请检查网络后重试');
        } 
        // 也可以扩展处理其他类型的GraphQL错误
        else {
          console.error('GraphQL业务错误:', error.message);
          // 针对业务错误展示对应通知
          // alert(`请求出错:${error.message}`);
        }
      });
    }
    next();
  }
}]);

// 创建Apollo Client实例
const apolloClient = new ApolloClient({
  networkInterface,
});

关键注意点

  • 不要混淆中间件类型use()是请求发送前的中间件,用来捕获底层fetch失败;useAfter()是请求返回后的中间件,用来处理服务器返回的GraphQL错误(包括Apollo自动包装的网络错误)
  • 必须调用next():不管是在middleware还是afterware里,处理完错误后一定要调用next(),否则请求会被卡住,后续逻辑无法执行
  • 错误消息匹配:Apollo抛出的网络错误通常包含Network error关键词,用这个来精准识别网络类错误,避免和业务GraphQL错误混淆

这样配置后,所有通过Apollo发起的请求(不管是query还是mutate)的网络错误都会被全局捕获,你不用在每个组件里重复写错误处理逻辑,完美实现一处统一处理~

内容的提问来源于stack exchange,提问作者THpubs

火山引擎 最新活动