核心思路是通过重写fetch、XMLHttpRequest和Promise.prototype.then/catch等原生API实现无侵入埋点：自动注入上下文字段、统一捕获请求与逻辑流状态，并经Bury.log()防抖批量上报。
核心思路是利用 JavaScript 原生异步 API（如 fetch、XMLHttpRequest、setTimeout、Promise.then 等）的底层调用链，在不修改业务代码的前提下，自动捕获关键行为并注入日志上下文。
重写 fetch 实现请求级无侵入埋点
拦截所有 fetch 调用，在发起前自动附加埋点字段（如页面 URL、用户 ID、时间戳、请求路径），并在响应后记录成功/失败状态。无需在每个 fetch 调用处加日志代码。
- 保存原生
fetch引用，避免递归调用 - 包装参数：从
url和options中提取 method、headers，并注入__trace_id、__page等字段 - 使用
Promise.finally统一上报结果，不干扰原有逻辑流 - 错误时携带
statusText和status，便于归因网络或服务端问题
劫持 XMLHttpRequest 实现兼容性兜底
对老项目或需支持 IE 的场景，重写 XMLHttpRequest.prototype.open 和 .send，同样注入上下文并监听 onload/onerror。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 在
open阶段记录请求起始信息（URL、method） - 在
send前挂载自定义 header，如X-BP-Page、X-BP-User - 通过
addEventListener('loadend')统一收集耗时与状态，避免重复绑定 - 注意区分主动 abort 与真实失败，避免误报
封装 Promise.then/catch 实现逻辑流埋点
不直接重写 Promise 构造器（风险高），而是 monkey patch Promise.prototype.then 和 .catch，在链式调用中自动附加可追踪标识。
立即学习“前端免费学习笔记（深入）”；
- 为每个
then回调包裹一层 try-catch，捕获未处理的 Promise rejection - 将当前调用栈简略信息（如上层函数名、触发事件类型）注入日志 payload
- 结合
performance.now()计算各环节耗时，辅助性能分析 - 仅对非空回调生效，避免污染基础库内部 Promise 使用
统一日志出口与防抖批量上报
所有重写入口最终都汇聚到一个轻量 Bury.log() 方法，它不立即发请求，而是缓存 + 定时 flush。
- 内存中暂存日志项，按 type（request / error / custom）分类
- 每 2 秒或累计达 10 条时，调用
navigator.sendBeacon批量发送 - 页面卸载前强制 flush，确保关键日志不丢失
- 失败日志降级为 localStorage 持久化，下次启动时补传
