spy-client 2.0.7 → 2.1.1

package/dist/spy-head.js

@@ -1,293 +1,347 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
     typeof define === 'function' && define.amd ? define(factory) :
-    (global = global || self, global.__spyHead = factory());
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.__spyHead = factory());
 }(this, (function () { 'use strict';
 
-    var spyHead = {
-      conf: {},
-      winerrors: [],
-      errorDestroy: function errorDestroy() {},
-      observerDestroy: function observerDestroy() {},
-      entryMap: {},
-      init: function init(conf) {
-        this.conf = conf;
-      },
-      send: function send(obj, logServer) {
-        obj.type = obj.type || 'except';
-        var conf = this.conf;
-        logServer = logServer || conf.logServer;
-        var logUrl = "".concat(logServer, "?pid=").concat(conf.pid, "&lid=").concat(conf.lid, "&ts=").concat(Date.now()) + "&type=".concat(obj.type, "&group=").concat(obj.group, "&info=").concat(encodeURIComponent(JSON.stringify(obj.info)));
-
-        if (obj.dim) {
-          logUrl += '&dim=' + encodeURIComponent(JSON.stringify(obj.dim));
-        }
-
-        var img = new Image();
-        img.src = logUrl;
+    /**
+     * @file utils
+     * @author kaivean
+     */
+    function getUrlInfoFromURL(url) {
+        if (URL) {
+            var obj = new URL(url);
+            if (obj.host !== undefined) {
+                return {
+                    protocol: obj.protocol,
+                    host: obj.host,
+                    pathname: obj.pathname,
+                    ext: '',
+                };
+            }
+        }
+        return;
+    }
+    function getUrlInfo(url) {
+        var info = getUrlInfoFromURL(url);
+        if (!info) {
+            var parser = document.createElement('a');
+            parser.href = url;
+            info = {
+                protocol: parser.protocol,
+                host: parser.host || location.host,
+                pathname: parser.pathname,
+                ext: '',
+            };
+        }
+        var split = info.pathname.split('.');
+        info.ext = split[split.length - 1];
+        return info;
+    }
+    function f(n) {
+        return +n.toFixed(1);
+    }
+    function getResTiming(t) {
+        return {
+            wait: f(t.domainLookupStart - (t.navigationStart || t.fetchStart || t.startTime)),
+            dns: f(t.domainLookupEnd - t.domainLookupStart),
+            connect: f(t.connectEnd - t.connectStart),
+            req: f(t.responseStart - t.requestStart),
+            res: f(t.responseEnd - t.responseStart),
+        };
+    }
+    function getxpath(el) {
+        if (!el) {
+            return { xpath: '' };
+        }
+        var xpath = [];
+        while (el && el.nodeType === 1 && el !== el.parentNode) {
+            var t = el.tagName.toLowerCase();
+            if (el.getAttribute('id')) {
+                t += '[#' + el.getAttribute('id') + ']';
+            }
+            else if (el.classList && el.classList.length) {
+                t += '[.' + el.classList[el.classList.length - 1] + ']';
+            }
+            xpath.push(t);
+            if (el === document.body) {
+                break;
+            }
+            el = el.parentNode; // 修复缺陷检查
+        }
+        return {
+            xpath: xpath.join('<'),
+        };
+    }
 
-        img.onload = img.onerror = function () {
-          img = null;
-        };
-      }
+    /**
+     * @file 资源、JS、白屏监控的基础
+     * @author kaivean
+     */
+    var spyHead = {
+        conf: {},
+        winerrors: [],
+        errorDestroy: function () { },
+        observerDestroy: function () { },
+        entryMap: {},
+        init: function (conf) {
+            this.conf = conf;
+        },
+        send: function (obj, logServer) {
+            obj.type = obj.type || 'except';
+            var conf = this.conf;
+            logServer = logServer || conf.logServer;
+            var logUrl = logServer + "?pid=" + conf.pid + "&lid=" + conf.lid + "&ts=" + Date.now()
+                + ("&type=" + obj.type + "&group=" + obj.group + "&info=" + encodeURIComponent(JSON.stringify(obj.info)));
+            if (obj.dim) {
+                logUrl += '&dim=' + encodeURIComponent(JSON.stringify(obj.dim));
+            }
+            var img = new Image();
+            img.src = logUrl;
+            img.onload = img.onerror = function () {
+                img = null;
+            };
+        },
     };
 
-    function init(conf) {
-      var resourceError = conf.resourceError || {};
-      var jsError = conf.jsError || {};
-      var isSendJserror = Math.random() < (jsError.sample ? jsError.sample : 0);
-      var isSendResource = Math.random() < (resourceError.sample ? resourceError.sample : 0);
-      var winerrors = spyHead.winerrors;
-
-      function getxpath(el) {
-        var xpath = [];
-
-        while (el && el.nodeType === 1 && el !== el.parentNode) {
-          xpath.push(el.tagName.toLowerCase());
-
-          if (el === document.body) {
-            break;
-          }
-
-          el = el.parentNode;
-        }
-
-        return {
-          xpath: xpath.join('<')
-        };
-      }
-
-      function spyListenError(event) {
-        try {
-          var el = event.target;
-          var obj = {
-            info: {},
-            dim: {},
-            group: ''
-          };
-          var info = obj.info;
-          var srcElement = event.srcElement;
-          var dataConnection = navigator.connection || {};
-          info.downlink = dataConnection.downlink;
-          info.effectiveType = dataConnection.effectiveType;
-          info.rtt = dataConnection.rtt;
-          info.deviceMemory = navigator.deviceMemory || 0;
-          info.hardwareConcurrency = navigator.hardwareConcurrency || 0;
-
-          if (srcElement === window) {
-            obj.group = jsError.group;
-            var error = event.error || {};
-            info.msg = event.message;
-            info.file = event.filename;
-            info.ln = event.lineno;
-            info.col = event.colno;
-            info.stack = (error.stack || '').split('\n').slice(0, 3).join('\n');
-
-            if (info.msg.indexOf('MODULE_TIMEOUT') !== -1) {
-              var matches = info.msg.match(/^.*Hang:(.*); Miss:(.*)/);
-
-              if (matches && matches[2]) {
-                info.msg = 'MODULE_TIMEOUT for miss:' + matches[2];
-              }
-            }
-
-            var historys = [];
-
-            for (var index = 0; index < spyHead.winerrors.length; index++) {
-              var item = spyHead.winerrors[index];
-              var prefix = item.count > 1 ? "(".concat(item.count, ")") : '';
-              historys.push(prefix + item.msg);
-            }
-
-            info.hisErrors = historys.join('----');
-            var allow = true;
-
-            if (jsError.handler) {
-              allow = jsError.handler(obj);
-            }
-
-            if (allow !== false && isSendJserror) {
-              spyHead.send(obj);
-            }
-          } else {
-            obj.group = resourceError.group;
-            obj.dim.type = srcElement.tagName.toLowerCase();
-            var url = srcElement.src || srcElement.href;
-            info.msg = url || 'unknown load eror';
-
-            if (el && el.tagName === 'IMG') {
-              info.xpath = getxpath(el).xpath;
-            }
-
-            var _allow = true;
-
-            if (resourceError.handler) {
-              _allow = resourceError.handler(obj);
-            }
-
-            if (_allow !== false && isSendResource) {
-              spyHead.send(obj);
-            }
-          }
-
-          if (winerrors.length > 0) {
-            var lastInfo = winerrors[winerrors.length - 1];
-
-            if (info.msg === lastInfo.msg) {
-              lastInfo.count += lastInfo.count || 0;
-              return;
-            }
-          }
-
-          winerrors.push(info);
-        } catch (e) {
-          console.error(e);
-        }
-      }
-
-      window.addEventListener('error', spyListenError, true);
-
-      spyHead.errorDestroy = function () {
-        window.removeEventListener('error', spyListenError, true);
-        spyHead.winerrors = null;
-      };
+    /**
+     * @file 资源和JS错误监控
+     * @author kaivean
+     */
+    function init$2(conf) {
+        var resourceError = conf.resourceError || {};
+        var jsError = conf.jsError || {};
+        var isSendJserror = Math.random() < (jsError.sample ? jsError.sample : 0);
+        var isSendResource = Math.random() < (resourceError.sample ? resourceError.sample : 0);
+        var winerrors = spyHead.winerrors;
+        var resourceErrorCount = 0;
+        function spyListenError(event) {
+            try {
+                var el = event.target;
+                var obj = { info: {}, dim: {}, group: '' };
+                var info = obj.info;
+                var srcElement = event.srcElement;
+                // 设备信息
+                var dataConnection = navigator.connection || {};
+                info.downlink = dataConnection.downlink; // 网站下载速度 M/s
+                info.effectiveType = dataConnection.effectiveType; // 网络类型
+                info.rtt = dataConnection.rtt; // 网络往返时间 ms
+                info.deviceMemory = navigator.deviceMemory || 0;
+                info.hardwareConcurrency = navigator.hardwareConcurrency || 0;
+                // JS错误
+                if (srcElement === window) {
+                    obj.group = jsError.group;
+                    // 异常信息
+                    var error = event.error || {};
+                    info.msg = event.message;
+                    info.file = event.filename;
+                    info.ln = event.lineno;
+                    info.col = event.colno;
+                    info.stack = (error.stack || '').split('\n').slice(0, 3).join('\n');
+                    // 针对esl的MODULE_TIMEOUT处理
+                    if (info.msg.indexOf('MODULE_TIMEOUT') !== -1) {
+                        var matches = info.msg.match(/^.*Hang:(.*); Miss:(.*)/);
+                        if (matches && matches[2]) {
+                            info.msg = 'MODULE_TIMEOUT for miss:' + (matches[2]);
+                        }
+                    }
+                    // 历史错误
+                    var historys = [];
+                    for (var index = 0; index < spyHead.winerrors.length; index++) {
+                        var item = spyHead.winerrors[index];
+                        var prefix = item.count > 1 ? "(" + item.count + ")" : '';
+                        historys.push(prefix + item.msg);
+                    }
+                    info.hisErrors = historys.join('----');
+                    var allow = true;
+                    if (jsError.handler) {
+                        allow = jsError.handler(obj);
+                    }
+                    if (allow !== false && isSendJserror) {
+                        spyHead.send(obj);
+                    }
+                }
+                // 资源错误
+                else {
+                    obj.group = resourceError.group;
+                    obj.dim.type = srcElement.tagName.toLowerCase();
+                    var url = srcElement.src || srcElement.href;
+                    info.msg = url || 'unknown load eror';
+                    obj.dim.host = getUrlInfo(url).host;
+                    if (el && el.tagName === 'IMG') {
+                        info.xpath = getxpath(el).xpath;
+                    }
+                    if (resourceErrorCount) {
+                        info.hisErrCount = resourceErrorCount;
+                    }
+                    var allow = true;
+                    if (resourceError.handler) {
+                        allow = resourceError.handler(obj);
+                    }
+                    if (allow !== false && isSendResource) {
+                        spyHead.send(obj);
+                    }
+                    resourceErrorCount++;
+                }
+                // 有些错误一下出现很多次，都聚合都一个错误，加上次数
+                if (winerrors.length > 0) {
+                    var lastInfo = winerrors[winerrors.length - 1];
+                    if (info.msg === lastInfo.msg) {
+                        lastInfo.count += (lastInfo.count || 0);
+                        return;
+                    }
+                }
+                winerrors.push(info);
+            }
+            catch (e) {
+                console.error(e);
+            }
+        }
+        window.addEventListener('error', spyListenError, true);
+        spyHead.errorDestroy = function () {
+            window.removeEventListener('error', spyListenError, true);
+            spyHead.winerrors = null;
+        };
     }
 
-    function init$1() {
-      if (window.PerformanceObserver) {
-        var observer = new window.PerformanceObserver(function spyObserveLongtask(list) {
-          var entryMap = spyHead.entryMap;
-          var entries = list.getEntries();
-
-          for (var i = 0; i < entries.length; i++) {
-            var entry = entries[i];
-
-            if (!entryMap[entry.entryType]) {
-              entryMap[entry.entryType] = [];
-            }
-
-            entryMap[entry.entryType].push(entry);
-          }
-        });
-
-        spyHead.observerDestroy = function () {
-          observer.disconnect();
-        };
-
-        try {
-          observer.observe({
-            entryTypes: ['longtask', 'layout-shift', 'first-input', 'largest-contentful-paint']
-          });
-        } catch (e) {}
-      }
+    /**
+     * @file PerformanceObserver指标采集
+     * @author kaivean
+     */
+    function init$1() {
+        // Longtask监控
+        if (window.PerformanceObserver) {
+            var observer_1 = new window.PerformanceObserver(function spyObserveLongtask(list) {
+                var entryMap = spyHead.entryMap;
+                var entries = list.getEntries();
+                for (var i = 0; i < entries.length; i++) {
+                    var entry = entries[i];
+                    if (!entryMap[entry.entryType]) {
+                        entryMap[entry.entryType] = [];
+                    }
+                    entryMap[entry.entryType].push(entry);
+                }
+            });
+            spyHead.observerDestroy = function () {
+                observer_1.disconnect();
+            };
+            // 在ios下，没有一个类似的监控项是支持的，就抛错，chrome会console warn
+            try {
+                observer_1.observe({ entryTypes: [
+                        'longtask',
+                        'layout-shift',
+                        'first-input',
+                        'largest-contentful-paint',
+                    ] });
+            }
+            catch (e) { }
+        }
     }
 
-    function init$2(conf) {
-      var whiteScreenError = conf.whiteScreenError || {};
-      var handler = whiteScreenError.handler;
-      var selector = whiteScreenError.selector;
-      var subSelector = whiteScreenError.subSelector;
-      var timeout = whiteScreenError.timeout || 6000;
-      var isSend = Math.random() < (whiteScreenError.sample ? whiteScreenError.sample : 0);
-
-      function getNetTime() {
-        if (!window.performance) {
-          return false;
-        }
-
-        var pf = window.performance.timing;
-        var netStr = "&dns=".concat(pf.domainLookupEnd - pf.domainLookupStart) + "&tcp=".concat(pf.connectEnd - pf.connectStart) + "&requestTime=".concat(pf.responseStart - pf.requestStart) + "&resoneTime=".concat(pf.responseEnd - pf.responseStart);
-        return netStr;
-      }
-
-      function getHisError() {
-        if (!spyHead.winerrors) {
-          return false;
-        }
-
-        var errors = spyHead.winerrors;
-        var historys = [];
-
-        for (var i = 0; i < errors.length; i++) {
-          var stack = (errors[i].stack || '').split('\n')[0];
-          historys.push("(".concat(i, ")").concat(stack || errors[i].msg));
-        }
-
-        return historys.join(';;');
-      }
-
-      function getDeviceInfo() {
-        var ret = {};
-        var dataConnection = navigator.connection || {};
-        ret.downlink = dataConnection.downlink;
-        ret.effectiveType = dataConnection.effectiveType;
-        ret.rtt = dataConnection.rtt;
-        ret.deviceMemory = navigator.deviceMemory || 0;
-        ret.hardwareConcurrency = navigator.hardwareConcurrency || 0;
-        return ret;
-      }
-
-      function isWhiteScreen() {
-        var ele = document.querySelector(selector);
-
-        if (!ele) {
-          return true;
-        }
-
-        var sub = ele.querySelector(subSelector);
-
-        if (!sub) {
-          return true;
-        }
-
-        if (ele.clientHeight < window.innerHeight * 2 / 3) {
-          return true;
-        }
-
-        return false;
-      }
-
-      if (isSend) {
-        setTimeout(function () {
-          var obj = {
-            group: whiteScreenError.group,
-            info: {
-              msg: '',
-              netTime: getNetTime(),
-              hisErrors: getHisError(),
-              deviceInfo: getDeviceInfo()
-            }
-          };
-
-          if (isWhiteScreen()) {
-            obj.info.msg = 'WhiteScren Error';
-            var allow = true;
-
-            if (handler) {
-              allow = handler(obj);
-            }
-
-            if (allow !== false && obj.info.msg) {
-              spyHead && spyHead.send(obj);
-            }
-          }
-        }, timeout);
-      }
+    /**
+     * @file 白屏监控
+     * @author kaivean
+     */
+    function init(conf) {
+        var whiteScreenError = conf.whiteScreenError || {};
+        var handler = whiteScreenError.handler;
+        var selector = whiteScreenError.selector;
+        var subSelector = whiteScreenError.subSelector;
+        var timeout = whiteScreenError.timeout || 6000;
+        var isSend = Math.random() < (whiteScreenError.sample ? whiteScreenError.sample : 0);
+        // 补充白屏信息：期间的网络时间
+        function getNetTime() {
+            if (!window.performance) {
+                return false;
+            }
+            var pf = getResTiming(window.performance.timing);
+            var netStr = "&wait=" + pf.wait
+                + ("&dns=" + pf.dns)
+                + ("&connect=" + pf.connect)
+                + ("&requestTime=" + pf.req)
+                + ("&resoneTime=" + pf.res);
+            return netStr;
+        }
+        // 补充白屏信息：期间发生的JS Error 和 资源 Error
+        function getHisError() {
+            if (!(spyHead.winerrors)) {
+                return false;
+            }
+            var errors = spyHead.winerrors;
+            var historys = [];
+            for (var i = 0; i < errors.length; i++) {
+                var stack = (errors[i].stack || '').split('\n')[0];
+                historys.push("(" + i + ")" + (stack || errors[i].msg));
+            }
+            return historys.join(';;');
+        }
+        // 补充白屏信息: 设备信息
+        function getDeviceInfo() {
+            var ret = {};
+            // 设备信息
+            var dataConnection = navigator.connection || {};
+            ret.downlink = dataConnection.downlink; // 网站下载速度 M/s
+            ret.effectiveType = dataConnection.effectiveType; // 网络类型
+            ret.rtt = dataConnection.rtt; // 网络往返时间 ms
+            ret.deviceMemory = navigator.deviceMemory || 0;
+            ret.hardwareConcurrency = navigator.hardwareConcurrency || 0;
+            return ret;
+        }
+        function isWhiteScreen() {
+            var ele = document.querySelector(selector);
+            if (!ele) {
+                return true;
+            }
+            var sub = ele.querySelector(subSelector);
+            if (!sub) {
+                return true;
+            }
+            if (ele.clientHeight < (window.innerHeight * 2 / 3)) {
+                return true;
+            }
+            return false;
+        }
+        if (isSend) {
+            setTimeout(function () {
+                var obj = {
+                    group: whiteScreenError.group,
+                    info: {
+                        msg: '',
+                        netTime: getNetTime(),
+                        hisErrors: getHisError(),
+                        deviceInfo: getDeviceInfo(),
+                    },
+                };
+                if (isWhiteScreen()) {
+                    obj.info.msg = 'WhiteScren Error';
+                    var allow = true;
+                    if (handler) {
+                        allow = handler(obj);
+                    }
+                    if (allow !== false && obj.info.msg) {
+                        spyHead && spyHead.send(obj);
+                    }
+                }
+            }, timeout);
+        }
     }
 
-    spyHead.init = function (conf) {
-      if (!conf.logServer) {
-        conf.logServer = 'https://sp1.baidu.com/5b1ZeDe5KgQFm2e88IuM_a/mwb2.gif';
-      }
-
-      this.conf = conf;
-      init(conf);
-      init$1();
-      init$2(conf);
-    };
-
-    if (window.__spyclientConf) {
-      spyHead.init(window.__spyclientConf);
+    /**
+     * @file SpyClient
+     * @author kaivean
+     */
+    spyHead.init = function (conf) {
+        if (!conf.logServer) {
+            conf.logServer = 'https://sp1.baidu.com/5b1ZeDe5KgQFm2e88IuM_a/mwb2.gif';
+        }
+        this.conf = conf;
+        init$2(conf);
+        init$1();
+        init(conf);
+    };
+    // 兼容全局变量定义的初始化方式
+    if (window.__spyclientConf) {
+        spyHead.init(window.__spyclientConf);
     }
 
     return spyHead;