微信小程序JS實現監控

// 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();

這些技術如何學習，有沒有免費資料？

對前端的技術，架構技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料

知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！！

閱讀更多 前端攻城小牛 的文章

關鍵字: 軟件 原始 上報