用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这是对HTTP请求错误的测试！/h1 button onclick=' load request()' Click/button/body script type=' text/JavaScript ' function load request(){ 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这是对HTTP请求错误的测试！/h1 button onclick=' load request()' Click/button/body script type=' text/JavaScript ' function load request(){ var oReq=new XMLHttpRequest()；oReq.open('GET '，' http://127 . 0 . 0 . 1:8080/example/')；oreq . send()；}/script script src=' http:https://js.funddebug.cn/funddebug.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的控制台中可以看到错误消息，如下图所示：

单击错误以查看错误报告的详细信息。http get请求访问http://127 . 0 . 0 . 1:8080/example/，然后返回404。当然，http请求错误的类型有很多，不仅仅是404、401、403、500等等。

此外，通过用户行为可以很好地看到触发错误报告的过程：

跨域问题

如果访问是非同源请求，错误不会得到状态码，即状态不是404，而是0。这个疼！

摘要

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

第一次发现HTTP请求有问题；

及时通知后端服务器有问题，快速响应；

在前端分析其他bug时，有额外的信息参考；

当用户反馈服务不可用时，您可以快速知道问题的原因。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。