监控微信小程序中的慢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 对象定义方法 简单易学
Mar 22 Javascript
javascript中的array数组使用技巧
Jan 31 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
详解angular应用容器化部署
Aug 14 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 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
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
python获得一个月有多少天的方法
2015/06/04 Python
Python迭代和迭代器详解
2016/11/10 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
python出现"IndentationError: unexpected indent"错误解决办法
2017/10/15 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
Python Celery多队列配置代码实例
2019/11/22 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
新闻编辑求职信
2014/04/09 职场文书
小班上学期评语
2014/05/05 职场文书
离婚协议书标准格式
2014/10/04 职场文书
房屋租房协议书范本
2014/12/04 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
python用字节处理文件实例讲解
2021/04/13 Python