前端监控数据收集（请求拦截）

所谓web,即使你我素未谋面，便知志趣相投；足不出户，亦知世界之大。01 — 为什么拦截请求现在的web应用，大都是通过请求（http）去获取资源，拿到资源后再呈现给用户，一个页面中可以有多个这样的请求。每一次请求的开始，等待，完成，异常都会有相应的状态来标识。我们在自己的框架中通常都会使用一个全局过滤器，来拦截请求，目的大同小异：在发送请求之前，修改请求参数，添加请求头请求发送中的进度计算（通常是文件上传）请求出错后的捕获请求结束后，处理后台返回数据结构，进行适配……看看请求的整个流程图：而我们最常用的发送请求的便是XMLHttpRequest。XMLHttpRequest.readyState的五种就绪状态：0：请求未初始化（还没有调用 open()）。1：请求已经建立，但是还没有发送（还没有调用 send()）。2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。4：响应已完成；您可以获取并使用服务器的响应了。并且XMLHttpRequest还提供了每个阶段的事件：abort如果请求中止，会触发abort事件。error网络错误（如太多重定向）会阻止请求完成，会触发error事件。load当事件完成，会触发load事件。loadend当一个请求完成，无论成功（load）或者不成功（abort/error）后触发loadstart当调用send()时，触发单个loadstart事件。progress当等待服务器的响应时，XHR对象会发生progress事件。通常每隔50毫秒左右，所以可以使用这事件给用户反馈请求的进度。timeout当等待服务器的响应超时会触发。02 — 如何拦截请求了解了XMLHttpRequest的请求流程后，我们就可以开始去拦截浏览器发出的请求，去做我们想做的事。方式一：(function (xhr) {// Capture request before any network activity occurs: var send = xhr.send; xhr.send = function (data) { this.addEventListener(’loadstart’, onLoadStart); this.addEventListener(’loadend’, onLoadEnd); this.addEventListener(’error’, onError); return send.apply(this, arguments); };})(XMLHttpRequest.prototype);这种是最简单直接的方式，修改XMLHttpRequest的原型，在发送请求时开启事件监听。大多数情况下都是没什么大问题的，但后来发现在Angular4+以上版本中这样去拦截，请求触发loadend事件后获取到的请求响应成功与否状态始终为false，因为Angualr2后来的版本也使用事件监听来处理拦截，有些地方就冲突了。方式二：出现问题总要解决吧，然后就采用方法一的升级版本，完全重写XMLHttpRequest。(function () { // create XMLHttpRequest proxy object var oldXMLHttpRequest = XMLHttpRequest; // define constructor for my proxy object window.XMLHttpRequest = function () { var actual = new oldXMLHttpRequest(); var self = this; this.onreadystatechange = null; // this is the actual handler on the real XMLHttpRequest object actual.onreadystatechange = function () { if (this.readyState == 1) { onLoadStart.call(this); } else if (this.readyState == 4) { if(this.status==200) onLoadEnd.call(this); else{ onError.call(this); } } if (self.onreadystatechange) { return self.onreadystatechange(); } };// add all proxy getters[“status”, “statusText”, “responseType”, “response”,“readyState”, “responseXML”, “upload”].forEach(function (item) { Object.defineProperty(self, item, { get: function () { return actual[item]; }, set: function (val) { actual[item] = val; } });});// add all proxy getters/setters[“ontimeout, timeout”, “withCredentials”, “onload”, “onerror”, “onprogress”].forEach(function (item) { Object.defineProperty(self, item, { get: function () { return actual[item]; }, set: function (val) { actual[item] = val; } });});// add all pure proxy pass-through methods[“addEventListener”, “send”, “open”, “abort”, “getAllResponseHeaders”,“getResponseHeader”, “overrideMimeType”, “setRequestHeader”, “removeEventListener”].forEach(function (item) { Object.defineProperty(self, item, { value: function () { return actual[item].apply(actual, arguments); } }); }); }})();03 — 项目实战现在我们可以放心的拦截浏览器发出的请求了，妈妈再也不用担心我的学习了，哈哈。说一千道一万，来点干货，直接看项目。传送门：web-monitor喜欢请点个赞呗或者去https://github.com/kisslove/w… Star一下或者打赏一下再或者……哈哈，想法有点多了。