某产品:“哎呀，这个功能怎么用不了呀”；然后某前端和某后台开始定位问题，然后发现是后台接口返回错误，某前端：“没我啥事，虚惊一场 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、请求环境相关信息
具体代码点击 查看