在服务端，不管我们使用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插件记录网络请求异常的更多相关文章

  1. [Asp.net core]使用Polly网络请求异常重试

    摘要 在网络传输过程中,不能保证所有的请求都能正确的被服务端接受或者处理,那么进行简单的重试可以进行简单的补救.比如现在大部分支付功能,在支付成功之后,需要回调我们网站的接口,并且要求我们的接口给一个 ...

  2. Java生鲜电商平台-SpringCloud微服务架构中网络请求性能优化与源码解析

    Java生鲜电商平台-SpringCloud微服务架构中网络请求性能优化与源码解析 说明:Java生鲜电商平台中,由于服务进行了拆分,很多的业务服务导致了请求的网络延迟与性能消耗,对应的这些问题,我们 ...

  3. 转-封装网络请求库，统一处理通用异常 (基于volley网络请求库)

    http://blog.csdn.net/kroclin/article/details/40540761 一.前言 volley的发布让网络请求也变得十分便利,但是我们通常懒得很想用一两句代码实现一 ...

  4. [每天记录一个Bug]Cell中由于block加载网络请求产生的复用

    Bug 出现场景:   cell中使用加载图片的网络请求出现复用,截图如下:         复用原因:   Cell Model中只有一个用户的uid,所有用户相关信息:例如头像\名称\信息等是通过 ...

  5. Java网络请求getInputStream异常

    今天调试网络请求部分时,当getInputStream失败时直接抛出异常.解决方法时在getInputStream之前获取ResponseCode if( connection.getResponse ...

  6. android 网络请求Ⅰ

    本章讲述在android开发中,常用的网络请求操作.网络请求利用android基本的HttpURLConnection连接URL和开源网络请求包AsyncHttpClient.本次网络请求以调取天气接 ...

  7. Android网络请求与数据解析，使用Gson和GsonFormat解析复杂Json数据

    版权声明:未经博主允许不得转载 一:简介 [达叔有道]软件技术人员,时代作者,从 Android 到全栈之路,我相信你也可以!阅读他的文章,会上瘾!You and me, we are family ...

  8. 网络请求及各类错误代码含义总结(包含AFN错误码大全)

    碰见一个很奇葩的问题, 某些手机在设置了不知什么后, 某些 APP 死活 HTTPS 请求失败, 例如以 UMeng 统计HTTP 请求失败为例, Log如下: UMLOG: (Error   App ...

  9. 移动端打印输出内容以及网络请求-vconsole.js

    今天,无意间从别人那里得知一个很好的js插件--vconsole.min.js,可以实现在移动端打印输出内容以及查看网络请求.下面记录使用方式. 1.下载vconsole.min.js插件 以下复制了 ...

随机推荐

  1. javaScript(7)---函数

    学习要点: 1.函数声明 2.return返回值 3.arguments对象 函数是定义一次但却可以调用或执行任意多次的一段JS代码.函数有时会有参数,即函数被调用时指定了值的局部变量.函数常常使用这 ...

  2. Jbpm工作流（一）

    了解一下什么是Jbpm及特点. jBPM,全称是Java Business Process Management,是一种基于J2EE的轻量级工作流管理系统.jBPM是公开源代码项目,它使用要遵循 Ap ...

  3. Visual Studio 2013创建自定义多项目模版

    首先附上效果图: 可以看到输入解决方案名称后,自动创建了我事先写好的架构,并且项目名及Server层名称都变了,并且依然保持了引用关系. 下面讲具体步骤: 第一步:建立解决方案,并将需要的代码全部写好 ...

  4. 获取redis主从复制链SHELL脚本

    获取redis主从复制链SHELL脚本 vi redisnode.sh #!/bin/sh master_host=$ master_port=$ auth=$ #判断输入密码是否为空,为空则转化为' ...

  5. 关于Android适配华为等带有底部虚拟按键的解决方案

    http://blog.csdn.NET/a91694451/article/details/50469857 最近公司的项目里遇到了一个问题,就是最后适配的时候时候同事的华为手机时,由于底部带有虚拟 ...

  6. Django error信息邮件通知功能配置部署

    1. 最近QA成为项目的重点,除了突破依赖外部表的阻力开始启用单元测试,还有一点就是对在线的生产服务的错误信息启用这个邮件通知功能,下面简单说一下启用方法: 1.发送邮件账号配置配置: EMAIL_H ...

  7. PyCharm中HTML页面CSS class名称自动完成功能失效的问题

    如果这个HTML页面带有style元素的CSS定义,那class name自动完成功能就失效了 Pycharm Version:5.03

  8. 分布式文件系统MFS、Ceph、GlusterFS、Lustre的比较

    原文:http://blog.csdn.net/metaxen/article/details/7108958 MooseFS(MFS) Ceph GlusterFS Lustre Metadata ...

  9. Spark核心编程---创建RDD

    创建RDD: 1:使用程序中的集合创建RDD,主要用于进行测试,可以在实际部署到集群运行之前,自己使用集合构造测试数据,来测试后面的spark应用流程. 2:使用本地文件创建RDD,主要用于临时性地处 ...

  10. SEO优化-robots.txt解读

    一.什么是robots.txt robots.txt 文件由一条或多条规则组成.每条规则可禁止(或允许)特定抓取工具抓取相应网站中的指定文件路径. 通俗一点的说法就是:告诉爬虫,我这个网站,你哪些能看 ...