核心是不改业务代码、不污染全局、不影响执行流程，通过劫持 console、fetch、xmlhttprequest 和全局事件自动捕获带标记日志、接口请求与用户行为并异步上报，需注意函数绑定、注入时机、window 代理限制及 iframe 和第三方 sdk 兼容性。

核心是不改业务代码、不污染全局、不影响执行流程，靠劫持日志产生入口自动捕获并上报，而不是在每个地方手动加 track()。

重写 console 方法捕获基础日志

利用 console.info、console.warn、console.error 可被重赋值的特性，在页面加载早期统一拦截：

• 保留原始行为，避免影响开发调试和 DevTools 正常输出
• 只对带特定标记（如 [TRACK]）的日志触发上报，其他日志照常打印
• 自动注入上下文：当前 URL、时间戳、环境标识（dev/staging/prod）
• 用 navigator.sendBeacon 异步上报，不阻塞主线程

代理 fetch 和 XMLHttpRequest 捕获请求流

网络请求是数据流动的核心路径，重写这两个入口能覆盖接口调用、耗时、错误等关键维度：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 对 fetch 使用 Object.defineProperty 替换，避免 descriptor 被忽略
• 在调用原生 fetch 前记录开始时间、URL、method；在 then/catch 中补全状态码、耗时、响应大小
• 对 XMLHttpRequest.prototype.send 进行重定义，在实例上挂载 trace 上下文（如 xhr.__traceId），解决其无返回值问题
• 所有上报必须异步，禁用同步 XHR 或 fetch，防止拖慢接口本身

监听全局事件实现行为流采集

用户行为天然具有冒泡特性，无需给每个按钮绑定监听器：

• 统一监听 document 上的 click、input、submit 等事件
• 通过 event.target 和 data-track 属性做声明式识别（例如 <button data-track="pay-submit"></button>）
• 自动提取按钮文案、表单字段名、当前路由 path、页面标题等作为上报字段
• 避免监听 scroll 或 mousemove 等高频事件，改用节流或 visibilitychange 补充关键节点

注意边界与兼容性

这些方法看似简单，但几个细节容易导致埋点失效或报错：

• 重写 console 方法必须用普通函数，不能用箭头函数——否则 this 指向丢失，apply 失效
• 劫持操作必须在所有业务脚本执行前完成，建议放在 内首个 <script></script> 中
• window 不可被 Proxy 直接代理，不要尝试 new Proxy(window, {})，它会静默失败或抛错
• iframe 内的脚本不受主页面劫持影响，需单独注入；第三方 SDK 可能已重写过 console 或 fetch，要兼容已有逻辑

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