系统架构：前端监控系统草案（技术路线和用户行为分析类似）

年底了，公司在统计本身支付系统的订单成功率，最后发现有不少订单成功率问题是和用户页面操做相关，可是咱们目前有些页面没有打点作用户行为数据的采集，所以很难分析出用户究竟是是什么缘由没有完成订单，对此我写了一个前端监控方案，下班时候和领导开会讨论这个方案，很晚才回家哦，会上仍是被批了一番，认为这个和用户行为分析系统耦合，并且最关键的采集那些信息，怎么分析信息没有细化，公司有类似的技术方案，个人方案很难成型。领导说的没错，我这个方案是重复性劳动，不必大动干戈，可是至少我提出这个方案代表公司用户行为分析系统对相似前端页面监控的方案可能支持不够，这就让我产生了新的思考了，其实不论是用户行为仍是前端监控，技术路线是相同的，可是采集的侧重点有所不一样，对于公司内部的用户行为分析系统，与公司业务耦合是有必定必要的，获取第一手的用户操做行为数据而且从这些数据指导页面的改进可能比知道pv和uv这样的指标更加剧要。下面我把本身写的草案的技术部分和你们分享下，但愿你们能给我拍拍砖，多提些好意见。

 

 

实现监控的可行性技术方案

 

监控方案须要从四个基本问题着手考虑，这四个问题是：

 

1. 如何收集前端页面的数据，收集那些数据？

 

2. 收集到的数据如何发送到服务端，数据到了服务端按什么方式持久化？

 

3. 服务端处理监控数据的方式？

 

4. 监控方案是公司、部门内部的管理手段，并非用户享受服务的一部分，那么就有一个问题，监控方案如何能下降对页面原有功能，页面加载效率以及页面稳定性的影响。

 

下文将一一论述这四个问题，详情以下：

 

Ø 问题一：如何收集前端页面的数据，收集那些数据？

 

收集前端页面数据的手段就是使用javascript在须要收集数据的地方打点，绑定相应的事件，用户触发这个事件的时候，页面就会自动将数据发送到服务端。该问题的重点和难点是收集那些数据，这个问题是一个业务的问题，须要业务的相关方参入进行讨论，创建数据采集的业务模型。不过业务模型创建的基础仍是经过技术手段能采集到那些数据，理清这些数据之间的逻辑关系，如何能从这些有逻辑关系的数据里分析出咱们须要的结果等方面进行考虑。

 

Ø 问题二：收集到的数据如何发送到服务端，数据到了服务端按什么方式持久化？

 

问题二看起来是两个独立的问题，可是在具体实现上这两个问题密不可分，由于前端发送数据方式会致使服务端接收数据的方式的差别，从而致使数据持久化方案的不一样。这里要总结下前端向服务端发送数据的方式：第一种就是古老的页面同步提交，这个方式确定不能用于监控；第二种是ajax方案，异步提交请求看起来很美其实它蕴含一个重大的隐患，由于ajax请求每每是同域下的请求，若是监控通信模型采用ajax方案会致使支付系统请求数的增长，这样会挤占支付系统的系统资源和系统带宽，要是监控系统的粒度更细，那么支付系统的负担将会以几何倍数增长；第三种方案是一种跨域请求的方案，跨域的方案使得监控系统的服务端成为独立的系统，监控系统要进行独立部署，这样的好处就是让监控系统和支付系统在系统层级上解耦。对于前端实现跨域请求的方案有不少种，这里只讲一种最简单易行的方案就是使用img标签的src，每次触发监控请求的时候改变一下img标签下的src指向的地址，固然用来完成监控请求的img所承载的图片最好是不可见的，这种方式还有个好处就是能够充分利用浏览器的链接数，让外域的图片socket的链接和支付请求的socket的链接分开，这和网站优化里将图片，外部文件放到独立的静态服务器的原理同样，这样作不用占用支付服务的带宽，可是对页面的性能有必定影响，固然影响程度是很低的，所以它是本方案提出者推荐的方式。

 

服务端持久数据的可行方式有以下三种：第一个是用日志存储，日志存储方式还能够分为静态日志存储方式，例如用apache，nginx等静态资源服务器存储日志，静态服务器的日志和使用img的src发送请求的方式配合最好，并且日志存储方式不会牵涉程序开发，每每只须要配置下静态资源服务器就好了，另一种是使用动态语言存储日志，例如使用java语言里的log4j技术存储日志，那么这就须要用java写一套接收程序，这种方案也可能致使img的跨域方式的性能降低，或者须要采用其余跨域的替代方案。第二个是将收集的信息写入到文件，这个方案持久化的效果和日志存储效果差很少，不过文件存储实现会让服务端开发难度增长。这里不推荐使用；第三个也是最后一个就是直接将日志存储到数据库，既然要存储数据库，那么数据到了服务端最好是预处理下，存到数据库的好处是分析起来很便利，可是效率和性能是比较低的。

 

Ø 问题三：服务端处理监控数据的方式？

 

问题三就是一个数据挖掘的问题，在业务层面上该问题能够和咱们须要采集那些数据的业务问题一块儿讨论，而技术层面上这个就和持久化数据的方式息息相关了，目前主要是究竟是处理文件仍是处理数据库的区别了。此外，咱们对这些监控数据重视程度也会影响到服务端处理监控数据的系统复杂度，不过只要能采集到有用的数据，这些问题均可以慢慢解决。

 

Ø 问题四：监控方案是公司、部门内部的管理手段，并非用户享受服务的一部分，那么就有一个问题，监控方案如何能下降对页面原有功能，页面加载效率以及页面稳定性的影响。

 

这个问题是全部问题最核心的问题，监控的目的是提高支付页面的可用性、效率和稳定性的手段，可是这个手段的介入必定会对原支付页面产生性能损失，所以好的监控方案必定要对原系统侵入性很低，同时自身效率很高，对页面影响最低。该问题须要在具体实践中进行细化，同时前面问题的讨论中也要时刻考虑到这个问题所带来的影响。