监控微信小程序中的慢HTTP请求过程详解


Posted in Javascript onJuly 05, 2019

Fundebug 的微信小程序监控插件在 0.5.0 版本已经支持监控 HTTP 请求错误,在小程序中通过wx.request发起 HTTP 请求,如果请求失败,会被捕获并上报。时隔一年,微信小程序插件已经更新到 1.3.1, 而且提供了一个非常有用的功能,支持监控 HTTP 慢请求。对于轻量级的性能分析,可以说已经够用。

本文我们以一个天气微信小程序为例(由bodekjan开发),来演示如何监控慢请求。bmap-wx.js中的weather()函数调用百度地图小程序 api 提供的接口来获取天气预报信息。

监控微信小程序中的慢HTTP请求过程详解

接入监控

由于使用百度的 api,我们无法确认该接口的稳定性,可能有时候会特别慢,导致天气信息显示不出来。于是,我们使用 Fundebug 来监控请求过慢的情况。接下来,我们来演示如何监控慢请求。注册账户后,记得要在创建项目是选择“微信小程序”这一项目类型。

监控微信小程序中的慢HTTP请求过程详解

根据指示完成接入流程:

监控微信小程序中的慢HTTP请求过程详解

在app.js顶部加入下面的代码(记得将 apikey 替换成你自己的):

var fundebug = require("./utils/fundebug.1.3.1.min.js");
fundebug.init({
  apikey: "YOUR-API-KEY",
  monitorMethodCall: true,
  monitorMethodArguments: true,
  monitorHttpData: true,
  setSystemInfo: true,
  setUserInfo: true,
  setLocation: true,
  httpTimeout: 200
});

虽然init()函数只要设置apikey即可使用,但是为了最大程度发挥监控的威力,我们不妨多设置一些监控选项。

微信小程序插件有很多的可配置项,由于涉及到数据,默认处于关闭状态。我们可以监控函数调用(monitorMethodCall),以及函数调用的参数(monitorMethodArguments),监控 HTTP 请求的 Body 中的数据(monitorHttpData),获取系统信息(setSystemInfo)、用户信息(setUserInfo)、地理位置(setLocation)。

监控慢请求

最后,最重要的一步,配置httpTimeout来监控超过特定时长的请求,httpTimeout 类型为 Number,单位为毫秒(ms)。演示起见,我们将时间设置为 200 毫秒。

在微信开发者工具内运行代码,Fundebug 立马收到报错。小程序发往https://api.map.baidu.com/telematics/v3/weather接口的请求时长为 571ms,超过预设时间 200ms。

监控微信小程序中的慢HTTP请求过程详解

错误详情

该请求返回代码 200,表明能够正常获取数据。点击该条错误,查看错误详情:

监控微信小程序中的慢HTTP请求过程详解

通过上方的统计数据,我们可以知道获取天气信息的接口出现缓慢情况的趋势,影响的用户数量,累计发生的次数。我们可以以此来评估是否需要优化该接口,甚至替换成其它第三方接口来解决这个问题。

附加信息

因为配置了 monitorHttpData,所以我们可以查看到请求 body 中的详细数据。当请求失败的时候,有时候需要结合参数来分析失败的原因。

监控微信小程序中的慢HTTP请求过程详解

另外,用户行为数据记录了小程序运行的详细状况,特别是函数的调用序列,对于理解出错前程序的执行逻辑很有帮助:

监控微信小程序中的慢HTTP请求过程详解

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
原生js实现购物车功能
Sep 23 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 #Javascript
JS Math对象与Math方法实例小结
Jul 05 #Javascript
js字符串类型String常用操作实例总结
Jul 05 #Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 #Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 #Javascript
JS开发常用工具函数(小结)
Jul 04 #Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 #Javascript
You might like
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
解析php中const与define的应用区别
2013/06/18 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
Python基础中所出现的异常报错总结
2016/11/19 Python
Python虚拟环境项目实例
2017/11/20 Python
Python中GIL的使用详解
2018/10/03 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
python logging日志模块原理及操作解析
2019/10/12 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
打架检讨书500字
2014/01/29 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
公司办公室岗位职责
2014/03/19 职场文书
法学院毕业生求职信
2014/06/25 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
保护校园环境倡议书
2015/04/28 职场文书
教师研修随笔感言
2015/11/18 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers