范围:深圳亚博app开发,软件定制开发,亚博app软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

亚博-微信小程序JS监控后台功能开发

07-09 亚博APP
摘要:阅读器web真个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, argume亚博nts);

};

})(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 # 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掉效。 解决方式可所以:我们监控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();其他事项

现实开辟中固然还更多的细节,好比监控项目标鉴权,SDK的代码布局,上报前的数据搜集和聚合等等,本文就不具体睁开了。

相干资讯:微信小法式微信小法式开辟教程

版权保护: 本文由 亚博app开发 原创
转载请保留链接: http://www.cqsLin.com

关于我们      深圳亚博定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、亚博app开发、微信公众号开发、深圳亚博小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机亚博app开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数