用Fundebug插件记录网络请求异常
在服务端,不管我们使用Node.js、Java、PHP还是Python等等,都会用日志以文本的形式记录请求以及报错信息。这个对于后端做事后分析是很有用的。
另一方面,前端有时候出问题其实是因为后端接口报错,返回数据异常导致。而实际上,前端才是用户直接触及的端,所以出了问题,首先是在前端体现出来,首先也是找前端。
为了更好地定位问题是前端代码还是接口问题,在这里推荐使用Fundebug的前端JavaScript监控插件。该插件从0.1.0之后,就开始支持HTTP请求错误的监控。
例子
为了测试,我写一个简单的例子。没有用到任何复杂的框架,就是一个简单的HTML加上网络请求的JS。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Test HTTP Request</title>
</head>
<body><h1>This is a test for HTTP request error !</h1><button onclick="loadRequest()">Click</button>
</body>
<script type="text/javascript">
function loadRequest() {var oReq = new XMLHttpRequest();oReq.open("GET", "http://127.0.0.1:8080/example/");oReq.send();
}
</script>
</html>
然后,在Fundebug创建一个JS监控项目,并拷贝接入代码:
完整代码如下所示:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Test HTTP Request</title>
</head>
<body><h1>This is a test for HTTP request error !</h1><button onclick="loadRequest()">Click</button>
</body>
<script type="text/javascript">
function loadRequest() {var oReq = new XMLHttpRequest();oReq.open("GET", "http://127.0.0.1:8080/example/");oReq.send();
}
</script>
<script src="https://js.fundebug.cn/fundebug.1.0.3.min.js"apikey="YOUR-API-KEY"></script>
</html>
使用http-server
命令直接运行(推荐小技巧:使用npm install -g http-server
安装一个简单的服务器。),在浏览器输入地址http://127.0.0.1:8080
访问该页面。
点击页面上的click
按钮,就会触发这个错误。在Fundebug的控制台可以看到报错信息,如下所示:
点击该错误,可以查看报错详情。一个http的get请求访问http://127.0.0.1:8080/example/
,然后返回404。当然,http的请求错误类型有很多,不仅可以抓404, 什么401啊,403啊,500啊等等都能抓过来。
另外,通过用户行为也可以很好地看到触发报错的过程:
跨域问题
如果访问的是非同源的请求,那么报错会拿不到状态码,也就是说status不会是404,而是0。这个比较蛋疼!
总结
监控HTTP请求错误有什么好处?
- 第一时间发现HTTP请求出现状况;
- 及时告知后端服务器出了问题,快速应对;
- 分析前端其它bug的时候多了一份信息参考;
- 用户反馈服务无法使用的时候,可以快速知道问题原因。
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用!
版权声明
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2019/01/25/use-fundebug-to-capture-http-error/
用Fundebug插件记录网络请求异常相关推荐
- fundebug php,用Fundebug插件记录网络请求异常的方法
在服务端,不管我们使用Node.js.Java.PHP还是Python等等,都会用日志以文本的形式记录请求以及报错信息.这个对于后端做事后分析是很有用的. 另一方面,前端有时候出问题其实是因为后端接口 ...
- easy connect显示‘网络请求异常请稍后重试’
参考: easy connect老是连接不上一直显示网络请求异常请稍后重试和
- python 大量网络请求失败_网络请求异常拦截优化
public class ExceptionUtils { /* * 在使用Retrofit+RxJava时,我们访问接口,获取数据的流程一般是这样的:订阅->访问接口->解析数据-> ...
- 微信小程序网络请求异常怎么办_监控微信小程序wx.request请求失败
在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request ...
- 微信小程序网络请求异常怎么办_微信小程序网络超时的处理
"networkTimeout": { "request": 6000, "downloadFile": 10000 }, 一.在onLau ...
- 微信小程序网络请求异常怎么办_解决·微信小程序开发-网络请求报Invalid request 400错误...
今天学习了一下微信小程序的入门开发,在使用网络请求时,发现根据微信官方的API的方法进行操作出现Invalid request 400错误,到底怎么回事呢? 首先我们来看微信API网络请求 示例代码: ...
- [Asp.net core]使用Polly网络请求异常重试
摘要 在网络传输过程中,不能保证所有的请求都能正确的被服务端接受或者处理,那么进行简单的重试可以进行简单的补救.比如现在大部分支付功能,在支付成功之后,需要回调我们网站的接口,并且要求我们的接口给一个 ...
- 微信小程序网络请求异常怎么办_微信小程序打开提示“网络异常,请检查网络状态”的解决方法...
症状:打开微信小程序的时候,提示"网络异常,请检查网络状态",无法加载数据. 问题客户端:安卓手机 经过测试:IOS和微信桌面版,均正常. 唯独安卓手机不行,如下图所示,这个问题不 ...
- Java生鲜电商平台-SpringCloud微服务架构中网络请求性能优化与源码解析
Java生鲜电商平台-SpringCloud微服务架构中网络请求性能优化与源码解析 说明:Java生鲜电商平台中,由于服务进行了拆分,很多的业务服务导致了请求的网络延迟与性能消耗,对应的这些问题,我们 ...
最新文章
- 安装H3C的各种问题
- ThumbnailUtils的使用
- 人脸识别方法个人见解
- JSBinding+SharpKit / 更新的原理
- css控制的代码,通过CSS控制把网页上的代码美化
- mysqld.exe已停止工作_win7一直弹出DrUpdate.exe已经停止工作的解决方法
- eff java_牛津大学为国家图书馆周开幕,EFF组织大学活动家,等等
- vue 地图使用navigator_初识ABP vNext(6):vue+ABP实现国际化
- java命令行参数args_Args4J (Java 命令行参数控制开源项目) 使用指南
- as3实现(可以操纵的)真正的由惯性导致的漂移
- 编译bug can not be used when making a shared object; recompile with -fPIC
- 计算机机房的消防验收,机房建设(消防)解决方案
- mfs java_mfs分布式文件系统部署过程
- 通过微信扫码登录剖析 oauth2 认证授权技术
- mysql 去掉前面的0_去掉前面的0的sql语句(前导零,零前缀)
- 随机的UserAgent对付某反爬虫网站
- 人力资源管理的毕业论文选题推荐?
- NVIDIA CUDA Toolkit 各个版本安装方式
- 良精商城网店购物系统
- 关于span设置宽高
热门文章
- sigar 使用报错问题解决(java.lang.UnsatisfiedLinkError: gather)
- 佳能iC MF645CX彩色激光多功能打印机报E302-0001故障码检修
- UGUI合批drawcall高的原因
- JavaScript 使用canvas压缩图片
- qq音乐windows版本也用了部分chromium库啊
- Visual Basic 6.0.with.SP6 龙卷风大企业集成安装版(含下载地址)
- 智慧节能系统的商业模式
- 微信小程序日历组件(可滑动,可展开收缩,可标点)
- 基于SVM的车辆标牌识别
- 无法启动调试。未安装Sliverlight Developer运行时。请安装一个匹配版本。