对于小程序开发者来说,如何进行错误监控一直是个头疼的问题。由于小程序开发迭代较快,会存在系统问题,机型问题和版本的兼容问题,有时候我们在自行测试中完美运行,可总是有用户抱怨使用异常。如果我们对小程序的错误进行有效的监控,可以帮助小程序开发者发现异常,优化代码,用户体验也会随着优化逐步的提升。

作为一个小程序开发者,如果你对前端开发比较熟悉,那么在错误监控方面可能会更快的上手。因为小程序错误监控和 Web 端错误监控本身就具有很多相似性,因此监控的数据规则基本是一致的,但由于小程序自身的特性,在错误监控方面会有以下不同:

  • 在 Web 端我们监测的是页面完整的url,而小程序端监测的是路由地址;

  • 小程序页面属于微信内部的页面,使用时已全部加载完毕,因此监控页面性能时不统计页面加载时长等信息,更多的是对页面内请求、资源请求和用户行为的监控;

  • 由于微信官方和小程序代码的要求,集成方式对比 Web 端会相对严格一些。


根据以上的相同点和不同点,我们可以整理出对于小程序而言,哪些数据是需要监控的:

  • JavaScript异常监控:不论是 Web 端还是小程序端,对JavaScript异常的监控都是必要的;

  • 页面内请求监控:对于小程序来说,我们需要统计发送网络请求的wx.request()异常时的请求状态、请求时长、请求地址等;

  • 资源加载监控:当需要下载资源到本地的wx.downloadFile() 出现异常时,统计加载时间、异常类型、资源地址等;

  • 页面性能监控:访问监控、页面来源及流向监控等,方便我们更好的对小程序进行运营;

  • 用户数据统计:用户的分布、操作系统及版本、微信版本、IP 地址等,给错误的分析提供更多条件。

对于小程序出现的错误,我们目前只能在开发者工具上进行追踪和调试,有条件的开发者也可以选择在真机上进行调试,但是小程序大多还是小团队和个人开发者,拥有不同操作系统,不同型号,不同版本的真机进行调试还是不太现实,这里就可能会出现在本地调试中没有出现的问题,且很难定位的到。

在目前的微信小程序后台中,对于上面后两点的监控和统计已经可以实现,用户数据的分析也比较完善,但是对于错误的监控目前还无法实现,这里我们可以借助第三方工具来进行对错误的监控。

这里我们选择错误监控平台 FrontJS 的小程序错误监控:www.frontjs.com/

FrontJS 的小程序错误监控相比于微信小程序后台的数据监控,增加了对于错误的统计和产生错误的相关用户分析,FrontJS可以收集精细到console.log级别的任何JavaScript异常信息并提供 stack trace 信息;对于任何一条错误信息或访问,它都会统计到该用户的IP、屏幕分辨率、DPR、操作系统类型和微信版本,方便我们更有针对性的去调试出现的错误。

使用时我们只需引入 FrontJS 插件,并添加配置代码,即可开启监控。

具体方法:

  • 进入 FrontJS 后注册账号,登陆后选择创建项目,在创建项目页面的名称后选择“微信小程序”。

在这个页面也可以对不监听的资源和信任域进行设置。

创建完成后,我们只需要根据页面右侧的提示进行操作,就可以完成小程序错误监控的全部设置。

集成完毕后就可以开始错误的监控了,具体界面如下,在左侧菜单栏中我们可以选择不同的条件进行错误的筛选,具体内容各位可以亲自尝试。

FrontJS对微信小程序下已有的相关方法进行了监听,在出现异常或需要监控时,FrontJS会及时发现并统计数据,并且完全不影响小程序的正常运行。

在后续更新中,FrontJS 会继续挖掘可监控到的信息,如用户的位置信息,语言,基础库版本等,对这些信息做更优处理,配合可视化工具,开发者将可以构建出更符合自身需求的数据方案。

微信小程序错误监控方法谈相关推荐

  1. 微信小程序 错误解决方法集合(待更新)

    通用方法.实用技巧: 1 新建各类型文件时,直接选用"新建Page",可以更高效的编写代码,减少许多规范上的错误.用这种方式建目录后,一般不会出现基础模块必备元素的缺失. 2 出现 ...

  2. 微信小程序函数调用监控

    微信小程序之无埋点函数调用监控 有时候,面对一个bug,左思右想就是无法理解为什么. 我就有过这样的经历,耗时整个一个晚上,后来还是放弃了.不得不在所有可能的点都加上日志,部署等待再次报错,真的很让人 ...

  3. 微信小程序开发系列教程三:微信小程序的调试方法

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...

  4. 微信小程序定义公共方法

    微信小程序定义公共方法还是很简单的,一个三步创建,引入,使用 1.创建 在page创建文件夹utils,在创建文件utils.js,看下我的 在utils.js中定义你的方法,然后导出 2.引入 在你 ...

  5. 解决微信小程序 wx.request 方法不支持 Promise 并发数问题

    wx-promise-request 是微信小程序 wx.request 方法的不支持 Promise 和并发数问题的解决方案.如果只需要解决并发数问题,可以使用wx-queue-request.js ...

  6. 微信小程序抓包方法汇总

    前言 ios端和mac用户可以忽略以下内容,本文针对于windows端和android端的微信无法抓取小程序数据包提出相关解决方案. 分析 Android7. 0及以上的系统中,每个应用可以定义自己的 ...

  7. 微信小程序使用setData方法修改data中对象或数组的属性值

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站 微信小程序使用setData方法修改data中对象或数组的属性值 使用微信小程序开发时,涉及到data ...

  8. 微信小程序摄像头监控_微信小程序拍照和摄像功能实现方法示例

    本文实例讲述了微信小程序拍照和摄像功能实现方法.分享给大家供大家参考,具体如下: 拍照 原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件 ...

  9. 微信小程序摄像头监控_微信小程序读取摄像头 微信调用摄像头

    为什么微信扫一扫无法获取摄像头? 安装微信时,您没有授予微信使用摄像头的权限. 设置-应用权限-找到微信图标,点击"使用摄像头". 微信无法获取摄像头数据什么原因? 可能是因为** ...

最新文章

  1. oracle修改备库状态,Oracle-CRSCTL命令显示备库状态不正确
  2. SBO-COMMON库中查各个表的大小的SQL语句
  3. Swift URL含有中文的处理
  4. 【Android】可以下拉刷新的webview,使你的webview效果更加好看,封装自己的WebView...
  5. oModel.create will also send to backend directly
  6. Request.ServerVariables
  7. 更新sqlmap1.5.5版本教程(附带下载地址)
  8. oracle ebs 采购入库,ORACLE EBS/ERP 采购库存模块分录
  9. make settings时编译报错:dalvik/dx/bin/Android.bp:24:1: module “dx-doc-stubs“ already defined
  10. bpmn文件转换为png格式图片
  11. 坦克大战第一个不爆炸
  12. 合同和协议的区别_合同的内容包括哪些,合同和协议的区别
  13. 【OCC学习5】记录最新版本emcc编译occ的bug:opencascade-7.6.0/src/Standard/Standard_Time.hxx:29:25: error: redefinit
  14. halide 入门实战(1)
  15. 无符号数和带符号整数的表示
  16. 浙江大华流媒体服务器型号,大华DAHUA网络视频存储服务器DH-EVS7024S-DY产品中心_DAV数字音视工程网...
  17. 2021-2027全球与中国人体解剖学模型市场现状及未来发展趋势
  18. 服务器运维系统哪个好用,可以说宝塔是史上最好用的服务器运维控制面板
  19. 基于51单片机超声波的停车场车位管理系统proteus仿真原理图PCB
  20. CodeForces1214C

热门文章

  1. mysql 插入当前时间_MySql优化之前期探索
  2. 华硕服务器显示模块,华硕远程管理模块 ASMB4-iKVM 华硕服务器主板专用 现货 IPMI...
  3. java linux root权限管理_新的 Linux sudo 漏洞使本地用户获得 root 权限
  4. python import re_Python标准库笔记(2) — re模块
  5. python time datetime
  6. 数据库事务处理差异:可提交读和重复读区别
  7. cerely异步分布式
  8. 信号 应用场景 内置信号 内置信号操作 自定义信号
  9. 20155220吴思其 实验2 Windows口令破解
  10. 大战设计模式【13】—— 组合模式