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

简介: 请求时间太长,影响用户体验,使用 Fundebug 监控慢请求。

摘要: 请求时间太长,影响用户体验,使用 Fundebug 监控慢请求。

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

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

接入监控

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

根据指示完成接入流程:

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。

错误详情

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

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

附加信息

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

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

关于Fundebug

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

版权声明

转载时请注明作者 Fundebug以及本文地址:

https://blog.fundebug.com/2019/06/27/monitor-httptimeout-in-weather-miniapp/

目录
相关文章
|
4月前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
3月前
|
小程序 Java
小程序通过get请求提交数据到java后台
小程序通过get请求提交数据到java后台
35 0
|
4月前
|
小程序 PHP
微信小程序给 thinkphp后端发送请求出现错误 Wrong number of segments 问题的解决 【踩坑记录】
本文记录了微信小程序向ThinkPHP后端发送请求时出现"Wrong number of segments"错误的解决方法。问题原因是小程序请求header中的token变量名写错,导致token未正确传递至后端。作者提供了详细的检查步骤和建议,包括验证URL路径、参数规范和路由配置的匹配,以确保请求能正确发送和处理。
|
5月前
|
小程序 安全
Fiddler抓取小程序后端请求导入AppScan扫描快捷方法
【8月更文挑战第26天】这是一种利用 Fiddler 捕获小程序后端请求并导入 AppScan 进行安全扫描的方法。首先安装配置 Fiddler 并设置手机代理,通过 Fiddler 捕获请求;接着导出这些请求为 .saz 文件,并在 AppScan 中导入此文件,配置扫描参数后启动扫描以检测安全漏洞。操作时需确保有合法授权并遵循相关法规。尽管不同版本软件操作细节可能有所不同,但整体流程类似。
184 1
|
7月前
|
开发工具
微信客服系统开发SDK使用教程- 拉取当前微信个人号列表请求(立即)
微信客服系统开发SDK使用教程- 拉取当前微信个人号列表请求(立即)
|
8月前
|
开发框架 小程序 前端开发
微信小程序封装请求
微信小程序封装请求
|
存储 Web App开发 监控
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
我们以前使用过的对hbase和hdfs进行健康检查,及剩余hdfs容量告警,简单易用 1.针对hadoop2的脚本: #/bin/bashbin=`dirname $0`bin=`cd $bin;pwd`STATE_OK=...
1060 0
|
Web App开发 前端开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
异步通信 对于BS(Browser-Server 浏览器)架构,很多情景下server的处理时间较长。 如果浏览器发送请求后,保持跟server的连接,等待server响应,那么一方面会对用户的体验有负面影响; 另一方面,很有可能会由于超时,提示用户服务请求失败。
775 0
|
Web App开发 监控 前端开发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
Datanode的日志中看到: 10/12/14 20:10:31 INFO hdfs.DFSClient: Could not obtain block blk_XXXXXXXXXXXXXXXXXXXXXX_YYYYYYYY from any node: java.
698 0
|
Web App开发 大数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
                                                                               1.
1741 0