埋点自动手机方案-埋点提取

最新推荐文章于 2023-07-31 11:53:05 发布

大转转FE

最新推荐文章于 2023-07-31 11:53:05 发布

阅读量419

点赞数

文章标签：编程语言 html java css js

本文链接：https://blog.csdn.net/P6P7qsW6ua47A2Sb/article/details/109589562

版权

本文介绍了如何通过JSDoc插件自动收集、解析和上报项目中的手动埋点，解决手动埋点的维护问题。通过自定义标签、预处理、解析和收集，实现了从注释到埋点数据的转化，并提供了配置选项以适应不同项目的上报需求。

摘要由CSDN通过智能技术生成

点击蓝字关注我们，了解更多转转实践

简介

埋点统计问题一直是业务中非常重要的一环。埋点数据是后期业务分析和技术优化的重要基础。

随着业务迭代次数的增多，伴随人员的变动，历史累赘也越来越多，经常 PM 来找开发同学询问某某功能的埋点是什么。一方面沟通成本高，一方面对开发同学频繁打扰也严重影响开发效率。

针对这些问题，我们开发出了一套将项目中分散埋点自动收集、归类、上报、展示的一套系统，来协助相关业务方查看和分析业务数据。

主要过程分为 路由整理（依赖分析）、埋点提取和上报、展示平台 三个部分。

这次主要介绍 埋点提取和上报 部分。

首先指出的是我们业务中的埋点多是手动埋点，形如：

this.$log('page_view', pageType, backup);

分布在各个页面和组件中。

一个首要维护问题是很多情况下，时间一长，连开发者本身也难以记得这个埋点的意义，以及附带参数的意思了。

解决这个问题我们很容易想到通过增加注释的方式来增强可维护性。但是怎么加？

这里我们借助于 JSDoc 这种通用的注释规范，来给我们的埋点做说明。

同时通过一个自定义标签来标记这是一个埋点上报。

像这样：

/*
 * @log 页面展现
 * @backup 参数说明
 */
this.$log('page_view', pageType, backup);

之后，就着手准备收集工作了。

因此我们的收集也是基于 JSDoc 来完成的。但在开始之前需要先对我们的源文件进行处理，和我们大多数工程一样，都需要 Babel 进行转换一下，因为一些高级语法 JSDoc 同样也不支持，会在在处理过程中语法报错而中断。

还使用到了 vue-template-compiler

关注