资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JS实现监控微信小程序

JS实现监控微信小程序

Cheriselalala / 3421人阅读

摘要：博客地址使用模块化工具打包自己开发的库文章中有提到，当时需要写一个，监控小程序的后台接口调用和页面报错，今天就来说下实现原理吧原理之前也做过浏览器端的数据埋点上报，其实原理大同小异通过劫持原始方法，获取需要上报的数据，最后再执行原始方法，这

博客地址

《使用模块化工具打包自己开发的JS库》文章中有提到，当时需要写一个SDK，监控小程序的后台接口调用和页面报错，今天就来说下实现原理吧！

原理

之前也做过浏览器web端的SDK数据埋点上报，其实原理大同小异：通过劫持原始方法，获取需要上报的数据，最后再执行原始方法，这样就能实现无痕埋点。

举个例子：我希望监控所有web页面的ajax请求，每次发送ajax，都需要在控制台打印出发送的url

平时我们开发，发送ajax一般用的都是封装好的库，例如jQuery,Axios等，然而这些库，底层仍然用的是浏览器原生的XMLHttpRequest对象，因此，我们只需要修改XMLHttpRequest对象即可

注意：由于JS的灵活性，修改原生方法是一件很容易的事，然而并不鼓励这样做！

</>复制代码 
  1. // 把这段代码放在所有JS代码之前，我们就实现了拦截ajax的需求
  2. window.XMLHttpRequest.prototype.open = (function(originOpen) {
  3.     return function(method, url, async) {
  4.         
  5.         console.log("发送了ajax，url是: ", url);
  6.         return originOpen.apply(this, arguments);
  7.     };
  8. })(window.XMLHttpRequest.prototype.open);

在这个立即执行函数中，我们把原生的open方法通过originOpen暂时存储起来，然后在外面包裹一层函数，实现了打印输出url的功能，最后通过originOpen.apply让原生方法运行，这样就实现了无痕拦截。

监控小程序 拦截wx.request

小程序的运行环境并没有window和document对象，它只暴露了一个wx全局对象，发送网络请求则是通过wx.request这个api，因此，这次我们需要拦截的就是wx.request方法

我们试着更改一下wx.request

</>复制代码 
  1. wx.request = function() {
  2.     console.log("66666");
  3. }

这时控制台会报错TypeError: Cannot set property request of # which has only a getter

这是因为，wx.request这个属性，只有get方法而没有set方法，我们可以通过Object.getOwnPropertyDescriptor验证：

</>复制代码 
  1. const des = Object.getOwnPropertyDescriptor(wx, "request");
  2. //  des {
  3. //   configurable: true,
  4. //   enumerable: true,
  5. //   get: f(),
  6. //   set: undefined
  7. // }

我们可以换种方式修改：

</>复制代码 
  1. const originRequest = wx.request;
  2. Object.defineProperty(wx, "request", {
  3.     configurable: true,
  4.     enumerable: true,
  5.     writable: true,
  6.     value: function() {
  7.         const config = arguments[0] || {};
  8.         const url = config.url;
  9.         console.log("发送了ajax，url是: ", url);
  10.         return originRequest.apply(this, arguments);
  11.     }
  12. });

这次就实现拦截功能了！

监控异常

小程序的注册函数App有个全局的onError方法，我们可以在小程序的入口文件app.js先注册一个该方法:

</>复制代码 
  1. App({
  2.     onError: function(err) {
  3.         console.log("上报错误啦！");
  4.         wx.request({
  5.             url: "http://monitor.com/monitor/error",
  6.             data: err
  7.         })
  8.     }
  9. })
  10. App({
  11.     // 其他逻辑
  12. })

不过需要注意的是：如果后续的程序重写了onError的话，将会导致之前注册的onError失效。

解决方法可以是：我们监控SDK可以暴露一个接口，让接入方自己在onError中调用我们的接口。

</>复制代码 
  1. App({
  2.   onError: function (err) {
  3.     monitor.notifyError(err)
  4.   }
  5. })
上报数据

收集好需要的数据后，当然就要上报后台。怎么上报？当然还是用的wx.request发送请求。

这里就容易出现一个死循环: 如果用之前被我们包装过的wx.request上报数据，那么上报数据这个ajax请求，也会被我们认为是普通的ajax请求，然后又会触发上报，这样来来回回，无穷无尽的发送上报数据。

解决方法有多种，比如：

方案1

可以在包装wx.request的时候，判断发送的url如果是上报接口，那么就不再上报了。

</>复制代码 
  1. const originRequest = wx.request;
  2. Object.defineProperty(wx, "request", {
  3.     configurable: true,
  4.     enumerable: true,
  5.     writable: true,
  6.     value: function() {
  7.         const config = arguments[0] || {};
  8.         const url = config.url;
  9.         if (url.indexOf("http://monitor.com") > -1) {
  10.             // 直接发送请求，不上报
  11.             return originRequest.apply(this, arguments);
  12.         }
  13.         console.log("上报ajax数据啦!");
  14.         wx.request({
  15.             url: "http://monitor.com/monitor/ajax",
  16.             data: config.data
  17.         })
  18.         return originRequest.apply(this, arguments);
  19.     }
  20. });

方案2

在包装wx.request之前，保留一份最原始的wx.request方法，所有的上报请求，就不走被包装过的方法，而走最原始的方法。

</>复制代码 
  1. const myRequest = wx.request;
  2. const wrapRequest = function () {
  3.     const originRequest = wx.request;
  4.     Object.defineProperty(wx, "request", {
  5.         configurable: true,
  6.         enumerable: true,
  7.         writable: true,
  8.         value: function() {
  9.             const config = arguments[0] || {};
  10.             const url = config.url;
  11.        
  12.             console.log("上报数据啦!");
  13.             // 使用最原始的request方法
  14.             myRequest({
  15.                 url: "http://monitor.com/monitor/ajax",
  16.                 data: config.data
  17.             })
  18.             return originRequest.apply(this, arguments);
  19.         }
  20.     });
  21. }
  22. wrapRequest();
其他事项

实际开发中当然还有更多的细节，比如监控项目的鉴权，SDK的代码结构，上报前的数据收集和聚合等等，本文就不详细展开了。

GPU云服务器 云服务器 微信小程序技术实现 微信小程序答题js 微信小程序获取js值 微信小程序支持的js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95455.html

相关文章

  • 监控微信小程序wx.request请求失败

    摘要：微信小程序运维中心提供了错误日志记录，但功能还是比较有限。有时候一个微信小程序可能会用到多个第三方服务，从多个域名获取数据。要使用监控，你需要去网站注册账号并创建一个微信小程序监控项目，然后按照提示接入插件。 在微信小程序里，与后台服务器交互的主要接口函数是wx.request()，用于发起 HTTPS 网络请求。其重要性不言而喻。然而，却经常遇到请求失败的问题，笔者特意谷歌wx.re...

    lpjustdoit 评论0 收藏0

  • 99%的程序都没有考虑的网络异常？使用Fundebug.notify()主动上报

    摘要：而且官方也给出了示例在回调函数中上报异常为了确保完全掌握小程序的运行状况，我们将异常上报。的微信小程序插件除了可以自动捕获异常外，还支持通过接口主动上报异常。 近日看到一篇文章99%的程序都没有考虑的网络异常，开篇提到： 绝大多数程序只考虑了接口正常工作的场景，而用户在使用我们的产品时遇到的各类异常，全都丢在看似 ok 的 try catch 中。如果没有做好异常的兼容和兜底处理，会极...

    ChanceWong 评论0 收藏0

发表评论

登陆后可评论

0条评论

Cheriselalala

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
UCloud （优刻得科技股份有限公司）

UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。

Copyright © 2012-2025 UCloud 优刻得科技股份有限公司｜沪公网安备 31011002000058号｜ 沪ICP备12020087号-3｜
<