[转] 小程序异常监控及错误处理
小程序异常监控收集
web端与小程序错误监控差异
- 在 Web 端监测的是页面完整的 url，而小程序端监测的是路由地址；
- 小程序页面属于app内部的页面，使用时已全部加载完毕，因此监控页面性能时不统计页面加载时长等信息，更多的是对页面内请求、资源请求和用户行为的监控；
- 由于微信官方和小程序代码的要求，集成方式对比 Web 端会相对严格一些。
小程序需要监控的数据
- JavaScript异常监控：不论是 Web 端还是小程序端，对 JavaScript 异常的监控都是必要的；
- 页面内请求监控：对于小程序来说，需要统计发送网络请求的
swan.request()异常时的请求状态、请求时长、请求地址等； - 资源加载监控：当需要下载资源到本地的
swan.downloadFile()出现异常时，统计加载时间、异常类型、资源地址等； - 页面性能监控：访问监控、页面来源及流向监控等，方便更好的对小程序进行运营；
- 用户数据统计：用户的分布、操作系统及版本、app版本、IP 地址等，给错误的分析提供更多条件。
简单收集
-
小程序App()生命周期里提供了
onError函数，可以通过在onError里收集异常信息，具体原理可查看JS实现监控微信小程序的原理App({ // 监听错误 onError: function (err) { // 上报错误 swan.request({ url: "https://url", // 自行定义报告服务器 method: "POST", errMsg: err }) } })
用户操作路径收集
一些较隐蔽的错误如果只有错误栈信息，排查起来会比较难，如果有用户操作的路径，在排查时就方便多了。
- 暴力打点方法收集
优点：简单直接
缺点：污染业务代码，造成较多垃圾代码 -
函数劫持
需要在App函数中的onLaunch、onShow、onHide生命周期插入监控代码，通过重写App生命周期函数来实现。App = function(app) { ["onLaunch", "onShow", "onHide"].forEach(methodName => { app[methodName] = function(options) { // 构造访问日志对象 var breadcrumb = { type: "function", time: utils.now(), belong: "App", // 来源 method: methodName, path: options && options.path, // 页面路径 query: options && options.query, // 页面参数 scene: options && options.scene // 场景编号 }; self.pushToBreadcrumb(breadcrumb); // 把执行对象加入到面包屑中 }) }
但是这样写，会把用户自定义的内容给覆盖掉，所以还需要把用户定义的函数和监控代码合并。
var originApp = App // 保存原对象
App = function(app) {
// .... 此处省略监控代码
// .... 此处省略监控代码
originApp(app) // 执行用户定义的方法
} 小程序性能监控插件
- Fundebug 提供网站、微信小程序和小游戏的bug监控服务,例如：API的一些函数调用情况、监控函数调用的参数、收集HTTP请求错误的body、监控某些特定的自定义函数等。
- FrontJS 的小程序错误监控相比于微信小程序后台的数据监控，增加了对于错误的统计和产生错误的相关用户分析，FrontJS可以收集精细到 console.log 级别的任何 JavaScript 异常信息并提供 stack trace 信息；对于任何一条错误信息或访问，它都会统计到该用户IP、屏幕分辨率、DPR、操作系统类型和微信版本，方便更有针对性的去调试出现的错误。
- 百度数据统计分析展示平台 提供对web页面的性能、访问点击、js异常、浏览器新特性、跨站资源、XSS漏洞、自定义事件、Native性能检测服务，对 百度小程序 的支持还需进一步调研。
白屏监控
用户在访问网页的时候，在浏览器开始显示之前都会有一个的白屏过程，在移动端，受限于设备性能和网络速度，白屏会更加明显。
白屏时间
页面完全空白的时间，web可以在页面的head底部添加的JS代码用来做白屏时间的标记。
微信 web 资源离线存储
通过使用微信离线存储，Web 开发者可借助微信提供的资源存储能力，直接从微信本地加载 Web 资源而不需要再从服务端拉取，从而减少网页加载时间，为微信用户提供更优质的网页浏览体验。每个公众号下所有 Web App 累计最多可缓存 5M 的资源。这个设计有点类似 HTML5 的 Application Cache。
