监控微信小程序wx.request请求失败

在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求。其重要性不言而喻。然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request 请求失败",可以搜索到很多相关的文章,下面列出一些:

有些事开发时候遇到,有些是产品上线后遇到。线上的情况比开发和测试的时候复杂的多,失败的原因可能各种各样。既然测试无法 100%保证上线不会出问题,我们唯一要做的就是及时发现和快速响应。

微信小程序运维中心提供了错误日志记录,但功能还是比较有限。只有简单的统计和错误展示功能,而往往仅仅靠报错信息是无法清晰理解错误成因的。这个时候使用强大的第三方监控服务就很有必要了。

小程序 Demo

我们使用一款由jectychen开发的wechat-v2ex来做演示,v2ex 数据 api 基本上使用了 samuel1112 的仓库v2er里封装的方法。

其运行效果如下:

最左侧本来应该有头像的,可能由于防盗链的原因没有显示出来。

有时候一个微信小程序可能会用到多个第三方服务,从多个域名获取数据。以下两种情况都值得注意:

  • 某些接口做了更新没有及时推送通知,该接口的调用就会失败;
  • 服务不够稳定,接口的返回某一时段特别慢;
  • 某些终端用户的数据不符合导致接口失败。

因此产品上线以后,对接口的调用进行监控是很有必要的。

接入监控

Fundebug 的微信小程序错误监控插件支持监控 HTTP 请求错误:

  • 当请求返回的 statusCode 不是 2xx 或者 fail 回调函数被触发的时候,Fundebug 的小程序监控插件会捕获该错误并发送到服务器。
  • 如果接口请求耗时过长,我们也可以配置httpTimeout来监控。

要使用 Fundebug 监控,你需要去Fundebug网站注册账号并创建一个微信小程序监控项目,然后按照提示接入插件。你需要下载微信小程序监控的 JS 脚本放入到自己的项目中,然后引入并通过fundebug.init()函数作必要的配置。

var fundebug = require("./utils/fundebug.1.3.1.min.js");
fundebug.init({
    apikey: "YOUR-API-KEY",
    monitorHttpData: true,
    httpTimeout: 2000,
    monitorMethodCall: true,
    monitorMethodArguments: true,
    setSystemInfo: true,
    setUserInfo: true,
    setLocation: true
});

插件默认会监控 HTTP 请求错误,并上报 Header 部分的信息,我们无需做配置。为了方便 Debug,我们配置monitorHttpData来记录 body 部分的信息;我们将httpTimeout设置为 2000 毫秒,超过该时长的请求会被上报到服务器。

Request:fail 错误

为了演示wx.request返回 request:fail 错误,我特意将utils/api.js中的HOST_URI改错。

var HOST_URI = ‘https://www.w2ex.com/api/‘;

然后保存运行。Fundebug 收到上报的错误,该请求花了 7072 毫秒,然后返回请求失败。

通过用户行为可以更加清楚地了解整个小程序的运行过程:

404 错误

这次,我将获取最新话题的接口做点更改,故意将latest写出lastest

var LATEST_TOPIC = ‘topics/lastest.json‘;

保存运行,Fundebug 捕获该错误并上报到服务器:

参数错误

获取某一个话题详情的时候,应该传入对应的 id。如果 id 是 null、undefined、或则本来是数字我们传入字符串,看看结果怎么样。

下图可知当我们将参数 id 设为undefined的情况下,接口返回 404。并返回消息:

{
    "message": "Object Not Found",
    "status": "error"
}

关于Fundebug

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

版权声明

转载时请注明作者 Fundebug以及本文地址:
https://blog.fundebug.com/2019/07/01/monitor-wx-request-fail/

原文地址:https://www.cnblogs.com/fundebug/p/monitor-wx-request-fail.html

时间: 2024-08-28 06:58:29

监控微信小程序wx.request请求失败的相关文章

微信小程序wx.request接口

微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJECT) 发起网络请求 url data header method dataType wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'applicat

微信小程序wx.request组件的那些坑

最近在做一个教育的在线发布系统,打算用微信小程序做前端,后端用php的CI框架,这两天把CI框架的基本功能已经啃完,因为手册比较完善,所以按照逻辑走一边就通了. 反观微信小程序,帮助代码不多,对于一些没接触过前端和js开发的新手来说,很多流程和细节都会拿不准. 1.这两天遇到最大的困扰就是wx.request组件如何从php服务器端取回数据并显示在小程序界面上,这里涉及到一个通信, 因为小程序目前的机构和框架都是基于ajax异步交互的基础上的,所以要懂得小程序的数据读写功能,首先要了解ajax的

微信小程序 wx.request

一:问题 微信小程序 post请求时,服务器后台接受不到data里面的数据的bug. 二:解决办法 wx.request({ url: 'http://xxxxxxxxx/Create', method: 'POST', data: { "userid": userid, "way": way, "specificWay": specificWay, "money": money, "dateTime":

微信小程序wx.request的回调使用

微信小程序调用外部js中的wx.request方法时,因为异步的请求机制,我们不能在其success:function()中直接返回需要的数据. 例子: 一: //此方法处于外部文件 “utils/util.js” 中进行了定义 function request_method(url, callback) { wx.request({ url: url, method: 'GET', header: { 'Content-Type': 'application/json' }, success:

小程序wx.request请求的简单封装

1.api.js const baseUrl = 'https://api.it120.cc'; const http = ({ url = '', param = {}, ...other } = {}) => { wx.showLoading({ title: '请求中,请耐心等待..' }); let timeStart = Date.now(); return new Promise((resolve, reject) => { wx.request({ url: getUrl(url

【微信小程序】request请求POST提交数据,记得要加上header

wx.request({ url: '*******', data: { "type":"nearest_village", "district": that.data.district, }, header: { "Content-Type": "application/x-www-form-urlencoded" }, method: 'POST', success: function(res) { /

《微信小程序》, request 请求数据

wx.request({ url: "路径", method: 'post', header: { "Content-Type": "application/x-www-form-urlencoded" }, data: { }, success: function (res) { console.log(res) } }) 点击详情,本地设置,选择不校验合法域名 把这个勾选. 原文地址:https://www.cnblogs.com/yetie

微信小程序 wx.request POST请求------中文乱码问题

问题: 一个简单的表单,提交后台返回数据"提交成功". 以为没问题了,但是没过多久后台小哥就问为啥那么多乱码,找了很久原因,发现在提交的时候就已经乱码了. 嗯,前端问题,然后测试GET/POST方法.GET没有乱码,POST乱码 header这样写的    header: { 'content-type': 'application/x-www-form-urlencoded' } 原因: 如果设置content-type: application/x-www-form-urlenco

微信小程序 wx:key详细介绍

转自:http://www.jb51.net/article/95980.htm 微信小程序 wx:key 在自己学习的时候不是多明白到底是怎么回事,经过上网查阅资料,整理下: 个人感觉官方给出的例 子不是很明确,官方解释如下: wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符. wx:key