用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以及本文地址:
https://blog.fundebug.com/2019/01/25/use-fundebug-to-capture-http-error/
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
大数据 第一天 linux入门 及基本操作指令
内容 防火墙 查看状态 service iptables status 关闭 service iptables stop 打开 service iptables start 永久关闭防火墙 chkconfig iptables off 2.常用命令 命令组成 命令+选项+参数 短选项(-):只能修饰一个字符的选项。 比如: ls -a,当然多个短选项可以合并,比如tar -cvf 短选项使用一个字母表示,但如果能更清楚的表达含义,可以使用一个单词来表达选项。如ls命令都有size选项,表示显示文件的大小。如果写成-size的话,会被误解为-s、-i、-z、-e4个选项。所以这时使用长选项。另外,许多命令的选项都提供长短两种选项,如 长选项(--):可以修饰单个字符,也可以修饰一个单词。 cd :切换目录 rm:删除 -r 递归删除所有文件 -f 强制 不提示删除文件 ma
- 下一篇
Java常用工具类
提供参数,时间,加密、验证码、邮件、跨域、随机数、Id生成等开发中常用到的工具。。。 一、导入依赖 <dependency> <groupId>cn.gjing</groupId> <artifactId>tools-common</artifactId> <version>1.2.3</version> </dependency> 使用须知 如果是Spring环境,确保一些工具的可用, 需要手动在xml文件中进行如下配置,SpringBoot环境无需配置 <bean id="xxx" class="cn.gjing.handle.ToolsCommonAdapter"/> 二、常用注解: 1、@NotNull 方法参数校验,如若要排除方法中的某个参数,搭配使用@Exclude注解到指定参数上; 2、@NotEmpty 方法参数校验, 可对null和空字符串进行校验, 如果要排除某些参数, 搭配使用@Exclude2注解到指定参数上, 如果需要自定义异常提示信息, 可设置mess...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS7设置SWAP分区,小内存服务器的救世主
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- MySQL8.0.19开启GTID主从同步CentOS8
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- Hadoop3单机部署,实现最简伪集群