feat: moitor global XMLhttpRequest error

createError.js

@@ -1,4 +1,20 @@
 
+// ----- ajax请求错误 ---- 
+
+// ajax请求错误
+var ajaxRequestError = document.getElementsByClassName("err-ajax-request")[0];
+ajaxRequestError.onclick = function () {
+  var xhr = new XMLHttpRequest();
+  xhr.withCredentials = true;
+  xhr.timeout = 30000;
+  xhr.open("get", '/ajaxerror', true);
+  xhr.setRequestHeader("content-type", "application/json;charset=utf-8");
+  xhr.setRequestHeader("Accept", "application/json");
+  xhr.send();
+}
+
+
+
 // ----- 资源加载异常 ---- 
 
 // js

index.html

@@ -23,7 +23,7 @@ <h1>Monitor testPage</h1>
 
   <!-- ajax请求错误 -->
   <p>ajax请求错误</p>
-  <button>ajax请求错误</button>
+  <button class="err-ajax-request">ajax请求错误</button>
   <button>ajax失败</button>
   <button>ajax超时</button>
   <button>jsonp请求失败</button>
@@ -52,9 +52,6 @@ <h1>Monitor testPage</h1>
   <button>第三方资源错误</button>
   <hr>
 
-  <!-- <script src="https://js.fundebug.cn/fundebug.1.8.2.min.js"
-  apikey="c57c87db91d85b9044db147237fba16d8273678123b2f1ca3d1f96f4d2e5f36f"></script> -->
-
   <script src="../dist/js/monitor.js"></script>
   <script src="./createError.js"></script>
   <script>
@@ -69,10 +66,16 @@ <h1>Monitor testPage</h1>
     // console.log(initMonitor);
     window.addEventListener("error", function(err) {
       console.log(err);
-      console.log(111);
-    })
+    });
+
+    window.addEventListener('ajaxLoad', function (e) {
+      console.log("ajaxLoad");
+      console.log(e.detail); // XMLHttpRequest Object
+    });
 
     initMonitor(config);
   </script>
+   <!-- <script defer src="https://js.fundebug.cn/fundebug.1.8.2.min.js"
+   apikey="c57c87db91d85b9044db147237fba16d8273678123b2f1ca3d1f96f4d2e5f36f"></script> -->
 </body>
 </html>

src/initMonitor.js

@@ -23,16 +23,75 @@ function InitMonitor(userConfig) {
       data.ip = ip;
     }
   );
-  self._init()
+  self._initListenJS();
+  self._initListenAjax();
 }
 
 InitMonitor.prototype = {
-  _init: function() {
+  _initListenJS: function() {
     // 监听全局下的error事件
     window.addEventListener("error", function(err) {
       new GetError(err);
     }, true);
   },
+  _initListenAjax: function () {
+    console.log("_initListenAjax");
+    function ajaxEventTrigger(event) {
+      var ajaxEvent = new CustomEvent(event, { detail: this });
+      window.dispatchEvent(ajaxEvent);
+     }
+
+     var oldXHR = window.XMLHttpRequest;
+
+     function newXHR() {
+      var realXHR = new oldXHR();
+      // console.log(111);
+
+      realXHR.addEventListener('abort', function ($event) {
+        console.log($event);
+        ajaxEventTrigger.call(this, 'ajaxAbort'); },
+      false);
+
+      realXHR.addEventListener('error', function ($event) {
+        console.log($event);
+        ajaxEventTrigger.call(this, 'ajaxError');
+      }, false);
+
+      realXHR.addEventListener('load', function ($event) {
+        console.log($event);
+        ajaxEventTrigger.call(this, 'ajaxLoad');
+      }, false);
+
+      realXHR.addEventListener('loadstart', function () {
+        // console.log($event);
+        ajaxEventTrigger.call(this, 'ajaxLoadStart');
+      }, false);
+
+      realXHR.addEventListener('progress', function () {
+        // console.log($event);
+        ajaxEventTrigger.call(this, 'ajaxProgress');
+      }, false);
+
+      realXHR.addEventListener('timeout', function () {
+        // console.log($event);
+        ajaxEventTrigger.call(this, 'ajaxTimeout');
+      }, false);
+
+      realXHR.addEventListener('loadend', function () {
+        // console.log($event);
+        ajaxEventTrigger.call(this, 'ajaxLoadEnd');
+      }, false);
+
+      realXHR.addEventListener('readystatechange', function() {
+        // console.log($event);
+        ajaxEventTrigger.call(this, 'ajaxReadyStateChange');
+      }, false);
+
+      return realXHR;
+     }
+
+     window.XMLHttpRequest = newXHR;
+  },
   _send: function () {},
 }