监控微信小程序中的慢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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
JavaScript中的集合及效率
Jan 08 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
详解webpack-dev-server使用方法
Sep 14 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 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 移除数组重复元素的一点说明
2008/11/27 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
前台js调用后台方法示例
2013/12/02 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
js 调用百度分享功能
2017/02/27 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
如何把python项目部署到linux服务器
2020/08/26 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
行政助理的岗位职责
2014/02/18 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
Python中异常处理用法
2021/11/27 Python
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers
nginx配置指令之server_name的具体使用
2022/08/14 Servers