《運用模塊化東西打包本身開闢的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的代碼構造，上報前的數據網絡和聚合等等，本文就不細緻展開了。
