使用 Typescript 开发小程序前端错误及性能监控 SDK

前言

上篇文章分析了web 端错误及性能监控 SDK的实现方式，本篇则聚焦于小程序。尽管微信小程序本身就自带了监控能力，但如果我们需要更完善的数据，比如在出错时展示更多的信息如函数调用栈、行为轨迹、缓慢请求等，则需要自己去监控收集。

原来在开发这套前端监控 SDK 时，我将 web 和小程序的监控糅合在了一起，但后来发现平台差异使得同一个模块产生很多异化的逻辑，甚至在初始化的时候也要增加环境的判断，这种异化的处理降低了后续的可维护性，因此最终还是将 SDK 拆分成两套。

在开发小程序监控 SDK 时，首先明确的是，SDK 需要提供什么样的能力，或者说帮助我们获取什么数据。由于要获取的数据上篇已提及，这里看看我们设计的小程序端的 SDK 需要提供什么能力。

SDK 提供的能力

基础监控

• 错误监控：包括 js 、promise 、http
• 性能监控：页面性能

附加能力

• 缓慢 HTTP 请求监控
• 用户行为轨迹监控
• 错误过滤、错误抽样（本篇不作介绍，SDK 已实现）

SDK 在最终使用上依然采用基于事件订阅的方式，下面分析下这些能力在小程序端如何实现

错误监控

使用小程序生命周期提供了 onError，重写 Page 即可

App = function (appOptions) { appHooks.forEach((methodName) => { const originMethod = appOptions[methodName]; (appOptions as any)[methodName] = function (param: any) { const error = param as Error; if (methodName === "onError") { monitor.handleErrorEvent(TrackerEvents.jsError, error); } return originMethod && originMethod.call(this, param); }; }); return originApp(appOptions); }; 

对于 promise 错误，小程序提供onUnhandledRejection，但官方文档指出此事件当前在安卓平台并不会生效，因此需要做一下 hack 处理，通过 console 的劫持进行判断

export function rewriteConsole(monitor: Monitor) { for (const key of Object.keys(console)) { if (key in console) { const methodName = key as KeyofConsole; if (typeof console[methodName] !== "function") { continue; } if (!hackConsoleFn.includes(methodName)) { continue; } const originMethod = console[methodName]; console[methodName] = function (...args: any[]) { /** * 若是安卓手机则在此捕获 unhandled promise rejection 错误 */ if (args[0] === "Unhandled promise rejection") { const error = args[1] as Error; monitor.getSystemInfo().then((res) => { const isNeedEmit = hackUnhandledRejectionPlatform.includes( res.platform ); if (isNeedEmit) { monitor.handleErrorEvent(TrackerEvents.unHandleRejection, error); } }); } originMethod.call(this, ...args); }; } } } 

性能监控

使用小程序提供的 performance api

export function observePagePerformance(monitor: Monitor): void { const canIUse = wx.canIUse("Performance"); if (monitor.performanceData.length) return; if (!canIUse) { return; } const performance = wx.getPerformance(); const observer = performance.createObserver( (entryList: WechatMiniprogram.EntryList) => { const performanceData: PerformanceData = entryList.getEntries(); // ,,, } ); observer.observe({ entryTypes: ["render", "script"] }); } 

HTTP 监控

拦截 wx.request 取值，并且对 options.success 及 options.fail 进行重写

export function interceptRequest(monitor: Monitor) { const originRequest = wx.request; Object.defineProperty(wx, "request", { configurable: false, enumerable: false, writable: false, value: function (options: WechatMiniprogram.RequestOption) { const originSuccess = options.success; const originFail = options.fail; options.success = function (...args) { }; options.fail = function (...args) { }; return originRequest.call(this, options); } }); } 

用户行为轨迹

在小程序中，用户行为轨迹我定义为以下类型，并用队列保存：

• 函数调用
• console 信息
• http 请求
• 页面元素点击
• 埋点行为（自定义行为）

export enum IBehaviorItemType { fn = "function", cOnsole= "console", http = "http", tap = "tap", custom = "custom" } 

我们通过重写 API 就能获取以上的信息

• 函数调用：重写 App，重写 Page
• console 信息：重写 console
• http 请求：重写 wx.request
• 页面元素点击：重写 Page

值得注意的是，SDK 要监控页面元素点击仍需要我们做些手动工作。

由于小程序不存在 dom，并不具备类似 web 提供window.addEventListener的能力，通过重写 Page 只是为了给 PageOptions 注入一个事件处理方法onElementTrack，因此在页面根节点需要对元素做事件绑定才能触达 SDK 收集。

// index.wxml <view class="container" catchtap="onElementTrack"></view> 

自定义行为

某些情况下，你需要收集特定地方的埋点行为，只需要在埋点处调用 pushBehavior 方法即可。

public pushBehaviorItem(item: IBehaviorItem): IBehaviorItem { if (!item.type) { item.type = IBehaviorItemType.custom; } if (!item.time) { item.time = Date.now(); } const { queueLimit } = this.$options.behavior; if (this.behavior.length >= queueLimit) { this.behavior.shift(); } this.behavior.push(item); return item; } 

小程序 SDK 完整代码实现：欢迎 star 、fork 、issue 。

https://github.com/alex1504/femonitor-wx