本文作者：cjinhuo，未经授权禁止转载。

背景

接着前两个系列文章：

前端监控平台系列：JS SDK（已开源）

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

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

web监控与小程序监控

web监控

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

在线体验demo

mito-demo

SDK信息收集-在线示例

微信小程序监控

微信小程序监控其实也是通过劫持微信官方抛出的全局对象的方法，由于小程序的运行环境并没有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！！！

已实现功能点：

已实现以下功能点：

收集信息平台展示

该SDK能收集哪些信息：下面这些例子给你一一展示：

结尾

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

前端监控平台系列：微信小程序监控和Web监控（已开源）

背景