接口报错监控 java_一步一步搭建前端监控系统：接口请求异常监控篇

摘要： 如何监控HTTP请求错误？

Fundebug经授权转载，版权归原作者所有。

背景：市面上的监控系统有很多，大多收费，对于小型前端项目来说，必然是痛点。另一点主要原因是，功能虽然通用，却未必能够满足我们自己的需求, 所以我们自给自足也许是个不错的办法。

这是搭建前端监控系统的第四章，主要是介绍如何统计静态资源加载报错，跟着我一步步做，你也能搭建出一个属于自己的前端监控系统。

上一章介绍了如何统计静态资源加载报错，今天要说的是接口请求报错。可能有人会认为接口的报错应该由后台来关注，统计，并修复。 确实如此，而且后台服务有了很多成熟完善的统计工具，完全能够应对大部分的异常情况， 那么为什么还需要前端对接口请求进行监控呢。原因很简单，因为前端是bug的第一发现位置，在你帮后台背锅之前怎么快速把过甩出去呢，这时候，我们就需要有一个接口的监控系统，哈哈 ：)

我们要监控接口报错的情况，及时定位线上问题产生的原因

我们要分析接口的性能，以辅助我们对前端应用的优化。

好了， 进入正题吧：

如何监控前端接口请求呢?

一般前端请求都是用jquery的ajax请求，也有用fetch请求的，以及前端框架自己封装的请求等等。总之他们封装的方法各不相同，但是万变不离其宗，他们都是对浏览器的这个对象 window.XMLHttpRequest 进行了封装，所以我们只要能够监听到这个对象的一些事件，就能够把请求的信息分离出来。

如何监听ajax请求

如果你用的jquery、zepto、或者自己封装的ajax方法，就可以用如下的方法进行监听。我们监听 XMLHttpRequest 对象的两个事件 loadstart， loadend。但是监听的结果并不是像我们想象的那么容易理解，我们先看下ajaxLoadStart，ajaxLoadEnd的回调方法。

/**

* 页面接口请求监控

*/

function recordHttpLog() {

// 监听ajax的状态

function ajaxEventTrigger(event) {

var ajaxEvent = new CustomEvent(event, {

detail: this

});

window.dispatchEvent(ajaxEvent);

}

var o