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




