前端监控平台系列:微信小程序监控和Web监控(已开源)

微信小程序监控

微信小程序监控其实也是通过劫持微信官方抛出的全局对象的方法,由于小程序的运行环境并没有windowdocument对象,它只暴露了一个wx全局对象,所以变换下思路,比如我要拦截页面的ajax请求,在web端重写window.XMLHttpRequestfetch,在微信小程序端则重写wx.request

下面就来讲讲部分web端与微信小程序的监控编写思路区别

监控ajax

web端监控ajax

xhrReplace

web重写xhr

微信小程序监控ajax

wx-network

微信小程序重写request

监控页面路由

web端监控页面路由

在web端的history模式下需要重写pushStatereplaceState,在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,判断这个参数是否含有typecurrentTarget这种属性,有的话我就认为是类似tabtouchmove这种人为操作事件回调,当然要再继续往下判断,如果确实是人为操作事件那么就可以取出对应信息。

web端获取用户行为

web-click

web捕获全局click事件

微信小程序监控用户行为

wx-tab

微信小程序捕获tap、touchmove事件

由于微信小程序中的e.currentTarget没有标签的内容,所以只能拿到该元素的dataSetsid,所以就有了下面的工具函数

wx-target-string

小程序获取currentTarget的id与dataSets

异同

开发思路相同

从上面几种监控来看,要想拿到对应信息,除了添加监听器就是截取对应的全局变量的属性或函数

数据结构与重写思路不同

比如web端的onError返回是一个Error对象,里面有name、message、stack属性,然而小程序的onError返回的是一个字符串,虽然JSON.stringify后的数据格式与web端差不多,但是如果我们想要获取信息,需要自己写正则来获取对应的namemessagestack信息

wx-typeof-error

微信小程序的onError回调参数

在web端我们想重写fetch的话先临时保存一份旧的引用地址,然后赋值一个新的函数,并且在这个函数的末尾返回旧的引用地址就行

web-simple-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来重新给这个对象设置描述符了

wx-simple-request

微信小程序简易版重写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
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

你可能感兴趣的:(前端监控平台系列:微信小程序监控和Web监控(已开源))