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 相关文章推荐
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
100行代码实现vue表单校验功能(小白自编)
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
php实现mysql同步的实现方法
2009/10/21 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
一篇.NET面试题
2014/09/29 面试题
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
社会实践感言
2014/01/25 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
幼师中班个人总结
2015/02/12 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
发票退票证明
2015/06/24 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
关于做家务的心得体会
2016/01/23 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
vue特效之翻牌动画
2022/04/20 Vue.js