用Fundebug插件记录网络请求异常的方法


Posted in Javascript onFebruary 21, 2019

在服务端,不管我们使用Node.js、Java、PHP还是Python等等,都会用日志以文本的形式记录请求以及报错信息。这个对于后端做事后分析是很有用的。

另一方面,前端有时候出问题其实是因为后端接口报错,返回数据异常导致。而实际上,前端才是用户直接触及的端,所以出了问题,首先是在前端体现出来,首先也是找前端。

用Fundebug插件记录网络请求异常的方法

为了更好地定位问题是前端代码还是接口问题,在这里推荐使用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监控项目,并拷贝接入代码:

用Fundebug插件记录网络请求异常的方法

完整代码如下所示:

<!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访问该页面。

用Fundebug插件记录网络请求异常的方法

点击页面上的click按钮,就会触发这个错误。在Fundebug的控制台可以看到报错信息,如下所示:

用Fundebug插件记录网络请求异常的方法

点击该错误,可以查看报错详情。一个http的get请求访问http://127.0.0.1:8080/example/,然后返回404。当然,http的请求错误类型有很多,不仅可以抓404, 什么401啊,403啊,500啊等等都能抓过来。

用Fundebug插件记录网络请求异常的方法

另外,通过用户行为也可以很好地看到触发报错的过程:

用Fundebug插件记录网络请求异常的方法

跨域问题

如果访问的是非同源的请求,那么报错会拿不到状态码,也就是说status不会是404,而是0。这个比较蛋疼!

总结

监控HTTP请求错误有什么好处?

第一时间发现HTTP请求出现状况;

及时告知后端服务器出了问题,快速应对;

分析前端其它bug的时候多了一份信息参考;

用户反馈服务无法使用的时候,可以快速知道问题原因。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
javascript实现拖放效果
Dec 16 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
vue--vuex详解
Apr 15 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 #Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 #Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 #Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 #Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 #Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 #Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 #Javascript
You might like
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
解析php常用image图像函数集
2013/06/24 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
php格式化时间戳
2016/12/17 PHP
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
盘点提高 Python 代码效率的方法
2014/07/03 Python
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python调用C语言开发的共享库方法实例
2015/03/18 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
python爬虫添加请求头代码实例
2019/12/28 Python
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
商务会议邀请函
2014/01/09 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
前台文员职责范本
2014/03/07 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技