监控微信小程序中的慢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 相关文章推荐
jQuery 选择器理解
Mar 16 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
js常见遍历操作小结
Jun 06 Javascript
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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
PHP加密解密函数详解
2015/10/28 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
精解window.setTimeout()&window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
javascript prototype 原型链
2009/03/12 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
Django组件cookie与session的具体使用
2019/06/05 Python
python中的colorlog库使用详解
2019/07/05 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
HTML5实现预览本地图片
2016/02/17 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
应届毕业生的个人自我鉴定
2013/10/24 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis