用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 相关文章推荐
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
ES6的解构赋值实例详解
May 06 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
JavaScript 调试器简介
2009/02/21 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
python编程嵌套函数实例代码
2018/02/11 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
python实现梯度法 python最速下降法
2020/03/24 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
先进德育工作者事迹材料
2014/01/24 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书