用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的时候多了一份信息参考；

用户反馈服务无法使用的时候，可以快速知道问题原因。

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

赞 (0)

相关推荐

  • 用Fundebug插件记录网络请求异常的方法

    在服务端,不管我们使用Node.js.Java.PHP还是Python等等,都会用日志以文本的形式记录请求以及报错信息.这个对于后端做事后分析是很有用的. 另一方面,前端有时候出问题其实是因为后端接口报错,返回数据异常导致.而实际上,前端才是用户直接触及的端,所以出了问题,首先是在前端体现出来,首先也是找前端. 为了更好地定位问题是前端代码还是接口问题,在这里推荐使用Fundebug的前端JavaScript监控插件.该插件从0.1.0之后,就开始支持HTTP请求错误的监控. 例子 为了测试,我

  • iOS判断网络请求超时的方法

    本文介绍了iOS判断网络请求超时的方法,代码具体如下: + (AFHTTPRequestOperation *)requestOperationWithUrl:(NSString *)url requetMethod:(NSString *)method paramData:(NSDictionary *)aParamData constructingBodyWithBlock:(void (^)(id <AFMultipartFormData> formData))block success

  • android 网络请求库volley方法详解

    android 网络请求库volley方法详解

    使用volley进行网络请求:需先将volley包导入androidstudio中 File下的Project Structrue,点加号导包 volley网络请求步骤: 1. 创建请求队列       RequestQueue queue = Volley.newRequestQueue(this); 2.创建请求对象(3种) StringRequest request = new StringRequest("请求方法","请求的网络地址","成功的网

  • mac 安装python网络请求包requests方法

    如下所示: sudo easy_install requests 出现如图所示信息 done 即可愉快的使用 requests了 以上这篇mac 安装python网络请求包requests方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • iOS 使用Moya网络请求的实现方法

    由于前段时间写了这篇文章,最新Moya已更新最新版本,故此也更新了下用法,本人已使用,故特意奉上最新的使用demo供参考.Moya11.0.2Demo Moya简介 Moya是你的 app 中缺失的网络层.不用再去想在哪儿(或者如何)安放网络请求,Moya 替你管理. Moya有几个比较好的特性: 编译时检查正确的API端点访问. 使你定义不同端点枚举值对应相应的用途更加明晰. 提高测试地位从而使单元测试更加容易. Swift我们用 Alamofire 来做网络库.而 Moya在Alamofir

  • RxJava+Retrofit实现网络请求封装的方法

    简要介绍 Retrofit是当前应用非常广泛的网络请求框架,通常结合RxJava来进行网络请求,本文将展示一个采用RxJava+Retrofit的网络请求demo. 集成步骤 1.app工程的build.gradle中添加依赖 //retrofit2 implementation 'com.google.code.gson:gson:2.8.5' implementation 'com.squareup.retrofit2:retrofit:2.5.0' implementation 'com.

  • Angular网络请求的封装方法

    很多时候,我很喜欢angular的编码风格,特别是angular支持typescript之后,完整的生命周期,完美的钩子函数,都是别的语言所无法替代的. 这里我来说说我自己的网络请求封装,某种意义上来说,angular自己的网络请求封装的很好的,我们没有必要再来画蛇添足,但是,可能是我有那么一点点的代码洁癖吧,喜欢自己的风格样式,所以就有了这一点多余的东西. Angular的网络请求 这里是angular自己的网络请求. url代表网络请求地址, param网络请求参数 网络请求配置,例如:请求

  • SpringBoot记录Http请求日志的方法

    在使用Spring Boot开发 web api 的时候希望把 request,request header ,response reponse header , uri, method 等等的信息记录到我们的日志中,方便我们排查问题,也能对系统的数据做一些统计. Spring 使用了 DispatcherServlet 来拦截并分发请求,我们只要自己实现一个 DispatcherServlet 并在其中对请求和响应做处理打印到日志中即可. 我们实现一个自己的分发 Servlet ,它继承于 D

  • Nginx配置统计流量带宽请求及记录实时请求状态的方法

    流量带宽请求状态统计 ngx_req_status用来展示nginx请求状态信息,类似于apache的status,nginx自带的模块只能显示连接数等等信息,我们并不能知道到底有哪些请求.以及各url域名所消耗的带宽是多少.ngx_req_status提供了这些功能. 功能特性 按域名.url.ip等等统计信息 统计总流量 统计当前带宽\峰值带宽 统计总请求数量 1. 安装 # cd /usr/local/src/ # wget "http://nginx.org/download/nginx

  • react使用axios进行api网络请求的封装方法详解

    react使用axios进行api网络请求的封装方法详解

    目录 前言 准备工作 开始封装axios config.js request.js 进行请求 总结 前言 最近写react项目使用到axios进行请求封装,在这里记录一下,希望可以帮助到初学的小伙伴 准备工作 进行请求需要使用axios,所以要先确定你已经安装完成了axios,查看package.json文件 如果没有,请先安装axios npm install axios 开始封装axios 首先在src目录下新建axios文件夹,这里我们新建两个文件,分别是config.js和request

随机推荐