用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插件记录网络请求异常的更多相关文章
- [Asp.net core]使用Polly网络请求异常重试
摘要 在网络传输过程中,不能保证所有的请求都能正确的被服务端接受或者处理,那么进行简单的重试可以进行简单的补救.比如现在大部分支付功能,在支付成功之后,需要回调我们网站的接口,并且要求我们的接口给一个 ...
- Java生鲜电商平台-SpringCloud微服务架构中网络请求性能优化与源码解析
Java生鲜电商平台-SpringCloud微服务架构中网络请求性能优化与源码解析 说明:Java生鲜电商平台中,由于服务进行了拆分,很多的业务服务导致了请求的网络延迟与性能消耗,对应的这些问题,我们 ...
- 转-封装网络请求库，统一处理通用异常 (基于volley网络请求库)
http://blog.csdn.net/kroclin/article/details/40540761 一.前言 volley的发布让网络请求也变得十分便利,但是我们通常懒得很想用一两句代码实现一 ...
- [每天记录一个Bug]Cell中由于block加载网络请求产生的复用
Bug 出现场景: cell中使用加载图片的网络请求出现复用,截图如下: 复用原因: Cell Model中只有一个用户的uid,所有用户相关信息:例如头像\名称\信息等是通过 ...
- Java网络请求getInputStream异常
今天调试网络请求部分时,当getInputStream失败时直接抛出异常.解决方法时在getInputStream之前获取ResponseCode if( connection.getResponse ...
- android 网络请求Ⅰ
本章讲述在android开发中,常用的网络请求操作.网络请求利用android基本的HttpURLConnection连接URL和开源网络请求包AsyncHttpClient.本次网络请求以调取天气接 ...
- Android网络请求与数据解析，使用Gson和GsonFormat解析复杂Json数据
版权声明:未经博主允许不得转载 一:简介 [达叔有道]软件技术人员,时代作者,从 Android 到全栈之路,我相信你也可以!阅读他的文章,会上瘾!You and me, we are family ...
- 网络请求及各类错误代码含义总结(包含AFN错误码大全)
碰见一个很奇葩的问题, 某些手机在设置了不知什么后, 某些 APP 死活 HTTPS 请求失败, 例如以 UMeng 统计HTTP 请求失败为例, Log如下: UMLOG: (Error App ...
- 移动端打印输出内容以及网络请求-vconsole.js
今天,无意间从别人那里得知一个很好的js插件--vconsole.min.js,可以实现在移动端打印输出内容以及查看网络请求.下面记录使用方式. 1.下载vconsole.min.js插件 以下复制了 ...
随机推荐
- AngularJs 隔离作用域
初学NG,有诸多的不解,今天看了一篇文章,原文地址:https://segmentfault.com/a/1190000002773689#articleHeader0 ,本文运行的代码也出处此. 里 ...
- VirtualBox上安装64位系统
http://blog.csdn.net/mal327/article/details/6597263 原来VirtualBox安装64位的系统需要满足以下条件: 1.64位的cpu2.安装的系统必须 ...
- Wooden Sticks -HZNU寒假集训
Wooden Sticks There is a pile of n wooden sticks. The length and weight of each stick are known in a ...
- pc端页面打包成安卓apk
一.phoneGap PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Sy ...
- Scala编程入门---面向对象编程之Trait高级知识
trait调用链 Scala中支持让类继承多个Trait后,依次调用多个Trait中的同一个方法,只要让多个trait的同一个方法中,在最后都执行super.方法即可 类中调用多个trait中都有这个 ...
- MVC-AOP(面向切面编程)思想-Filter之IExceptionFilter-异常处理
HandleErrorAttribute MVC中的基本异常分类: Action异常 T view异常 T, service异常 T, 控制器异常 F(异常get不到), ...
- ajax 原生态和jquery封装区别
一.原生态 var xmlHttp = false; try{ if( xmlHttp && xmlHttp.readyState != 0 ){ xmlHttp.abort(); } ...
- 虚拟机配置Openstack常见问题汇总
之前配置了openstack,遇到一些问题,现在将问题全部汇总记录在这里. (1)问题:主机名字修改不了: 原因:没有进入root状态:或者没有正确打开文件,要打开的是/etc/hostname,结果 ...
- 大厂们的 redis 集群方案
redis 集群方案主要有两类,一是使用类 codis 的架构,按组划分,实例之间互相独立: 另一套是基于官方的 redis cluster 的方案:下面分别聊聊这两种方案: 类 codis 架构 这 ...
- TensorFlow-谷歌深度学习库 文件I/O Wrapper
这篇文章主要介绍一下TensorFlow中相关的文件I/O操作,我们主要使tf.gfile来完成. Exists tf.gfile.Exists(filename) 用来判断一个路径是否存在,如果存在 ...