核心思路是通过重写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 持久化，下次启动时补传

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！