前端監控數據收集（請求攔截）

娣辯孩發布于2019-06-26 17:58 / 2901人閱讀

摘要：的五種就緒狀態請求未初始化還沒有調用。請求已發送，正在處理中通常現在可以從響應中獲取內容頭。并且還提供了每個階段的事件如果請求中止，會觸發事件。網絡錯誤如太多重定向會阻止請求完成，會觸發事件。當等待服務器的響應時，對象會發生事件。

所謂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一下

或者打賞一下

再或者……

哈哈，想法有點多了。

GPU云服務器云服務器網絡請求異常攔截攔截html的請求 ajax請求攔截實例 js 攔截所以請求

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/19484.html

前端監控數據收集（請求攔截）

摘要：的五種就緒狀態請求未初始化還沒有調用。請求已發送，正在處理中通常現在可以從響應中獲取內容頭。并且還提供了每個階段的事件如果請求中止，會觸發事件。網絡錯誤如太多重定向會阻止請求完成，會觸發事件。當等待服務器的響應時，對象會發生事件。所謂web,即使你我素未謀面，便知志趣相投；足不出戶，亦知世界之大。 01 — 為什么攔截請求現在的web應用，大都是通過請求（http）去獲取資源，拿到...

IntMain 2019-08-23 16:06 評論0 收藏0
JS實現監控微信小程序

摘要：博客地址使用模塊化工具打包自己開發的庫文章中有提到，當時需要寫一個，監控小程序的后臺接口調用和頁面報錯，今天就來說下實現原理吧原理之前也做過瀏覽器端的數據埋點上報，其實原理大同小異通過劫持原始方法，獲取需要上報的數據，最后再執行原始方法，這博客地址《使用模塊化工具打包自己開發的JS庫》文章中有提到，當時需要寫一個SDK，監控小程序的后臺接口調用和頁面報錯，今天就來說下實現原理吧！ ...

Cheriselalala 2019-08-22 18:04 評論0 收藏0
如何實現一個IOS網絡監控組件

摘要：此文由作者朱志強授權網易云社區發布。代碼演示核心代碼將原方法放在中聲明函數指針實現函數使用系統方法的函數指針完成系統的實現在這里獲取到了系統方法調用的時機在程序啟動后調用對委托模型的監控替換方法時需要指定類名，而的的類并不確定。此文由作者朱志強授權網易云社區發布。 Mobile Application Monitor IOS組件設計技術分享背景應用程序性能管理Application...

xbynet 2019-06-28 11:05 評論0 收藏0
HelloType：JS運行時數據類型檢查工具

摘要：進入主頁使用文檔是一個設計簡單的運行時的數據類型檢查工具，它可以幫助你的程序在使用某個組變量前，對變量的數據類型進行檢查，防止在使用變量進行運算時由于數據類型不同導致報錯。 showImg(https://segmentfault.com/img/bVbfW41?w=1380&h=500); 進入GitHub主頁使用文檔 HelloType是一個api設計簡單的js運行時的數據類型檢查...

Heier 2019-08-23 11:30 評論0 收藏0