JS实现监控微信小程序的原理


Posted in Javascript onJune 15, 2018

原理

之前也做过浏览器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失效。

解决方法可以是:我们监控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的代码结构,上报前的数据收集和聚合等等,本文就不详细展开了。

总结

以上所述是小编给大家介绍的JS实现监控微信小程序的原理,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
JS如何生成动态列表
Sep 22 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 Javascript
vue .sync修饰符的使用详解
Jun 15 #Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 #Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 #Javascript
vue和webpack安装命令详解
Jun 15 #Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 #Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 #Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 #Javascript
You might like
php4的session功能评述(二)
2006/10/09 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
解析yii数据库的增删查改
2013/06/20 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
初识javascript 文档碎片
2010/07/13 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
详解参数传递四种形式
2015/07/21 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
angularJS模态框$modal实例代码
2017/05/27 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
业务主管岗位职责
2013/11/20 职场文书
个人近期表现材料
2014/02/11 职场文书
高级编程求职信模板
2014/02/16 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript