spy-client 2.1.1-alpha.4 → 2.1.4

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,49 +119,112 @@ 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)) {
+    fetch(url: string, data: any) {
+        if (!window.fetch) {
             return;
         }
+        fetch(url, {
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(data),
+        });
+    }
 
-        // 当前api设置了抽样，
-        if (typeof query.sample === 'number') {
-            if (Math.random() > query.sample) {
-                return;
-            }
+    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);
+
+        if (!(
+            !isLtIos14
+            && navigator.sendBeacon
+            && navigator.sendBeacon(url, JSON.stringify(data))
+        )) {
+            this.fetch(url, data);
         }
-        else if (typeof this.option.sample === 'number' && Math.random() > this.option.sample) { // 否则，用全局抽样
+    }
+
+    handle(logItem: any) {
+        if (!this.check(logItem)) {
             return;
         }
 
-        query = assign(
+        logItem = assign(
             {
                 pid: this.option.pid,
                 lid: this.option.lid,
                 ts: Date.now(),
                 group: 'common',
             },
-            query
+            logItem
         );
 
-        delete query.sample;
+        if (this.option.localCache) {
+            this.option.localCache.addLog(logItem);
+        }
 
-        const url = this.option.logServer + stringify(query);
+        // 当前api设置了抽样，
+        if (typeof logItem.sample === 'number') {
+            if (Math.random() > logItem.sample) {
+                return;
+            }
+        }
+        else if (typeof this.option.sample === 'number' && Math.random() > this.option.sample) { // 否则，用全局抽样
+            return;
+        }
 
-        // 目前服务器端支持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;
+        delete logItem.sample;
+        return logItem;
+    }
+
+    send(data: any, post = false) {
+        let logItems: any[] = isArray(data) ? data : [data];
+
+        let postData = [];
+        for (let logItem of logItems) {
+            logItem = this.handle(logItem);
+            if (!logItem) {
+                continue;
+            }
+
+            postData.push(logItem);
+
+            // 期望通过post方式上传日志
+            if (post) {
+                continue;
+            }
+
+            const url = this.option.logServer + stringify(logItem);
+
+            // 目前服务器端支持sendBeacon的post请求，可以优先采用，该api可以降低打点丢失率
+            // 但是ios有些问题：在webkit浏览内核环境下，beacon requests的请求方式存在证书验证的bug，发送失败但返回正确.
+            // 修复说明在如下链接中：https://bugs.webkit.org/show_bug.cgi?id=193508
+            // 但是目前为止，在iOS12.2版本中该问题依旧存在
+            // 2021-11-11： 发现ios 14可以送，故小于14的不发送
+            if (!(
+                !isLtIos14
+                && navigator.sendBeacon
+                && navigator.sendBeacon(url)
+            )) {
+                (new Image()).src = url;
+            }
+        }
+        if (post) {
+            this.sendPost(postData);
         }
     }
 

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) {

package/src/spy-local-cache.ts

@@ -6,9 +6,10 @@ interface Option {
     key: string;
     maxRecordLen: number;
     interval: number;
-    onFlush: (res: any) => void;
+    onFlush?: (res: any) => void;
+    onSave?: (res: any) => void;
+    onAdd?: (res: any) => boolean;
     storage: 'indexedDB' | 'localstorage' | 'empty';
-    costTime?: (time: string) => void;
 }
 
 class Storage {
@@ -280,6 +281,10 @@ export default class SpyLocalCache {
             interval: 500,
             maxRecordLen: 30,
             onFlush: () => {},
+            onSave: () => {},
+            onAdd: () => {
+                return true;
+            },
             storage: IndexedDB.isSupport()
                 ? 'indexedDB'
                 : LS.isSupport()
@@ -318,6 +323,12 @@ export default class SpyLocalCache {
     }
 
     addLog(info: any) {
+        if (this.option.onAdd) {
+            if (!this.option.onAdd(info)) {
+                return;
+            }
+        }
+
         info = JSON.stringify(info);
 
         this.tmpList.push(info as string);
@@ -363,28 +374,42 @@ export default class SpyLocalCache {
     }
 
     save() {
+        const st = Date.now();
         this.getData((list: any[]) => {
             // 只保留最近的maxRecordLen条日志
             const reserveLen = this.option.maxRecordLen - 1;
             const originList = list.length > reserveLen ? list.slice(list.length - reserveLen, list.length) : list;
-            let content = originList.concat(this.tmpList).join('\n');
-            let data = this.zip(content);
-            let codesStr = '';
-            if (data.codes) {
-                codesStr = JSON.stringify(data.codes);
-                this.storage.set(this.option.key + 'Codes', codesStr);
-            }
-            else {
-                this.storage.rm(this.option.key + 'Codes');
+            let newList = originList.concat(this.tmpList);
+            let content = newList.join('\n');
+            let error: Error | null = null;
+            let len = 0;
+            try {
+                let data = this.zip(content);
+                let codesStr = '';
+                if (data.codes) {
+                    codesStr = JSON.stringify(data.codes);
+                    this.storage.set(this.option.key + 'Codes', codesStr);
+                }
+                else {
+                    this.storage.rm(this.option.key + 'Codes');
+                }
+
+                this.storage.set(this.option.key, data.result);
+                len = data.result.length;
             }
-            const startTime = performance.now();
-            this.storage.set(this.option.key, data.result);
-            const costTime = ((performance.now() - startTime) * 100).toFixed(0);
-            if (this.option.costTime) {
-                this.option.costTime(costTime);
+            catch (e) {
+                error = e;
+                console.error(e);
             }
 
             this.tmpList = [];
+
+            this.option.onSave && this.option.onSave({
+                cost: Date.now() -  st,
+                length: len / 1024,
+                list: newList,
+                error: error,
+            });
         });
     }