微信小程序监控
微信小程序监控其实也是通过劫持微信官方抛出的全局对象的方法，由于小程序的运行环境并没有window和document对象，它只暴露了一个wx全局对象，所以变换下思路，比如我要拦截页面的ajax请求，在web端重写window.XMLHttpRequest和fetch，在微信小程序端则重写wx.request
下面就来讲讲部分web端与微信小程序的监控编写思路区别
监控ajax
web端监控ajax
xhrReplace
web重写xhr
微信小程序监控ajax
wx-network
微信小程序重写request
监控页面路由
web端监控页面路由
在web端的history模式下需要重写pushState、replaceState，在hash模式下，需要监听hashchange事件:
onpopstate
web重写onPopstate
整体流程
微信小程序监控路由
需要重写wx原型的以下这几个方法，并拿到路由信息
wx-route
微信小程序路由切换事件枚举
这边需要注意一个小细节，如果是小程序后退的话是走到navigateBack回调，这是需要自己手动计算当前的url
wx-calculate-route
计算后退时的路由
监控onerror
web端监控onerror
web-error
web监听error事件
微信小程序监控onerror
wx-error
微信小程序重写error函数
获取用户行为
获取用户行为，比如click事件，在web端是可以直接在在document上监听的click事件，这样所有的子元素的click事件都会捕获到。但在小程序中并没有这种方式，所以借鉴百度的做法：重写所有的Page下的所有方法，拿到第一个入参e，判断这个参数是否含有type和currentTarget这种属性，有的话我就认为是类似tab、touchmove这种人为操作事件回调，当然要再继续往下判断，如果确实是人为操作事件那么就可以取出对应信息。
web端获取用户行为
web-click
web捕获全局click事件
微信小程序监控用户行为
wx-tab
微信小程序捕获tap、touchmove事件
由于微信小程序中的e.currentTarget没有标签的内容，所以只能拿到该元素的dataSets和id，所以就有了下面的工具函数
wx-target-string
小程序获取currentTarget的id与dataSets
异同
开发思路相同
从上面几种监控来看，要想拿到对应信息，除了添加监听器就是截取对应的全局变量的属性或函数
数据结构与重写思路不同
比如web端的onError返回是一个Error对象，里面有name、message、stack属性，然而小程序的onError返回的是一个字符串，虽然JSON.stringify后的数据格式与web端差不多，但是如果我们想要获取信息，需要自己写正则来获取对应的name、message、stack信息
wx-typeof-error
微信小程序的onError回调参数
在web端我们想重写fetch的话先临时保存一份旧的引用地址，然后赋值一个新的函数，并且在这个函数的末尾返回旧的引用地址就行
web-simple-fetch
web简易版重写fetch
在微信小程序中要想上面一种方式重写wx.request的话会出现错误：TypeError: Cannot assign to read only property 'request' of object '#<Object>'，在微信小程序控制台执行代码:Object.getOwnPropertyDescriptors(wx.request):
{
"length": { "value": 0, "writable": false, "enumerable": false, "configurable": true },
"name": { "value": "value", "writable": false, "enumerable": false, "configurable": true }
}
复制代码
可以发现wx.request是不写的，细心的同学估计这时应该知道怎么办了，因为上面已经重写过wx.request了。这时需要用Object.defineProperty来重新给这个对象设置描述符了
wx-simple-request
微信小程序简易版重写request
开源
无论上述你是否了解，现有开源mitojs监控SDK你都值得拥有，有丰富的hooks与配置项支持可高定制化公司业务，喜欢的小伙伴记得star😘
mitojs：一款轻量级的收集页面的用户点击行为、路由跳转、接口报错、代码报错、并上报服务端的SDK！！！
已实现功能点：
已实现以下功能点：
-
<input type="checkbox" checked="" disabled=""> 🔨监听请求错误
-
<input type="checkbox" checked="" disabled=""> 🔨console
-
<input type="checkbox" checked="" disabled=""> 🔨路由跳转
-
<input type="checkbox" checked="" disabled=""> 🔨代码报错
-
<input type="checkbox" checked="" disabled=""> 🔨click、wx:tab、touchmove
-
<input type="checkbox" checked="" disabled=""> 🔨资源加载错误
-
<input type="checkbox" checked="" disabled=""> 🏅自定义上报错误
-
<input type="checkbox" checked="" disabled=""> 🚀丰富的hooks与配置项支持可高定制化
-
<input type="checkbox" checked="" disabled=""> 🌝支持IE8和安卓5以上
-
<input type="checkbox" checked="" disabled=""> 👌持续迭代与更新
-
<input type="checkbox" checked="" disabled=""> 支持react@next
-
<input type="checkbox" checked="" disabled=""> 支持Vue2.6
-
<input type="checkbox" checked="" disabled=""> 支持Vue3.0
-
<input type="checkbox" checked="" disabled=""> 完善的e2e测试
-
<input type="checkbox" checked="" disabled=""> 支持原生微信小程序
-
<input type="checkbox" checked="" disabled=""> 支持uni-app等微信小程序框架
-
<input type="checkbox" checked="" disabled=""> 完善的单元测试（coding）
收集信息平台展示
该SDK能收集哪些信息：下面这些例子给你一一展示：
结尾
感谢你的阅读，日前智云健康大前端正在参加掘金人气团队评选活动。如果你觉得还不错的话，那就来 给我们投几票 吧！你的支持是是我们最大的动力。
作者：智云健康大前端团队
链接：https://juejin.cn/post/6921549680639737863
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论