核心是不改业务代码、不污染全局、不影响执行流程，通过劫持 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">） - 自动提取按钮文案、表单字段名、当前路由 path、页面标题等作为上报字段
- 避免监听
scroll或mousemove等高频事件，改用节流或 visibilitychange 补充关键节点
注意边界与兼容性
这些方法看似简单，但几个细节容易导致埋点失效或报错：
- 重写
console方法必须用普通函数，不能用箭头函数——否则this指向丢失，apply失效 - 劫持操作必须在所有业务脚本执行前完成，建议放在
<head>内首个<script>中 -
window不可被Proxy直接代理，不要尝试new Proxy(window, {})，它会静默失败或抛错 - iframe 内的脚本不受主页面劫持影响，需单独注入；第三方 SDK 可能已重写过
console或fetch，要兼容已有逻辑
