Vue 3 离线提示应前置感知网络状态：用 Socket 连接状态替代 navigator.onLine，Pinia 统一管理 isConnected/isReconnecting；请求拦截器快速阻断并反馈；navigator.connection 辅助弱网降级；errorHandler 不处理离线状态。
Vue 3 中统一错误处理网络中断时的离线状态提示，关键不是靠“报错”来触发，而是把网络连接状态视为一种可响应、可管理的业务状态。它不依赖请求失败后的 error 拦截器兜底，而应前置感知、主动控制、分层反馈。
用 WebSocket/Socket.io 连接状态代替 navigator.onLine
单纯监听 navigator.onLine 容易误判（比如网线插着但服务器宕机），真正可靠的信号来自你实际使用的实时通信通道：
- 在 Pinia store 中定义 isConnected: ref(false) 和 isReconnecting: ref(false)
- 监听 socket 实例的 connect、disconnect、connect_error、reconnect_attempt 事件
- 在 connect 回调中设
isConnected.value = true，隐藏离线 Banner；在 disconnect 中设为false并触发一次全局 Toast 提示 - 避免在每个组件里重复监听——状态和通知逻辑全部收口到 store 内部
在请求拦截器中做快速阻断与友好反馈
即使 socket 还连着，HTTP 请求仍可能因网络中断卡住。此时需结合网络状态提前拦截：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 在 axios 请求拦截器开头检查 !navigator.onLine，直接
return Promise.reject(new Error('网络已断开')) - 响应拦截器中捕获 !error.response 的情况（即无 HTTP 响应），再叠加判断 navigator.onLine === false，统一归为“离线错误”
- 这类拦截不用于上报，仅用于 UI 层快速反馈：比如禁用按钮、显示 loading 灰蒙层、弹出轻量提示
配合 navigator.connection 做弱网预判与体验降级
当网络未断但质量极差（如 effectiveType === 'slow-2g'），用户会感知为“卡顿”甚至“假死”。这时要主动干预：
立即学习“前端免费学习笔记（深入）”；
- 监听 navigator.connection?.addEventListener('change', handler)，动态调整重连间隔、关闭图片懒加载、降低消息发送频率
- 在 UI 角落常驻一个小型状态标签，显示“弱网模式”或“信号较弱”，让用户有预期
- 该 API 需做存在性判断（
if ('connection' in navigator)），不作为主逻辑依赖，仅作辅助增强
全局错误处理器中不处理离线状态
app.config.errorHandler 是捕获组件内异常的，它不适合处理网络状态变化。离线提示不是“错误”，而是“状态切换”：
- 不要在 errorHandler 里判断 navigator.onLine 或 throw 新 Error 来触发提示
- errorHandler 应专注处理 setup 函数报错、模板渲染异常、watch/computed 抛错 等 Vue 运行时问题
- 网络中断提示由 socket 状态 + 请求拦截双通道驱动，与 errorHandler 并行不干扰
