**JS**实现监控微信小程序

原理:
通过劫持原始方法,获取需要上报的数据,最后再执行原始方法,这样就能实现无痕埋点。使用模块化工具打包自己开发的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的代码结构, 上报前的数据收集和聚合

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容