聊一聊如何做监控——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、请求环境相关信息

具体代码点击 查看