原理

之前也做過瀏覽器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失效。