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

智云健康

本文作者:cjinhuo,未经授权禁止转载。

背景

接着前两个系列文章:

前端监控平台系列:JS SDK(已开源)

前端监控平台系列:服务端功能设计与实现

这篇的主要目的讲下微信小程序(wx-mini)监控与Web监控的区别,以及如何编写,文章末尾附Github开源地址!!!

web监控与小程序监控


web监控

这篇:前端监控平台系列:JS SDK(已开源)文章已经讲的很清楚怎么劫持原生的函数,并拿到我们想要的信息,如果页面正常运行时则记录用户行为栈,如果页面报错时则上报该错误并将用户行为栈一并上报,这样有助于开发者更快的定位线上问题。

在线体验demo

mito-demo

SDK信息收集-在线示例

微信小程序监控

微信小程序监控其实也是通过劫持微信官方抛出的全局对象的方法,由于小程序的运行环境并没有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>',在微信小程序控制台执行代码: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-示例

结尾

感谢你的阅读,日前智云健康大前端正在参加掘金人气团队评选活动。如果你觉得还不错的话,那就来 给我们投几票 吧!你的支持是是我们最大的动力。

文章分类
前端
文章标签