《運用模塊化東西打包本身開闢的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
小順序的運轉環境並沒有window
和document
對象,它只暴露了一個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的代碼構造,上報前的數據網絡和聚合等等,本文就不細緻展開了。