JS完成監控微信小順序

博客地址

《運用模塊化東西打包本身開闢的JS庫》文章中有提到,當時須要寫一個SDK,監控小順序的背景接口挪用和頁面報錯,本日就來說下完成道理吧!

道理

之前也做過瀏覽器web端的SDK數據埋點上報,實在道理迥然不同:經由過程挾制原始要領,獵取須要上報的數據,末了再實行原始要領,如許就能夠完成無痕埋點。

舉個例子:我願望監控一切web頁面的ajax要求,每次發送ajax,都須要在控制台打印出發送的url

日常平凡我們開闢,發送ajax平常用的都是封裝好的庫,比方jQuery,Axios等,但是這些庫,底層依然用的是瀏覽器原生的XMLHttpRequest對象,因而,我們只須要修正XMLHttpRequest對象即可

注重:由於JS的靈活性,修正原生要領是一件很輕易的事,但是並不勉勵如許做!

// 把這段代碼放在一切JS代碼之前,我們就完成了阻攔ajax的需求
window.XMLHttpRequest.prototype.open = (function(originOpen) {
    return function(method, url, async) {
        
        console.log('發送了ajax,url是: ', url);

        return originOpen.apply(this, arguments);
    };
})(window.XMLHttpRequest.prototype.open);

在這個馬上實行函數中,我們把原生的open要領經由過程originOpen臨時存儲起來,然後在外面包裹一層函數,完成了打印輸出url的功用,末了經由過程originOpen.apply讓原生要領運轉,如許就完成了無痕阻攔。

監控小順序

阻攔wx.request

小順序的運轉環境並沒有windowdocument對象,它只暴露了一個wx全局對象,發送網絡要求則是經由過程wx.request這個api,因而,此次我們須要阻攔的就是wx.request要領

我們試着變動一下wx.request

wx.request = function() {
    console.log('66666');
}

這時刻控制台會報錯TypeError: Cannot set property request of #<Object> which has only a getter

這是由於,wx.request這個屬性,只要get要領而沒有set要領,我們能夠經由過程Object.getOwnPropertyDescriptor考證:

const des = Object.getOwnPropertyDescriptor(wx, 'request');

//  des {
//   configurable: true,
//   enumerable: true,
//   get: f(),
//   set: undefined
// }

我們能夠換種體式格局修正:

const originRequest = wx.request;
Object.defineProperty(wx, 'request', {
    configurable: true,
    enumerable: true,
    writable: true,
    value: function() {
        const config = arguments[0] || {};
        const url = config.url;
        console.log('發送了ajax,url是: ', url);

        return originRequest.apply(this, arguments);
    }
});

此次就完成阻攔功用了!

監控非常

小順序的註冊函數App有個全局的onError要領,我們能夠在小順序的進口文件app.js先註冊一個該要領:

App({
    onError: function(err) {
        console.log('上報毛病啦!');
        wx.request({
            url: 'http://monitor.com/monitor/error',
            data: err
        })
    }
})

App({
    // 其他邏輯
})

不過須要注重的是:假如後續的順序重寫了onError的話,將會致使之前註冊的onError失效。

解決要領能夠是:我們監控SDK能夠暴露一個接口,讓接入方本身在onError中挪用我們的接口。

App({
  onError: function (err) {
    monitor.notifyError(err)
  }
})

上報數據

網絡好須要的數據后,固然就要上報背景。怎樣上報?固然照樣用的wx.request發送要求。

這裏就輕易湧現一個死循環: 假如用之前被我們包裝過的wx.request上報數據,那末上報數據這個ajax要求,也會被我們認為是一般的ajax要求,然後又會觸发上報,如許來來回回,無窮無盡的發送上報數據。

解決要領有多種,比方:

計劃1

能夠在包裝wx.request的時刻,推斷髮送的url假如是上報接口,那末就不再上報了。

const originRequest = wx.request;
Object.defineProperty(wx, 'request', {
    configurable: true,
    enumerable: true,
    writable: true,
    value: function() {
        const config = arguments[0] || {};
        const url = config.url;
        if (url.indexOf('http://monitor.com') > -1) {
            // 直接發送要求,不上報
            return originRequest.apply(this, arguments);
        }

        console.log('上報ajax數據啦!');
        wx.request({
            url: 'http://monitor.com/monitor/ajax',
            data: config.data
        })

        return originRequest.apply(this, arguments);
    }
});

計劃2

在包裝wx.request之前,保存一份最原始的wx.request要領,一切的上報要求,就不走被包裝過的要領,而走最原始的要領。

const myRequest = wx.request;

const wrapRequest = function () {
    const originRequest = wx.request;
    Object.defineProperty(wx, 'request', {
        configurable: true,
        enumerable: true,
        writable: true,
        value: function() {
            const config = arguments[0] || {};
            const url = config.url;
       
            console.log('上報數據啦!');
            // 運用最原始的request要領
            myRequest({
                url: 'http://monitor.com/monitor/ajax',
                data: config.data
            })

            return originRequest.apply(this, arguments);
        }
    });
}

wrapRequest();

其他事項

現實開闢中固然另有更多的細節,比方監控項目的鑒權,SDK的代碼構造,上報前的數據網絡和聚合等等,本文就不細緻展開了。

    原文作者:深紅
    原文地址: https://segmentfault.com/a/1190000015290257
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞