前度监控(埋点)设计方案

为什么需要前端监控（目的是什么）？

数据监控

性能监控

异常监控

常用的埋点方案

前端埋点方案选型和前端上报方案设计

前端监控结果可视化展示系统的设计

为什么需要前端监控（目的是什么）？

我们知道，现在互联网产品的获客成本每年都在不断的攀升；比如，淘宝app的平均获客单价在1000元左右，京东大概600左右，拼多多最低，在具有微信作为巨大流量加持下也要200左右。

然而一款好的产品不仅能降低获客成本，而且对用户留存率有很大的帮组。那么获取用户行为及产品在客户端的使用情况，并以监控数据为基础，对产品的优化方向具有很重要的指导意义。

而前端监控主要有三大部分组成，分别是：数据监控，性能监控和异常监控。

数据监控

数据监一般指的是用户在客户端的行为相关数据，常见的监控指标为：

pv/uv:pv是page view的缩写，指的是页面访问量或者说是点击量，uv的缩写是user view，指的是用户访问量，即有多少个IP访问了网站或者某个页面。
用户在每一个页面的停留时间
用户通过什么入口来访问该网页
用户在相应的页面中触发的行为

统计这些数据是有意义的，比如我们知道了用户来源的渠道，可以促进产品的推广，知道用户在每一个页面停留的时间，可以针对停留较长的页面，增加广告推送等等。

性能监控

性能监控主要监控的是产品在用户使用体验，响应速度，流畅度等的数据，主要的性能指标如下：

首屏加载时间：针对不同用户，不同设备，不同系统的类型
白屏时间：即打开页面或者应用，从没有任何内容到内容显示出来的时间
http等请求的响应时间
静态资源整体下载时间
页面渲染时间
页面交互动画完成时间

这些性能监控的结果，可以展示前端性能的好坏，根据性能监测的结果可以进一步的去优化前端性能，比如兼容低版本浏览器的动画效果，加快首屏加载等等。

异常监控

另外，产品的前端代码在执行过程中也会发生异常，因此需要引入异常监控。及时的上报异常情况，可以避免线上故障的发上。虽然大部分异常可以通过try catch的方式捕获，但是比如内存泄漏以及其他偶现的异常难以捕获。常见的需要监控的异常包括：

javaScript 的异常监控
样式丢失的异常监控

常用的埋点方案

代码埋点

代码埋点，就是以嵌入代码的形式进行埋点，比如需要监控用户的点击事件，会选择在用户点击时，插入一段代码，保存这个监听行为或者直接将监听行为以某一种数据格式直接传递给server端。此外比如需要统计产品的PV和UV的时候，需要在网页的初始化时，发送用户的访问信息等。

优点：

可以在任意时刻，精确的发送或保存所需要的数据信息。

缺点：

工作量较大，每一个组件的埋点都需要添加相应的代码

可视化埋点：

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

可视化埋点听起来比较高大上，实际上跟代码埋点还是区别不大。也就是用一个系统来实现手动插入代码埋点的过程。

缺点：

可视化埋点可以埋点的控件有限，不能手动定制。

无埋点：

无埋点并不是说不需要埋点，而是全部埋点，前端的任意一个事件都被绑定一个标识，所有的事件都别记录下来。通过定期上传记录文件，配合文件解析，解析出来我们想要的数据，并生成可视化报告供专业人员分析因此实现“无埋点”统计。

从语言层面实现无埋点也很简单，比如从页面的js代码中，找出dom上被绑定的事件，然后进行全埋点。

优点：

由于采集的是全量数据，所以产品迭代过程中是不需要关注埋点逻辑的，也不会出现漏埋、误埋等现象

缺点：

无埋点采集全量数据，给数据传输和服务器增加压力

前端埋点方案选型和前端上报方案设计

1)监控数据

首先我们需要明确一个产品或者网页，普遍需要监控和上报的数据。监控的分为三个阶段：用户进入网页首页、用户在网页内部交互和交互中报错。

2)埋点方案

在实际项目中考虑到上报数据的灵活定制，以及减少数据传输和服务器的压力，在所需埋点处不多的情况下，常用的方式是代码埋点。

以用户进入首页为例，我们在首页渲染完成后会发送事件类型和类型相关的数据给server端，告知首页的监控信息。

3)上报周期和上报数据类型：

如果埋点的事件不是很多，上报可以时时进行，比如监控用户的交互事件，可以在用户触发事件后，立刻上报用户所触发的事件类型。如果埋点的事件较多，或者说网页内部交互频繁，可以通过本地存储的方式先缓存上报信息，然后定期上报。

接着来确定需要埋点上报的数据，上报的信息包括用户个人信息以及用户行为，主要数据可以分为：

who: appid(系统或者应用的id),userAgent(用户的系统、网络等信息)
when: timestamp(上报的时间戳)
from where: currentUrl(用户当前url)，fromUrl(从哪一个页面跳转到当前页面)，type(上报的事件类型),element(触发上报事件的元素）
what: 上报的自定义扩展数据data:{},扩展数据中可以按需求定制，比如包含uid等信息

4)上报数据的对象为：

{   ----------------上报接口本身提供--------------------currentUrl,  fromUrl,timestamp,userAgent:{os,netWord,}----------------业务代码配置和自定义上报数据------------    type,appid,element,data:{uid,uname}
}

5)埋点和上报举例：

我们以上报首屏加载事件为例，DOM提供了document的DOMContentLoaded事件来监听dom挂载，提供了window的load事件来监听页面所有资源加载渲染完毕。

<script type="text/javascript">var start=Date.now();document.addEventListener('DOMContentLoaded', function() {fetch('some api',{         type:'dom complete',data:{domCompletedTime:Date.now()-start}})});window.addEventListener('load', function() {fetch('some api',{         type:'load complete',data:{LoadCompletedTime:Date.now()-start}})});
</script>

6)前端埋点系统的前后端通信加密：

在上报数据的前后端通信中，需要和server端协商加密机制，利用 OpenSSL库来实现的加密，OpenSSL已经是一个广泛被采用的加密算法。前端可以采用node的crypto模块。

首先来看hash算法，crypto.createHash() 来创建一个Hash实例，可利用的hash算法如下：

md5
sha1
sha256
sha512
ripemd160

以sha256算法加密为例：

const str="123445";//需要加密的字段
const hash=crypto.createHash('sha256');//指定加密算法
hash.update(str); //通过算法加密相应的字段
const result=hash.digest('hex');//转化成十六进制复制代码

前端监控结果可视化展示系统的设计

当后端得到前端上报的信息之后，经过数据分析和处理，需要前端可视化的展示数据分析后的结果。

可以在开源中后台系统ant-design-pro的基础上进行二次开发，首先要明确展示信息。展示的信息包括单个用户和整体应用。

对于单个用户来说需要展示的监控信息为：

单个用户，在交互过程中触发各个埋点事件的次数
单个用户，在某个时间周期内，访问本网页的入口来源
单个用户，在每一个子页面的停留时间

对于全体用户需要展示的信息为：

某一个时间段内网页的PV和UV
全体用户访问网页的设备和操作系统分析
某一个时间段内访问本网页的入口来源分析
全体用户在访问本网页时，在交互过程中触发各个埋点事件的总次数
全体用户在访问本网页时，网页上报异常的集合

删选功能集合：

时间筛选：提供今日（00点到当前时间）、本周、本月和全年
用户删选：提供根据用户id删选出用户行为的统计信息
设备删选：删选不同系统的整体展示信息