文档章节

小程序异常监控及错误处理

o
 osc_odyg6b92
发布于 2018/07/13 15:32
字数 1247
阅读 8
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

小程序异常监控收集

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。

参考资料
小程序基础库的更新迭代——8.2 异常
小程序异常监控收集
微信小程序错误监控经验谈
JS实现监控微信小程序的原理
微信小程序函数调用监控
微信 Web 资源离线存储

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.5K
8
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.2K
1
基于 ThinkPHP 的内容管理系统--歪酷CMS

歪酷网站管理系统(歪酷CMS)是一款基于THINKPHP框架开发的PHP+MYSQL网站建站程序,本程序实现了文章和栏目的批量动态管理,支持栏目无限分类,实现多管理员管理,程序辅助功能也基本实现了常见的文...

鲁大在线
2013/02/19
7K
2
密码管理程序--pwgrep

为了管理我的密码,我写了一个小的 bash/awk 脚本用来管理一个密码数据库并使用 GnuPG 进行加密。使用 pwgrep 的好处是: 密码加密 密码版本化,不用担心丢失老密码 Since a versioning sys...

匿名
2013/03/11
1.3K
0
Android 设备管理工具--androrat

androrat 是一个对 Android 设备进行远程管理的工具。 功能包括: 获取通讯录信息 获取呼叫记录 获取短信和彩信 通过 GPS 获取定位 实时监控接收到的短信 监控手机的呼叫状态 拍照 获取来自麦...

匿名
2013/03/28
2.7W
11

没有更多内容

加载失败,请刷新页面

加载更多

SQL 语句大全

点击上方“掌上编程”,选择“置顶或者星标” 优质文章第一时间送达! 一、基础 「1、说明:创建数据库」 CREATE DATABASE database-name    「2、说明:删除数据库」 drop database ...

GeneralMa
昨天
0
0
山东创睦网络科技有限公司:使用Python爬取全球新冠肺炎疫情数据

使用Python爬取全球新冠肺炎疫情数据 导入所需库包 获取实时数据的url 正式编写程序 查看输出结果 导入所需库包 在获取数据之前,我们需要先安装好所需的包requests和pandas: 1.如果是使用p...

osc_qv1fwke0
45分钟前
14
0
如何1年获得别人3年的工作经验(深度好文)

最近有同学问我,为什么你的工作年限不长,技术却这么厉害,我笑了笑,啥也没说。 我不是不想回答,是不知道怎么回答。在他们的定位可能就是,每方面都懂一点,遇到问题能够快速解决,就是比...

zhang_rick
今天
1
0
新基建带动行业

什么是“新基建”? 什么是“新基建”? 根据央视发布的信息来看,其涵盖了5G基站建设、新能源汽车充电桩、大数据中心、人工智能、工业互联网,特高压,城际以及城轨交通,涉及了七大领域和相...

osc_anefoz50
46分钟前
16
0
怕入错行?这群技术人写了本“择业指南”

计算机专业好找工作吗?哪些方向是当前的主流和热门方向呢? 计算机专业的你是不是还在为职业发展纠结犹豫呢? 刚经历完高考选专业的你是不是还在迷茫徘徊呢? 那么福利来啦! 《软件技术职业...

阿里云云栖号
46分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部