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

年末了，公司在统计自己支付系统的订单成功率，最后发现有很多订单成功率问题是和用户页面操作相关，但是我们目前有些页面没有打点做用户行为数据的采集，因此很难分析出用户到底是是什么原因没有完成订单，对此我写了一个前端监控方案，下班时候和领导开会讨论这个方案，很晚才回家哦，会上还是被批了一番，认为这个和用户行为分析系统耦合，而且最关键的采集那些信息，怎么分析信息没有细化，公司有相似的技术方案，我的方案很难成型。领导说的没错，我这个方案是重复性劳动，没必要大动干戈，但是至少我提出这个方案表明公司用户行为分析系统对类似前端页面监控的方案可能支持不够，这就让我产生了新的思考了，其实不管是用户行为还是前端监控，技术路线是相同的，但是采集的侧重点有所不同，对于公司内部的用户行为分析系统，与公司业务耦合是有一定必要的，获取第一手的用户操作行为数据并且从这些数据指导页面的改进可能比知道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的跨域方式的性能下降，或者需要采用其他跨域的替代方案。第二个是将收集的信息写入到文件，这个方案持久化的效果和日志存储效果差不多，不过文件存储实现会让服务端开发难度增加。这里不推荐使用；第三个也是最后一个就是直接将日志存储到数据库，既然要存储数据库，那么数据到了服务端最好是预处理下，存到数据库的好处是分析起来很便利，但是效率和性能是比较低的。

 

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

 

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

 

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

 

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