用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 相关文章推荐
用JS实现3D球状标签云示例代码
Dec 01 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
JavaScript简易计算器制作
Jan 17 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
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
露营世界:Camping World
2017/02/02 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
法学个人求职信范文
2014/01/27 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
工会工作先进事迹
2014/08/18 职场文书
自我管理的活动方案
2014/08/25 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
考研复习计划
2015/01/19 职场文书
大学军训决心书
2015/02/05 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android
Python加密与解密模块hashlib与hmac
2022/06/05 Python
JS实现九宫格拼图游戏
2022/06/28 Javascript
Python如何加载模型并查看网络
2022/07/15 Python