前端通信:ajax设计方案(七)--- 增加请求错误监控、前端负载均衡以、请求宕机切换以及迭代问题修复

本文涉及的产品
应用型负载均衡 ALB,每月750个小时 15LCU
传统型负载均衡 CLB,每月750个小时 15LCU
网络型负载均衡 NLB,每月750个小时 15LCU
简介: 距离上个迭代过了很长时间,中间经历了很多事情,也在每个空余时间构思了这个迭代的东西以及下个迭代要做的东西。时间周期稍微长了,望见谅。而且,至今这个开源库的start也已经到了165个了,会支持关注和研究的。

距离上个迭代过了很长时间,中间经历了很多事情,也在每个空余时间构思了这个迭代的东西以及下个迭代要做的东西。时间周期稍微长了,望见谅。

而且,至今这个开源库的start也已经到了165个了,会支持关注和研究的。

 

首先解决了上个迭代遇到的问题进行完善和修复

1. 上个迭代做ajax timeout设置的时候,手抖将timeout不小心设置成timeoutEvent,这期做了修复

2. 解决全局配置中配置额外参数,批量检查时会参数错误问题。

 

引入新的功能:

1. 增加浏览器发送请求的错误监控和搜集

应用场景:

前端开发依赖的东西比较多,比如宿主环境(浏览器)、以及数据接口(自己服务器或者第三方Api等等),上个迭代进行了浏览器错误搜集,可以分析用户在不同环境下宿主的使用率和差异以及问题。但是对于用户的数据请求一直没有做监控,因为用户在不同的场景、网络状况下乃至在开发或者发布中将接口地址写错了,导致出现问题。

 

全局配置:

errStatus: {
  isOpenErr: true,    // 是否开启错误搜集
  errURL: 'http://localhost:8072',    // 错误搜集地址
},

 

代码如下:

    //监控ajax请求的错误日志
    uploadAjaxError: function (obj) {
      // 过滤错误接口
      if (initParam.errStatus.isOpenErr) {
        if (obj.errUrl !== initParam.errStatus.errURL) {
          tempObj.post(initParam.errStatus.errURL, obj)
        }
      }
      // 记录错误信息,以便策略做判断
      if (selfData.errAjax[obj.errUrl] === undefined) {
        selfData.errAjax[obj.errUrl] = 1
      } else {
        selfData.errAjax[obj.errUrl] += 1
      }

      // 判断是否开启服务切换,以及验证策略切换
      if (initParam.serviceSwitching.isOpen){
        // 验证策略
        selfData.isNeedSwitching = initParam.serviceSwitching.strategies(selfData.errAjax)
      }

    }

 

覆盖面以及数据:

请求的错误搜集,将覆盖4xx、5xx、0、onerror以及timeout状态

PS:在浏览器api中,只读属性 XMLHttpRequest.status 返回了XMLHttpRequest 响应中的数字状态码。status 的值是一个无符号短整型。在请求完成前,status的值为0。值得注意的是,如果 XMLHttpRequest 出错,浏览器返回的 status 也为0。

链接:XMLHttpRequest.status

 

数据上传格式:

  /*
    * 请求错误搜集
    *   type:错误类型
    *   errInfo:错误的请求参数
    *   errLine:请求状态
    *   Browser:
相关实践学习
SLB负载均衡实践
本场景通过使用阿里云负载均衡 SLB 以及对负载均衡 SLB 后端服务器 ECS 的权重进行修改,快速解决服务器响应速度慢的问题
负载均衡入门与产品使用指南
负载均衡(Server Load Balancer)是对多台云服务器进行流量分发的负载均衡服务,可以通过流量分发扩展应用系统对外的服务能力,通过消除单点故障提升应用系统的可用性。 本课程主要介绍负载均衡的相关技术以及阿里云负载均衡产品的使用方法。
目录
相关文章
|
1月前
|
XML 前端开发 JavaScript
|
4月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
2月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
59 22
|
2月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
38 18
|
2月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
81 4
|
2月前
|
前端开发 JavaScript API
前端Get请求能在body上传参吗
【10月更文挑战第11天】 在浏览器环境中,GET请求的body参数会被忽略,这是因为浏览器中的XHR和fetch实现限制了这一行为。而在Node.js服务端环境中,GET请求可以在body中传递参数,因为服务端请求库没有这样的限制。实际上,GET请求不带body是HTTP标准的一部分,但在某些场景下,为了遵循RESTful规范,可以考虑通过服务端转发或BFF模式来实现复杂的参数传递。
|
2月前
|
存储 缓存 监控
|
2月前
|
移动开发 前端开发 HTML5
SharedWorker 优化前端轮询请求
【10月更文挑战第6天】
30 1
|
2月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
110 1
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
61 10
React技术栈-react使用的Ajax请求库实战案例