从无到有-打造页面监控系统

团队文化：进取，分享，快乐，责任！

团队愿景：做最好的产品，打造有影响力的团队！

作者：研发三部-王猛

为什么需要监控页面

因为页面是直接面向客户的，面向客户的相对都比较重要，尤其对于电商行业来说更为重要，工作中就要求我们对页面做出最快速的响应，所以我们决定自己做一套页面监控系统

监控页面有什么好处

没有页面监控的时候，线上页面出问题只能靠客户反馈投诉，这种情况对于研发来说比较被动，有了页面监控，我们就能实时了解页面运行状况，出现问题快速做出响应。

页面监控需要实时计算，所以直接选定storm + kafka的经典组合。

有几个点需要确定：

一、我们要实现的功能目标：

保证如果页面出错，监控系统能够捕捉到错误信息，具体什么错误信息，打印到日志里，后续并不关心具体错误。

要不要做归类统计？考虑到页面什么错误都可能，页面错误信息的数据统计意义不大，所以一期先不考虑对错误信息归纳总结。

按照什么维度统计算页面有问题？我们考虑过多维度统计，归纳总结，但是这个在现阶段来说一是有点太复杂了，二是目前统计这个没想到有什么实际意义。所以直接统计页面每20秒的错误量。当连续3个20秒页面报错量都超过阈值的时候，则报警。阈值是可配置的，可以随时调节。

二、日志和kafka

1、nginx + lua 方案

nginx层直接打印日志，lua直接集成kafka发送消息，这是个不错的方案，后续会考虑用lua接入kafka。

2、java服务打印日志，接入日志接收器。

日志接收器使用rsyslog技术收集日志，这种方案利用日志接收器发送kafka发送消息，相当于中间多了一层缓冲，瞬间大流量进来也没问题。

3、java服务直接调用kafka服务api发送消息。

由于各种原因，最终选择第三种方案，后续我们会继续探索提升性能的可能性，并用代码实现。

系统整体架构如下：

上面的几项确定后开始着手开发：

前端如何监控页面报错？

一般语法错误以及运行时错误，浏览器都会在console里边体现出错误信息，以及出错的文件，行号，堆栈信息。window.onerror能捕获这些信息。

与前端约定报文格式

考虑到扩展性，可以将报文定义成如下格式：

data用于存放bug信息。

pageName标记当前页面url，用于定位页面。

sysName用于区分不同系统。

type标记消息类型，例如："pageError"代表页面监控。

备注：其他参数比如referer、User-Agent、客户ip等信息可以从后台服务中直接获取。

日志收集服务

日志收集服务目前我们是使用的springMVC来做http服务，首先将系统A发送的报文先经过白名单过滤，然后打印到日志中。日志打印完毕后发送Kafka。

storm服务

pageError_kafka_spout是从broker上pull消息。

pageError_valid_bolt校验消息合法性。

pageError_business_bolt处理业务，也就是页面错误数据统计。

怎么统计页面错误量呢？

滑动窗格可以解决这个问题，数据统计部分我们主要使用了滑动窗格，我们是设定每个窗格20秒，共10个窗格，每20秒先将后一个窗格清空，然后指针滑动到这个刚清空的窗格，这10个窗格相当于一个环形队列。每当滑动到下一个窗格，会统计前3个窗格的值与阈值比较。如果都超过阈值，则发送警报。

PS：

这个页面监控系统待完善的地方还有很多，后续我们考虑做如下优化。

1、根据日志信息快速定位具体报错页面。

2、做可视化界面，更加直观的帮我们排查解决问题。