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