多端小程序监控方案

1. 【第24期】线上保障专题

2. 【第4讲】小程序监控方案分享嘉宾：刘敏-前端资深工程师

3. 目录 1. 业务背景 & 痛点 2. 业内小程序监控现状 3. 奥创小程序监控平台 4. 小程序监控SDK实现 5. 应用接入实践 6. 未来规划分享人：余意

4. 业务背景微信百度支付宝 QQ 字节京东 360 2019年首个微信小程序上线各大产商纷纷发布了自己的小程序平台

5. 一次线上问题定位分析

6. 一次线上问题定位分析 1 测试尝试复现 2 3 4 排查服务日志微信小程序监控后台手动打点上报 try { ... var json=‘{“content":"品牌::宝马\n规车点击多个帖子 } catch (error) { 型::宝马 1系\n行驶里程::8万公里\n”}’; 无法复现使用不同手机 reportMonitor({ url, 无异常日志 json体含有特殊字符联系用户 data, error }) 存在JSON.parse异常 }

7. 复盘由于平台、系统、机型、版本的兼容等问题，小程序出现线上问题排查困难！ • 线上白屏加载不出来数据是怎么回事？ • 线上代码质量如何，是否有bug？ • 线上出现问题，如何快速发现并解决？ • 对于多端小程序，如何更有效监控？

8. 业内小程序监控现状小程序平台 js异常 http接口监控用户行为记录告警微信有有统计，无详情无小程序助手百度有（只有状态码）无无头条无无无无支付宝有有无 360 有有无邮件京东未知未知未知未知短信，邮件分享人：余意各平台监控能力不一致，考虑借助第三方监控平台的能力

9. 业内小程序监控现状平台脚本网络资源下载告警平台兼容性能访问用户行为控制台费用 Fundebug ✔ ✔ ✔ ✔ 微信支付宝无 ✔ 无 159/M FrontJS ✔ ✔ ✔ ✔ 微信 ✔ 无 ✔ 899/M 多平台支持不满足业务场景 + 费用问题 -> 自研

10. 奥创小程序监控平台_首页

11. 奥创小程序监控平台_列表次数错误类型载体版本号 SDK版本环境时间

12. 奥创小程序监控平台_详情

13. 奥创小程序监控平台_系统架构应用接入数据清洗与存储 Kafka 各端SDK 采集异常并上报日志平台接收数据服务首页 ES Node Kafka 展示交互 MongoDB 定时任务离线任务日志分析监控告警列表详情

14. SDK采集思路小程序主要开发语言：JavaScript 小程序与普通网页开发的区别： - 小程序中渲染线程和脚本线程独立 - 两大运行环境：IOS 和 Android 的微信客户端

15. SDK采集思路 SDK

16. SDK采集思路程序注册页面注册 API调用

17. API劫持方案

18. API劫持方案

19. API劫持方案

20. SDK业务架构

21. SDK上报模型公共信息： 1. 系统信息（宿主版本、小程序基础库版本、设备型号、设备品牌） 2. 用户信息 3. 网络状态 4. 场景值异常信息： 1. JS异常：错误类型、堆栈信息 2. 接口日志：接口地址、状态码、异常响应信息 3. 资源异常 4. 性能日志： [App纬度] 小程序初始化耗时、启动耗时 [Page纬度] 页面加载、显示、渲染耗时 5. 行为轨迹：页面轨迹、函数调用轨迹、接口调用

22. 公共信息采集_常规思路 1. 用户信息获取： 3. 网络状态获取： wx.getUserInfo() wx.getNetworkType() 2. 系统信息获取： 4. 场景信息获取： wx.getSystemInfoSync() App.onLaunch()

23. 公共信息采集_多端兼容思路 const mp = MP.instance(); // 单例模式用户信息获取： ctx.getUserInfo() 系统信息获取： ctx.getSystemInfoSync() 网络状态获取： ctx.getNetworkType() 场景信息获取： App.onLaunch() -> mp.userInfo; -> mp.systemInfo; -> mp.networkInfo; -> mp.sceneInfo;

24. 公共信息采集_多端兼容思路当前页面路径信息获取：其他端小程序： getCurrentPages() App.onLaunch: res 360小程序：

25. 公共信息采集_上报内容

26. 异常采集方案_多场景兼容 • 脚本异常 • 接口异常 • 资源异常 • … 分享人：余意

27. 脚本异常_常规思路错误类型类型错误示例 a.b.toLowerCase 引用错误语法错误越界错误 URI 不正确 UnhandledRejection a() function = 5 [].length = -5; decodeURI("%"); … ReferenceError: a is not defined SyntaxError: Unexpected token RangeError: Invalid array length URIError: URI malformed UnhandledRejection 经常偶尔较少较少经常 TypeError: Cannot 错误信息 read property 'toLowerCase' of undefined 发生频次捕获方式经常 App.onError App.onUnhandledRejection (各平台支持度不一致)

28. 脚本异常_常规思路 • App.onError 小程序发生脚本错误、 • App.onPageNotFound 页面路由不存在 API调用报错时触发 • App.onUnhandleRejection 微信: v2.10.0+ 支持onUnhandledRejection QQ: 部分支持onUnhandledRejection 百度：不支持头条：不支持支付宝：v1.24.1+ 支持onUnhandledRejection 仅安卓 360：不支持 JD: 不支持 • App.onMemoryWarning 内存不足告警事件

29. 脚本异常_多端兼容思路 console.error() 小程序发生脚本错误、 API调用报错时触发、 Promise异常自定义上报

30. 脚本异常_多端兼容思路其他小程序：try..catch 包装 console.error(‘包装信息’ + new Error()) 百度小程序：输出的时候将堆栈信息都转成了 string …

31. 脚本异常_上报内容 • ErrType TypeError ReferenceError UnhandledRejection RangeError URIError SyntaxError

32. 接口异常_常规思路重写 wx.request success：statusCode >= 400 fail：请求错误

33. 接口异常_多端兼容思路微信小程序： wx.request() 百度小程序： swan.request() 头条小程序： tt.request() 支付宝小程序：my.request() QQ小程序： qq.request() 360小程序： qh.request() ctx.request() 分享人：余意

34. 接口异常_上报内容

35. 资源异常_多端兼容思路重写 ctx.download File fail：资源下载错误

36. 资源异常_上报内容

37. 小程序加载过程下载小程序包启动小程序解析app.json 注册App() 解析页面.json 渲染层.wxml 页面生命周期逻辑层.js 加载页面 App生命周期

38. 性能采集_常规思路微信小程序其他小程序 wx.getPerformance() • appLaunch: 小程序启动耗时 • firstRender: 页面首次渲染耗时 • evaluateScript: 注入脚本耗时无

39. 性能采集_多端兼容思路生命周期钩子级别说明主流小程序 360小程框架序框架 onLaunch App级监听小程序初始化支持 onLoad onShow App级监听小程序启动或切前台支持支持 onLoad Page级监听页面加载支持支持 onShow Page级监听页面显示支持支持 onReady Page级监听页面初次渲染完成支持支持

40. 性能采集方案_数据指标应用级别性能首屏时间 init SDK初始化 onLaunch App级监听小程序初始化 onShow App级监听小程序启动或切前台 onLoad Page级监听页面加载 onShow Page级监听页面显示 onReady Page级监听页面初次渲染完成 onHide Page级监听页面隐藏页面级别性能页面加载耗时页面显示耗时分享人：余意页面渲染耗时页面加载耗时

41. 性能采集_Taro兼容 taro2.x 通过将React组件转化成小程序页面和组件 taro3.x 对外暴露小程序页面规范对象分享人：余意

42. 性能采集_上报内容

43. 行为轨迹采集方案 • App函数堆栈 • Page函数堆栈 • HTTP请求堆栈分享人：余意

44. 多端兼容核心实现

45. 小程序监控SDK_特性多端、多框架适配平台微信小程序脚本异常 ✔ ✔ ✔ ✔ ✔ ✔ ✔ 接口异常 ✔ ✔ ✔ ✔ ✔ ✔ ✔ 资源异常 ✔ ✔ ✔ ✔ ✔ ✔ ✔ 性能日志 ✔ ✔ ✔ ✔ ✔ ✔ ✔ 行为轨迹 ✔ ✔ ✔ ✔ ✔ ✔ ✔ 360 百度智能字节跳动支付宝小 QQ 小程序小程序程序小程序小程序 Taro 框架

46. 小程序监控SDK_特性支持cmj、es模块化轻量，49KB

47. 应用实践_快速接入 1. 安装依赖 npm i @mp-monitor --save 2. 在小程序管理后台配置对应的request合法域名 3. 在app.js中引用并初始化 a. 通过npm形式使用 b. 通过单文件形式使用

48. 应用实践_高阶用法 1. 自定义上报日志 2. 上报接口可配置

49. 应用实践_告警通知短信公众号邮件

50. 应用实践_异常监控

51. 应用实践_性能监控考虑是否需要采用分包机制

52. 应用实践_数据统计获取所有页面的PV 将PV等于0的页面代码移除移除的路径做重定向处理

53. 未来规划小程序异常采集SDK • 开源 • 对接北斗

54.