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

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、微脉、青团社等众多品牌企业。欢迎大家免费试用！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序 免费SSL证书https、TLS版本问题的解决办法

    微信小程序 免费SSL证书https、TLS版本问题的解决办法

    微信小程序 免费SSL证书https.TLS版本问题的解决办法 微信小程序与第三方服务器通讯的域名5个必要条件 1.一个已备案的域名,不是localhost.也不是127.0.0.1,域名不能加端口 2.加ssl证书,也就是https://~~~ 4.HTTPS 服务器的 TLS 版本支持1.2及以下版本,一般就是1.0.1.1.1.2要同时支持这三个版本,一个也不能少,要不然就会出现下面这种情况 5.微信小程序后台加上合法域名设置(一个月内改的次数是有限的,且行且珍惜)如下图 以上5个条件,必

  • JS实现监控微信小程序的原理

    原理 之前也做过浏览器web端的SDK数据埋点上报,其实原理大同小异:通过劫持原始方法,获取需要上报的数据,最后再执行原始方法,这样就能实现无痕埋点. 举个例子:我希望监控所有web页面的ajax请求,每次发送ajax,都需要在控制台打印出发送的url 平时我们开发,发送ajax一般用的都是封装好的库,例如jQuery,Axios等,然而这些库,底层仍然用的是浏览器原生的XMLHttpRequest对象,因此,我们只需要修改XMLHttpRequest对象即可 注意:由于JS的灵活性,修改原生方

  • Fundebug支持监控微信小程序HTTP请求错误的方法

    摘要: Fundebug的微信小程序错误监控插件更新至0.5.0,支持监控HTTP请求错误. 接入插件 接入Fundebug的错误监控插件非常简单,只需要下载fundebug.0.5.0.min.js,在app.js中引入并配置apikey: var fundebug = require('./libs/fundebug.0.5.0.min.js') fundebug.apikey = "API-KEY"; 获取apikey需要[免费注册](https://www.fundebug.c

  • 微信小程序http连接访问解决方案的示例

    HTTP + 加密 + 认证 + 完整性保护 = HTTPS,小程序考虑到信息安全的问题,选用了更为稳定安全的https 来进行信息传递. HTTPS协议的主要作用可以分为两种:一种是建立一个信息安全通道,来保证数据传输的安全:另一种就是确认网站的真实性. 这就导致了许多好用的http  API无法在小程序中被调用. 但是也有解决方案. 1.中继访问 中继访问有两种方式,一种需要自己拥有一个云服务和域名. 拥有域名和云服务器 域名完成备案之后下载证书 https指引教程如下------> 腾讯云

  • windows上利用charles抓取微信小程序数据包,手机APP数据包(HTTP与HTTPS数据包)

    windows上利用charles抓取微信小程序数据包,手机APP数据包(HTTP与HTTPS数据包)

    1.下载charles包.安装 Charles Proxy抓包工具 v4.1 破解文件 win64 附破解方法 2.关闭电脑防火墙 打开控制面板,选择Windows防火墙,关了(不关很可能没法抓包,在这栽过坑) 2.连接手机 2.1 用数据线把手机连上电脑 2.2 查电脑ip,命令行输入 ipconfig 2.3 修改手机网络代理 手机网络改为代理,ip为电脑ip,端口8888(charles默认端口,若被其他程序占用可修改,原则是保持电脑和手机一致) 3.安装SSL证书 (大多数app或小程序

  • 微信小程序 后台https域名绑定和免费的https证书申请详解

    微信小程序 后台https域名绑定和免费的https证书申请详解

    微信小程序 后台https域名绑定和免费的https证书申请详解 微信小程序在11月3号发布了,这是一个全新的生态,没有赶上微信公众号红利的开发者,运营者可别错过这趟车了. 但是微信的后台需要全https,之前我还不相信,后台注册了后进后台才发现,服务器配置如下图 从后台的服务器配置可以看出 (1)微信小程序后台只支持https,如果公司后台还没支持https的,赶紧要升级了 (2)API请求,文件上传,socket 文件上传和下载,必须是在后台配置的,否则微信不允许你下载       另外,h

  • 微信小程序设置http请求的步骤详解

    微信小程序设置http请求的步骤详解

    http请求介绍 HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则.计算机专家设计出HTTP,使HTTP客户(如Web浏览器)能够从HTTP服务器(Web服务器)请求信息和服务,HTTP目前协议的版本是1.1.HTTP是一种无状态的协议,无状态是指Web浏览器和Web服务器之间不需要建立持久的连接,这意味着当一个客户端向服务器端发出请求,然后Web服务器返回响应(response),连接就被关闭了,在服务器端不保留连接的有关信息.HTTP遵循请

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

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

    Fundebug 的微信小程序监控插件在 0.5.0 版本已经支持监控 HTTP 请求错误,在小程序中通过wx.request发起 HTTP 请求,如果请求失败,会被捕获并上报.时隔一年,微信小程序插件已经更新到 1.3.1, 而且提供了一个非常有用的功能,支持监控 HTTP 慢请求.对于轻量级的性能分析,可以说已经够用. 本文我们以一个天气微信小程序为例(由bodekjan开发),来演示如何监控慢请求.bmap-wx.js中的weather()函数调用百度地图小程序 api 提供的接口来获取天

  • 微信小程序 高德地图路线规划实现过程详解

    微信小程序 高德地图路线规划实现过程详解

    前言 最近项目中做到相关网约车小程序.需要使用到地图中的路线规划,对3种地图进行了分析.这里稍微做一下总结: 百度地图 百度坐标 (BD-09) 腾讯地图 火星坐标(GCJ-02) 高德地图 火星坐标(GCJ-02) 微信小程序中使用的是腾讯地图作为底图.因此如果使用百度地图时,需要注意坐标的转换.此类坐标的转换函数在网上都有,这里不做过多解释 准备工作: 1.在做小程序 ---- 路线规划之前,需要准备小程序APPID 以及相应使用地图的KEY值. 2.微信小程序API 之 位置 API wx

  • 微信小程序云函数使用mysql数据库过程详解

    微信小程序云函数使用mysql数据库过程详解

    前言 小程序云开发的功能是越来越强大了,现在小程序云开发可以直接借助云函数来链接mysql数据,操作mysql数据库了,今天就来给大家讲一讲如何使用小程序云开发的云函数来操作mysql数据库. 首先要明确一点,就是小程序云开发的云函数是基于node.js的,所以我们使用node.js的mysql2模块可以直接来链接并操作mysql数据库,所以我们现在要做的就是怎么样在云函数里使用mysql2模块,并且借助这个模块类库来实现mysql数据库的链接. 老规矩,先看效果图 我们这里要做的就是在云函数里

  • 微信小程序嵌入腾讯视频源过程详解

    首先我们有一个接口可以获取动态的vkey https://vv.video.qq.com/getinfo?otype=json&appver=3.2.19.333&platform=11&defnpayver=1&vid= 获取的数据格式是这样的 QZOutputJson={"dltype":1,"exem":0,"fl":{"cnt":2,"fi":[{"id&q

  • 微信小程序-可移动菜单的实现过程详解

    前言 我们可以经常看到手机app里有的菜单栏是悬浮在首页的,用户可以拖动和点击菜单栏进行交互,今天代码君就教大家利用小程序的控件,实现一个可移动的菜单,效果图是这样的,要实现这样的效果,需要引出我们今天的重要人物movable-view movable-view属性介绍 属性名 作用 参数值 direction 设置movable-view的移动方向 属性值有all.vertical.horizontal.none inertia movable-view是否带有惯性 true/false 默认

  • 微信小程序图片自适应支持多图实例详解

    微信小程序图片自适应支持多图实例详解 微信小程序图片自适应,是一个比较常见的需求,平时我们在WEBView中,只需要设置max-width:100%.在微信里面虽然widthFix也能实现,但有一个缺陷就是图片的宽度值要大于或者等于设定的值,否则就会发生拉伸变形,本文通过另外一种来适应. 首先我们来看看图片组件给的一些说明: 属性名 类型 默认值 说明 src String 图片资源地址 mode String 'scaleToFill' 图片裁剪.缩放的模式 binderror HandleE

  • 微信小程序 页面跳转及数据传递详解

    微信小程序 页面跳转及数据传递详解 类似 Android 的 Intent 传值,微信小程序也一样可以传值: 例如:wxml 中写了一个函数跳转: <view class="itemWeight" catchtap="jumpToOverMissionList"> <view class="textStatus">已完成任务</view> <view class="containVertical

  • 微信小程序按钮点击跳转页面详解

    微信小程序按钮点击跳转页面详解

    微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', }) 跳转到talkPage界面. 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:fail url "pages/index/talkPage" is not in app.j

  • 微信小程序移动拖拽视图-movable-view实例详解

    JS中的sender参数(sender是事件的传值)前提是只有一个touch移动的时候.多个touch需要在 changedTouches 数组中查找 redclcik:function(sender){ wx.showModal({ title: '点击红色', content: '', }) console.log(sender); }, redmove:function(sender){ console.log(sender); // console.log(sender.changedT

  • 微信小程序canvas开发水果老虎机的思路详解

    在这个超长假期中,无聊...,所以动手做一个早就计划要做的小玩意, 水果老虎机 ,嗯,这是一个小程序而不是小游戏... 使用结构还是canvas? 使用模板结构(view)生成水果盘的好处一是用户可自定义产出 n x n 的定制化老虎机,二是容易通过算法样式生成布局,三是通过 wx.selectQueryAll 的方法能够很方便的抓到定位数据.但,问题是动画性能过于孱弱,如图构建一个 7x7 的水果盘,动画性能估计会惨不忍睹,而且纯粹模板结构无论使用 animation 动画方法还是 css 的

随机推荐