用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 validate使用攻略 第四步
Jul 01 Javascript
jquery中post方法用法实例
Oct 21 Javascript
一些实用性较高的js方法
Apr 19 Javascript
js只执行1次的函数示例
Jul 20 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 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
第十四节 命名空间 [14]
2006/10/09 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
jQuery老黄历完整实现方法
2015/01/16 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
在Linux下调试Python代码的各种方法
2015/04/17 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python支持多继承吗
2020/06/19 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
如何把python项目部署到linux服务器
2020/08/26 Python
python pip如何手动安装二进制包
2020/09/30 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
英语生日邀请函
2014/01/23 职场文书
市三好学生主要事迹
2014/01/28 职场文书
抄作业检讨书
2014/02/17 职场文书
廉洁自律承诺书
2014/03/27 职场文书
护理目标管理责任书
2014/07/25 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
党员身份证明材料
2015/06/19 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python