这篇文章主要讲如何根据注释，通过babel插件自动地，给相应函数插入埋点代码，在实现埋点逻辑和业务逻辑分离的基础上，配置更加灵活

在动手实现之前，首先脑子里要有一个整体脉络，明白搭建前端监控具体的流程步骤有哪些。因为前端监控系统实际上是一个完整的全栈项目，而并不仅仅是前端，甚至主要的实现都是围绕在数据方面的。

如何在 Vue 中对每个点击事件插入一个函数？由于 .vue 文件是将 <template>、<script> 和 <style> 分开进行单独解析，所以不能通过 babel 将监听函数准确解析出来

前端埋点sdk的方案十分成熟，之前用的都是公司内部统一的埋点产品，从前端埋点和数据上报后的可视化查询全链路打通。但是在最近的一个私有化项目中就遇到了问题，因为服务都是在客户自己申请的服务器上的，需要将埋点数据存放到自己的数据库中

开发者有时会面临上线的生产环境包出现了异常:bug: ，在长期生产bug并修复bug的循环中总结出一下几个痛点：无法快速定位到发生错误的代码位置，因为脚手架构建时会用webapck自动帮我们压缩代码

通过可视化交互的手段，代替代码埋点。将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个可视化系统，可以在业务代码中自定义的增加埋点事件等等

定义数据埋点及其交接主要分为四个部分，梳理数据需求—定义数据指标—埋点整理—文档输出——埋点验收，前两个步骤在上文中已经详细描述过方法，本文不再赘述。本文较为简洁，整理了梳理埋点的方法和与开发交接的方法

最近有一个工作需求是曝光埋点，让我得以有机会接触相关的东西。之前实习时没有做过这方面的需求，个人项目更是和埋点扯不上关系。以至于上周开会讨论时听到“埋点”这个词就怂了。

什么是无痕埋点？简单来说，就是当引入无痕埋点的库以后，用户在浏览器里所有行为和操作都会被自动记录下来，并将信息发送到后端进行统计和分析

在线上项目中,需要统计产品中用户行为和使用情况，从而可以从用户和产品的角度去了解用户群体，从而升级和迭代产品，使其更加贴近用户。用户行为数据可以通过前端数据监控的方式获得，除此之外，前端还需要实现性能监控和异常监控

埋点方案的确定，业界的埋点方案主要分为以下三类：代码埋点：在需要埋点的节点调用接口，携带数据上传。如百度统计等；可视化埋点：使用可视化工具进行配置化的埋点，即所谓的「无痕埋点」