聊一聊如何作监控——cgi监控

某产品: “哎呀，这个功能怎么用不了呀”；而后某前端和某后台开始定位问题，而后发现是后台接口返回错误，某前端：“没我啥事，虚惊一场 o_O”，后面如此往复，致使某前端不经感叹：“要是有能发现是不是后台接口问题的告警就行了，一目了然，不再用一块儿折腾”。笔者能够开心的告诉某前端：这正是这篇文章的主题：如何作cgi监控。

cgi监控的意义

保证一个项目的质量，全面的测试时必要的；可是也不能保证万无一失，上线的时候也许某些因素出现各类情况。若是能快速发现问题，对于产品的可用性会大大提升，也能够加强用户体验。越快越精确的发现问题模块，不只可让开发者快速解决，也能够使产品不可用时间减短。

基于以上的问题，作cgi监控是必不可少的，好比：某个兑换优惠券活动发现不能兑换，那么可能致使其购买的欲望下降。越晚发现问题，影响的用户数据越多。接入cgi监控后，开发者可以第一时间发现问题、解决问题，减小故障带来的损失。

实现的基本思路

适用范围： 在笔者的平常开发中发送请求是使用的ajax请求，其本质是调用 XMLHttpRequest 对象实现的，对 Fetch 因为兼容性，并未涉及。

服务准备 : 须要有一个能进行监控上报而且发送通知(邮件、微信)等

实现步骤：

1.重写 XMLHttpRequest.open 方法

• 获取当前 xhr 实例请求的 url 相关信息
• 初始化当前请求的时间
• 调用 XMLHttpRequest.open 原始open方法发送请求

2.重写 XMLHttpRequest.onreadystatechange

• 断定是否须要监听时上报的 url
• 调用工具定义的 onreadystatechange 函数，进行接口上报
• 调用开发者自定义的 onreadystatechange，实现业务逻辑

3.重写 XMLHttpRequest.abort 上报相关请求中断的错误码

具体代码实现

• src/index.js 入口文件，定义CgiAnalysisTool类供使用
• src/customXhr 实现相关 XMLHttpRequest函数重写
• src/cgiReport 上报相关函数处理
• src/util.js 获取请求 url、请求环境相关信息

具体代码点击 查看