Promise 封装请求实现全链路监控：拦截 fetch/axios，用 finally 计算耗时，捕获错误与响应信息；注入 traceId 和业务元数据；按错误类型分级上报；优先 sendBeacon 保送达。
用 Promise 设计前端全链路请求耗时统计与异常上报系统，核心在于拦截所有异步请求（如 fetch / axios），统一包装为带监控逻辑的 Promise，并在 resolve/reject 时记录时间、状态、错误等信息，再通过轻量上报机制发送到服务端。
1. 封装请求函数，注入耗时与异常捕获逻辑
不直接调用原生 fetch 或 axios 实例，而是封装一层“受控请求函数”，在发起前打点开始时间，Promise settle 后计算耗时并上报。
- 用 Date.now() 记录请求发起时刻，避免使用 new Date() 减少开销
- Promise 的 finally 是最稳妥的耗时计算位置（无论成功失败都会执行）
- reject 时捕获错误对象，提取 stack、message、url、method 等关键字段
- resolve 时也可补充响应状态码、响应头大小、是否缓存命中等可选指标
2. 构建统一的监控上下文与元数据
每次请求应携带可追溯的链路标识（如 traceId）和业务上下文（页面、模块、用户 ID 等），便于后端聚合分析。
- 生成唯一 traceId（如使用 crypto.randomUUID() 或简单时间戳+随机数）
- 从全局或路由中获取当前页面 path、用户登录态、设备类型等维度信息
- 将这些元数据作为额外字段附在上报 payload 中，不污染业务逻辑
- 支持手动传入 customTags，方便特定接口打标（如 “支付下单”、“首页轮播”）
3. 异常分类与分级上报策略
不是所有 reject 都要立即上报——需区分网络错误、服务端错误（4xx/5xx）、业务错误（如 { code: 1001 }），并设置频率控制。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“Java免费学习笔记（深入）”；
- 网络层错误（TypeError、AbortError）优先上报，这类往往代表真实故障
- HTTP 状态码 ≥ 500 视为服务端异常，4xx 按需采样（如只上报 401/403/429）
- 业务错误可由上层约定 code 字段，仅当 code 不在白名单内才触发上报
- 用节流（throttle）或队列+定时 flush 方式上报，避免高频请求导致日志刷屏
4. 上报通道：用 navigator.sendBeacon 或降级 fetch
确保页面卸载前也能发出统计数据，尤其对异常场景至关重要。
- 优先使用 navigator.sendBeacon(url, data)，它异步且页面关闭时仍能发出去
- 若不支持 sendBeacon，fallback 到 fetch + keepalive: true（注意兼容性）
- 上报地址建议走独立域名或路径（如 /api/log），避免和业务请求竞争资源
- 上报体用 FormData 或 JSON 字符串均可，推荐压缩字段名（如 t→time, u→url, s→status）减小体积
不复杂但容易忽略的是上下文透传与错误归因——比如一个请求由按钮点击触发，应把 click 元素的 dataset、事件路径也带上；再比如多个并发请求共用同一个 traceId，才能真正串联起全链路。把这些细节补全，Promise 就不只是“等结果”，而成了可观测性的入口。
