qx-tracker
内容提要
qx-tracker是一个前端监控SDK，支持自定义埋点和用户行为监控。项目使用TypeScript和Rollup构建，包含核心源码、类型定义和工具函数，主要监控用户停留时间和按钮点击等数据。通过sendBeacon安全上报数据，确保在页面卸载时不丢失信息。不同的监控器负责各类监控任务，提供灵活配置选项。
延伸解读
构建与模块输出设计
项目使用 Rollup 和 TypeScript，通过三个配置文件区分公共、开发和生产环境。生产构建同时输出 UMD、CommonJS 和 ES Module 三种格式，并单独打包类型声明文件，方便不同环境接入。开发环境则集成 serve、livereload 和 html 插件，提升调试效率。这种多产物策略让 SDK 能兼顾浏览器直接引入和现代模块打包。
上报机制与 sendBeacon 取舍
数据上报封装了 navigator.sendBeacon，利用其在页面卸载时异步发送、不阻塞跳转的特性，降低数据丢失风险。但 sendBeacon 只能发 POST、请求类型为 ping、无法自定义请求头，且数据量有限。因此文章建议仅在关闭页面前使用，其他时候可考虑 fetch。非实时模式下数据会先缓存，超过 maxSize 再批量上报，以减少请求次数。
监控类的抽象与生命周期
所有具体监控类都继承自抽象类 TrackerCls，由主类 Tracker 统一管理实例。抽象类规定了 init 和 additionalDestroy 方法，并封装 addEventListener 来保存监听器，便于 destroy 时统一移除，避免内存泄漏。主类负责配置合并、数据修饰和上报，监控类只关注自身监控职责，这种分层让扩展新监控类型更清晰。
埋点属性与错误监控细节
DOM 埋点依赖元素上的 target-key 和可选的 target-events 属性，事件统一绑定在 window 上利用冒泡捕获。错误监控则区分 JS 错误和资源加载错误：JS 错误由 window 触发，资源错误由 DOM 元素触发且 error 事件不冒泡，因此需要在捕获阶段监听。Promise 错误通过 unhandledrejection 事件捕获，这些细节决定了监控数据能否准确采集。
Q&A
qx-tracker的主要功能是什么？
qx-tracker是一个前端监控SDK，支持自定义埋点和用户行为监控，主要监控用户停留时间和按钮点击等数据。
qx-tracker是用什么技术构建的？
qx-tracker使用TypeScript和Rollup构建，包含核心源码、类型定义和工具函数。
如何确保qx-tracker在页面卸载时不丢失数据？
qx-tracker通过sendBeacon安全上报数据，确保在页面卸载时不丢失信息。
qx-tracker支持哪些类型的监控？
qx-tracker支持多种监控任务，包括用户停留时间、按钮点击、错误监控和性能监控等。
qx-tracker的配置选项有哪些？
qx-tracker的配置选项包括上报地址、功能开启状态、用户唯一标识等，用户可以根据需要进行设置。
qx-tracker如何处理不同的监控任务？
qx-tracker通过不同的监控器负责各类监控任务，提供灵活的配置选项以满足不同需求。
