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让原生方法运行，这样就实现了无痕拦截。

小程序的运行环境并没有window和document对象，它只暴露了一个wx全局对象，发送网络请求则是通过wx.request这个api，因此，这次我们需要拦截的就是wx.request方法

我们试着更改一下wx.request

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

这时控制台会报错TypeError: Cannot set property request of #