spy-client 2.1.1 → 2.1.7

package/src/head/error.ts

@@ -58,10 +58,10 @@ export function init(conf: SpyHeadConf) {
 
                 // 历史错误
                 const historys = [];
-                for (let index = 0; index < spyHead.winerrors.length; index++) {
-                    const item = spyHead.winerrors[index];
-                    const prefix = item.count > 1 ? `(${item.count})` : '';
-                    historys.push(prefix + (item.msg as string));
+                for (let index = 0; index < winerrors.length; index++) {
+                    const item = winerrors[index];
+                    const prefix = item.info.count > 1 ? `(${item.info.count})` : '';
+                    historys.push(prefix + (item.info.msg as string));
                 }
 
                 info.hisErrors = historys.join('----');
@@ -71,8 +71,8 @@ export function init(conf: SpyHeadConf) {
                     allow = jsError.handler(obj);
                 }
 
-                if (allow !== false && isSendJserror) {
-                    spyHead.send(obj);
+                if (allow !== false) {
+                    spyHead.send(obj, isSendJserror);
                 }
             }
             // 资源错误
@@ -98,22 +98,12 @@ export function init(conf: SpyHeadConf) {
                     allow = resourceError.handler(obj);
                 }
 
-                if (allow !== false && isSendResource) {
-                    spyHead.send(obj);
+                if (allow !== false) {
+                    spyHead.send(obj, isSendResource);
                 }
 
                 resourceErrorCount++;
             }
-
-            // 有些错误一下出现很多次，都聚合都一个错误，加上次数
-            if (winerrors.length > 0) {
-                const lastInfo = winerrors[winerrors.length - 1];
-                if (info.msg === lastInfo.msg) {
-                    lastInfo.count += (lastInfo.count || 0);
-                    return;
-                }
-            }
-            winerrors.push(info);
         }
         catch (e) {
             console.error(e);
@@ -122,7 +112,7 @@ export function init(conf: SpyHeadConf) {
     window.addEventListener('error', spyListenError, true);
     spyHead.errorDestroy = function () {
         window.removeEventListener('error', spyListenError, true);
-        spyHead.winerrors = null;
+        spyHead.winerrors = [];
     };
 }
 

package/src/head/whitescreen.ts

@@ -42,8 +42,8 @@ export function init(conf: SpyHeadConf) {
         const errors = spyHead.winerrors;
         const historys = [];
         for (let i = 0; i < errors.length; i++) {
-            const stack = (errors[i].stack || '').split('\n')[0];
-            historys.push(`(${i })${stack || errors[i].msg}`);
+            const stack = (errors[i].info.stack || '').split('\n')[0];
+            historys.push(`(${i })${stack || errors[i].info.msg}`);
         }
         return historys.join(';;');
     }
@@ -76,19 +76,19 @@ export function init(conf: SpyHeadConf) {
         return false;
     }
 
-    if (isSend) {
+    if (selector) {
         setTimeout(function () {
-            const obj = {
-                group: whiteScreenError.group,
-                info: {
-                    msg: '',
-                    netTime: getNetTime(),
-                    hisErrors: getHisError(),
-                    deviceInfo: getDeviceInfo(),
-                },
-            } as ErrorHandlerData;
-
             if (isWhiteScreen()) {
+                const obj = {
+                    group: whiteScreenError.group,
+                    info: {
+                        msg: '',
+                        netTime: getNetTime(),
+                        hisErrors: getHisError(),
+                        deviceInfo: getDeviceInfo(),
+                    },
+                } as ErrorHandlerData;
+
                 obj.info.msg = 'WhiteScren Error';
 
                 let allow: boolean | undefined | void = true;
@@ -97,7 +97,7 @@ export function init(conf: SpyHeadConf) {
                 }
 
                 if (allow !== false && obj.info.msg) {
-                    spyHead && spyHead.send(obj);
+                    spyHead && spyHead.send(obj, isSend);
                 }
             }
         }, timeout);

package/src/lib/huffman.ts

@@ -46,16 +46,17 @@ class HuffmanNode {
  * @param {接受字符数组} bytes
  * @return 返回的就是list形式
  */
-function getNodes(bytes: Array<any>): HuffmanNode[] {
-    //创建一个list
+function getNodes(bytes: any[]): HuffmanNode[] {
+    // 创建一个list
     let list: HuffmanNode[] = [];
-    //counts 统计每一个byte出现的次数
+    // counts 统计每一个byte出现的次数
     let counts: any = {};
     for (let b of bytes) {
         let count = counts[b]; // map还没有这个字符数据
         if (count == null) {
             counts[b] = 1;
-        } else {
+        }
+        else {
             counts[b]++;
         }
     }
@@ -84,7 +85,7 @@ function createHuffmanTree(nodes: HuffmanNode[]): HuffmanNode | undefined {
             parent.left = leftNode;
             parent.right = rightNode;
 
-            //将新的二叉树，加入到nodes
+            // 将新的二叉树，加入到nodes
             nodes.unshift(parent);
         }
 
@@ -118,44 +119,45 @@ function getHuffmanCodes(root: any) {
         string2.push(code);
         if (node != null) { // 如果node == null不处理
             // 判断当前node是叶子节点还是非叶子节点
-            if (node.data == null) {//非叶子节点
+            if (node.data == null) { // 非叶子节点
                 // 递归处理
                 // 向左递归
                 getCodes(node.left, '0', string2);
                 // 向右递归
-                getCodes(node.right, '1', string2)
-            } else {//说明是一个叶子节点
+                getCodes(node.right, '1', string2);
+            }
+            else { // 说明是一个叶子节点
                 // 就表示找到了某个叶子节点的最后
                 huffmanCodes[node.data] = string2.join('');
             }
         }
     }
-    getCodes(root, "", strings);
+    getCodes(root, '', strings);
     return huffmanCodes;
 }
 
-//编写一个方法，将字符串对应的bytes数组，通过生成的赫夫曼编码表，返回一个赫夫曼编码压缩后的byte数组
+
 /**
- *
+ * 编写一个方法，将字符串对应的bytes数组，通过生成的赫夫曼编码表，返回一个赫夫曼编码压缩后的byte数组
  * @param {原始的字符串对应的bytes数组} bytes
  * @param {生成的赫夫曼编码表} huffmanCodes
  * @return 返回的是字符串对应的一个byte数组
  */
-function zip(bytes: Array<number>, huffmanCodes: any) {
-    //1.利用huffmanCodes将bytes转成赫夫曼编码对应的字符串
+function zip(bytes: number[], huffmanCodes: any) {
+    // 1.利用huffmanCodes将bytes转成赫夫曼编码对应的字符串
     let string = [];
-    //遍历数组
+    // 遍历数组
     for (let b of bytes) {
         string.push(huffmanCodes[b]);
     }
     return string;
 }
 
-function huffStringToByte(strs: Array<string>) {
-    //计算赫夫曼编码字符串的长度
+function huffStringToByte(strs: string[]) {
+    // 计算赫夫曼编码字符串的长度
     let str = strs.join('');
     let len = Math.ceil(str.length / 8);
-    //创建存储压缩后的byte数组
+    // 创建存储压缩后的byte数组
     let huffmanCodeByte = new Array(len + 1);
     let index = 0;
     let strByte: string = ''; // 记录是第几个byte
@@ -178,7 +180,7 @@ function huffStringToByte(strs: Array<string>) {
  * @returns 是经过赫夫曼编码处理后，压缩后的字节数组
  *
  */
-function huffmanZip(bytes: Array<any>) {
+function huffmanZip(bytes: any[]) {
     // 1.生成节点数组
     let nodes = getNodes(bytes);
     // 2.根据节点数组创建赫夫曼树
@@ -204,31 +206,30 @@ function huffmanZip(bytes: Array<any>) {
  * @returns 是byte对应的二进制字符串
  */
 function huffByteToString(flag: boolean, byte: number) {
-    //如果是
+    // 如果是
     if (flag) {
         byte |= 256;
     }
-    let str = Number(byte).toString(2)
+    let str = Number(byte).toString(2);
     if (flag) {
         return str.substring(str.length - 8);
-    } else {
-        return str;
     }
+    return str;
 }
 
-//编写一份方法，完成对压缩数据的解码
+
 /**
- *
+ * 编写一份方法，完成对压缩数据的解码
  * @param {赫夫曼编码表} huffmanCodes
  * @param {赫夫曼编码得到的二进制数组} huffmanBytes
  */
-function decode(huffmanCodes: {[key:string]: string}, huffmanBytes: Array<number>) {
+function decode(huffmanCodes: {[key: string]: string}, huffmanBytes: number[]) {
     // 1.先得到二进制字符串 形式11001111111011......
     let heffmanStrArr = [];
     for (let i = 0; i < huffmanBytes.length - 1; i++) {
-        //判断是不是最后一个字节
+        // 判断是不是最后一个字节
         let flag = (i !== huffmanBytes.length - 2);
-        heffmanStrArr.push(huffByteToString(flag, huffmanBytes[i]))
+        heffmanStrArr.push(huffByteToString(flag, huffmanBytes[i]));
     }
     // 最后一位记录的是最后一位二进制字符串的长度，该长度主要用于补足最后一位丢失的0,所以要单独处理，
     let lastByteStr = heffmanStrArr[heffmanStrArr.length - 1];
@@ -237,7 +238,7 @@ function decode(huffmanCodes: {[key:string]: string}, huffmanBytes: Array<number
     heffmanStrArr[heffmanStrArr.length - 1] = lastByteStr;
 
     // 把赫夫曼编码表进行调换
-    let map: {[key:string]: string} = {};
+    let map: {[key: string]: string} = {};
     for (const [key, value] of Object.entries(huffmanCodes)) {
         map[value] = key;
     }
@@ -256,14 +257,15 @@ function decode(huffmanCodes: {[key:string]: string}, huffmanBytes: Array<number
                 break;
             }
             b = map[key];
-            if (!b) {//没有匹配到
+            if (!b) { // 没有匹配到
                 count++;
-            } else {
-                //匹配到
+            }
+            else {
+                // 匹配到
                 flag = false;
             }
         }
-        list.push(parseInt(b as string));
+        list.push(parseInt(b as string, 10));
         i += count;
     }
     // 当for循环结束后，list中就存放了所有的字符
@@ -273,7 +275,7 @@ function decode(huffmanCodes: {[key:string]: string}, huffmanBytes: Array<number
 
 
 // js byte[] 和string 相互转换 UTF-8
-function stringToByte(str: string): Array<number> {
+function stringToByte(str: string): number[] {
     let bytes = [];
     for (let index = 0; index < str.length; index++) {
         bytes.push(str.charCodeAt(index));
@@ -281,7 +283,7 @@ function stringToByte(str: string): Array<number> {
     return bytes;
 }
 
-function byteToString(arr: Array<number>): string {
+function byteToString(arr: number[]): string {
     let data = '';
     for (const code of arr) {
         data += String.fromCharCode(code);
@@ -294,7 +296,7 @@ export function huffmanEncode(str: string) {
     let {result, codes} = huffmanZip(bytes);
     return {
         codes,
-        result: byteToString(result)
+        result: byteToString(result),
     };
 }
 
@@ -303,24 +305,3 @@ export function huffmanDecode(codes: any, str: string) {
     const data = decode(codes, bytes);
     return byteToString(data);
 }
-
-// For test
-// let content = JSON.stringify({
-//     type: 3,
-//     fm: 'disp',
-//     data: [{"base":{"size":{"doc":{"w":360,"h":4875},"wind":{"w":360,"h":640},"scr":{"w":360,"h":640}},"vsb":"visible","num":16},"t":1629773746698,"path":"/s"}],
-//     qid: 10991431029479106376,
-//     did: '8dd09c47c7bc90c9fd7274f0ad2c581e',
-//     q: '刘德华',
-//     t: 1629773746698
-// });
-
-// console.log('压缩前的字符串', content, '其长度:', content.length);
-
-// const res = huffmanEncode(content);
-// console.log('压缩后的字符串长度', res.result.length);
-// console.log('压缩后的字符串', res.result);
-
-// const out = huffmanDecode(res.codes, res.result);
-// console.log('解压后的字符串', out, '其长度:', out.length);
-// console.log('解压后的数据', JSON.stringify(JSON.parse(out)));

package/src/lib/interface.ts

@@ -24,6 +24,11 @@ export interface SpyClientOption {
      * 日志服务器，默认是webb服务器，尾部需要加?
      */
     logServer?: string;
+
+    /**
+     * 本地日志cache对象，是指独立的spy-local-cache模块实例
+     */
+    localCache?: any;
 }
 
 export class Module {

package/src/spy-client-basic.ts

@@ -69,7 +69,9 @@ interface ErrorOption {
 
 const defaultLogServer = 'https://sp1.baidu.com/5b1ZeDe5KgQFm2e88IuM_a/mwb2.gif?';
 
-const isIos = /(iPhone|iPod|iPad)/.test(navigator.userAgent);
+const ver = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?)_/);
+const isLtIos14 = ver && ver[2] && (+ver[2] < 14);
+
 
 function err(msg: string) {
     console.error(`[SpyClient_log]${msg}`);
@@ -91,6 +93,10 @@ function stringify(obj: any) {
     }).join('&');
 }
 
+function isArray(arr: any) {
+    return Object.prototype.toString.call(arr) === '[object Array]';
+}
+
 interface SpyClientInnerOption extends SpyClientOption {
     logServer: string;
 }
@@ -113,18 +119,33 @@ export default class SpyClient {
             lid: option.lid,
             check: option.check !== false,
             sample: option.sample,
+            localCache: option.localCache,
             logServer: option.logServer || defaultLogServer,
         };
     }
 
-    send(query: any) {
-        if (!this.check(query)) {
+    handle(logItem: any) {
+        if (!this.check(logItem)) {
             return;
         }
 
+        logItem = assign(
+            {
+                pid: this.option.pid,
+                lid: this.option.lid,
+                ts: Date.now(),
+                group: 'common',
+            },
+            logItem
+        );
+
+        if (this.option.localCache) {
+            this.option.localCache.addLog(logItem);
+        }
+
         // 当前api设置了抽样，
-        if (typeof query.sample === 'number') {
-            if (Math.random() > query.sample) {
+        if (typeof logItem.sample === 'number') {
+            if (Math.random() > logItem.sample) {
                 return;
             }
         }
@@ -132,30 +153,32 @@ export default class SpyClient {
             return;
         }
 
-        query = assign(
-            {
-                pid: this.option.pid,
-                lid: this.option.lid,
-                ts: Date.now(),
-                group: 'common',
-            },
-            query
-        );
+        delete logItem.sample;
+        return logItem;
+    }
 
-        delete query.sample;
+    send(data: any, post = false) {
+        let logItems: any[] = isArray(data) ? data : [data];
 
-        const url = this.option.logServer + stringify(query);
+        let postData = [];
+        for (let logItem of logItems) {
+            logItem = this.handle(logItem);
+            if (!logItem) {
+                continue;
+            }
 
-        // 目前服务器端支持sendBeacon的post请求，可以优先采用，该api可以降低打点丢失率
-        // 但是ios有些问题：在webkit浏览内核环境下，beacon requests的请求方式存在证书验证的bug.
-        // 修复说明在如下链接中：https://bugs.webkit.org/show_bug.cgi?id=193508
-        // 但是目前为止，在iOS12.2版本中该问题依旧存在
-        if (!(
-            !isIos
-            && navigator.sendBeacon
-            && navigator.sendBeacon(url)
-        )) {
-            (new Image()).src = url;
+            postData.push(logItem);
+
+            // 期望通过post方式上传日志
+            if (post) {
+                continue;
+            }
+
+            const url = this.option.logServer + stringify(logItem);
+            this.request(url);
+        }
+        if (post) {
+            this.sendPost(postData);
         }
     }
 
@@ -315,4 +338,50 @@ export default class SpyClient {
     clearAllMark() {
         this.markCache = {};
     }
+
+    // send(data, true) 也能以post发送，但是会有严格校验
+    // sendPost能以post发送，但没有校验
+    sendPost(data: any) {
+        let logItems: any[] = isArray(data) ? data : [data];
+        const first = logItems[0];
+        // 需要在页面暴漏出来pid等基本信息，方式调试查看基本信息与兼容目前的监控
+        const query = {
+            pid: first.pid,
+            type: first.type,
+            group: first.group,
+        };
+        const url = this.option.logServer + stringify(query);
+
+        this.request(url, data);
+    }
+
+    // 有data时，意味着要用post发送请求
+    protected request(url: string, data?: any) {
+        if (!(
+            !isLtIos14
+            && navigator.sendBeacon
+            && navigator.sendBeacon(url, data ? JSON.stringify(data) : undefined)
+        )) {
+            if (data) {
+                this.fetch(url, data);
+            }
+            else {
+                (new Image()).src = url;
+            }
+        }
+    }
+
+    protected fetch(url: string, data: any) {
+        if (!window.fetch) {
+            return;
+        }
+        fetch(url, {
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(data),
+        });
+    }
 }

package/src/spy-client.ts

@@ -27,7 +27,7 @@ import {
     ResOption,
     BigImgOption,
     HttpResOption,
-    SlowOption
+    SlowOption,
 } from './lib/interface';
 
 import FID from './module/fid';
@@ -70,6 +70,24 @@ export default class SpyClient extends SpyClientBasic {
         document.addEventListener('visibilitychange', this.visibilitychangeCB);
         window.addEventListener('beforeunload', this.leave, false);
         window.addEventListener('unload', this.leave, false);
+
+        this.handleHead();
+    }
+
+    handleHead() {
+        if (this.option.localCache) {
+            const spyHead = window.__spyHead;
+            if (spyHead && spyHead.winerrors) {
+                for (let index = 0; index < spyHead.winerrors.length; index++) {
+                    const obj = spyHead.winerrors[index];
+                    this.option.localCache.addLog(obj);
+                }
+                // Head发送的异常，也保存一份到本地，主要是JS错误和资源加载异常
+                spyHead.interceptor = (obj: any) => {
+                    this.option.localCache.addLog(obj);
+                };
+            }
+        }
     }
 
     listenFID(cb: FIDCB) {