原理：
通过劫持原始方法，获取需要上报的数据，最后再执行原始方法，这样就能实现无痕埋点。使用模块化工具打包自己开发的JS库
http://anata.me/2018/06/06/%E4%BD%BF%E7%94%A8%E6%A8%A1%E5%9D%97%E5%8C%96%E5%B7%A5%E5%85%B7%E6%89%93%E5%8C%85%E8%87%AA%E5%B7%B1%E5%BC%80%E5%8F%91%E7%9A%84JS%E5%BA%93/ 小程序SDK 实现 https://juejin.im/post/5b222c6e51882574cd52fc68 修改原生方法是一件很容易的事，然而并不鼓励这样做！
实现拦截
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);
}
}); 监控异常
SDK暴露一个接口，让接入方自己在onError中调用我们的接口。
App({
onError: function (err) {
monitor.notifyError(err)
}
}) 上报数据
方案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的代码结构， 上报前的数据收集和聚合
网友评论