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

本文涉及的产品
网络型负载均衡 NLB,每月750个小时 15LCU
.cn 域名,1个 12个月
应用型负载均衡 ALB,每月750个小时 15LCU
简介:

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

而且,至今这个开源库的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:宿主环境(浏览器)
    */ 
  tool.uploadAjaxError({
      type: 'request',    
      errInfo: JSON.stringify(ajaxSetting.data),
      errLine: xhr.status,
      Browser: navigator.userAgent
  })

测试结果:

a. onerror错误:

onerror错误信息

b. 4XX错误、5XX错误、0错误

4XX、5XX、0错误

c. timeout错误

timeout错误

2. 前端负载均衡(将请求均衡打到不同的服务器上)

应用场景:

现在很多公司更多使用ngx做负载均衡,使用node第一层hold住所有流量,然后通过ngx进行分发到不同的服务器上做负载,避免在一台服务器上读写造成资源竞争等等,结构如下图:

但是,如果在超大流量的一种状况下,前端作为请求的发出方,完全有能力在发出阶段就将请求打到不同的负载服务器上,然后再通过ngx再进行二次负载均衡,结构如下如:

全局配置:

// 负载均衡配置
loadBalancing: {
  isOpen: false,   // 是否开启负载
  cluster: ['http://localhost:8076','http://localhost:8099']  // 配置地址
},

代码实现:

/*
 * 判断是否为其他域的请求
 *
 * 改方法中处理负载均衡方案
 *    1. 对于前后端分离,直接请求域名的方案  支持
 *    2. 对于直接请求本服务器的请求,暂时不做处理,让ngx做负载均衡  不支持
 *
 *
 */
checkRealUrl: function (param, that) {
  var temp;
  if (/http:\/\/|https:\/\//.test(param.url)) {
    temp = param.url;
    // 针对请求,负载均衡到配置域名  PS:负载均衡优先级 > 宕机切换优先级
    if (param.errStatus.errURL !== temp) { // 错误搜集接口都不走
      if (param.loadBalancing.isOpen) {  // 负载打开肯定走负载
        temp = param.url.replace(/^(http:\/\/|https:\/\/)/, '')
          .replace(/^.*?\//, param.loadBalancing.cluster[tool.random(param.loadBalancing.cluster.length - 1, 0)] + '/$`')
      } else {
        // 如果负载没开,宕机切换打开,则走介个
        if (param.serviceSwitching.isOpen && selfData.isNeedSwitching) {
          temp = param.url.replace(/^(http:\/\/|https:\/\/)/, '')
            .replace(/^.*?\//, param.serviceSwitching.backupUrl + '/$`')
        }
      }
    }
  } else {
    temp = param.baseURL + param.url
    if (param.errStatus.errURL !== temp) {
      if (param.loadBalancing.isOpen) {
        temp = param.loadBalancing.cluster[tool.random(param.loadBalancing.cluster.length - 1, 0)] + param.baseURL + param.url
      } else {
        // 如果负载没开,宕机切换打开,宕机策略成功则走介个
        if (param.serviceSwitching.isOpen && selfData.isNeedSwitching) {
          temp = param.serviceSwitching.backupUrl + param.baseURL + param.url
        }
      }
    }
  }
  that.currentUrl = temp
  return temp;
}

随机函数校验:

因为前端需要通过一个伪随机数随机获取一个数值,然后通过这个数值去取负载配置的域名,为了保证随机打点的均衡性,这里将测试在指数级增长下随机打点5次的状况

随机函数测试代码:

// 伪随机数函数
random(max, min) {
    return Math.floor(Math.random() * (max - min + 1) + min);
},

案例:

a. 随机5个,10次

a. 随机5个,100次

a. 随机5个,1000次

a. 随机5个,10000次

a. 随机5个,100000次

结果:在指数级增长的过程中,打点越来越均衡,相对伪随机数的分布取值也越来越均衡

负载均衡测试结果:


2. 宕机切换(支持策略)

应用场景:

在日常用户使用请求接口的时候,用户在点击一个按钮的时候,如果一次接口请求失败,在人性角度去看,用户肯定会再一次去点击触发请求,多次按了都没效果,才会确认这个功能是没用的。如果,在这个时候,这个场景下,用一个正确的策略在用户点击时候,如果本地请求失败,支持切换备用域名,这样可以有效的挽回流失用户。

全局配置:

// 宕机切换
serviceSwitching:{
  isOpen: false,    // 是否开启
  // 宕机策略(data为记录的错误请求以及数量,如果达到策略返回true,否则false)
  strategies:function (data) {
    let num = 0
      for (var key in data){
        num = data[key]
      }
      if (num === 5){
         return true
      }else{
         return false
      }
     },
  backupUrl:'http://localhost:8033'     // 备用域名
},

代码实现:

同负载均衡的那一大堆代码,可以向上看。

测试案例(在策略中我绑定了如果错误连续积累5次之后将切换备用接口):


总结:这一期的迭代需求中已经将ajax所能涉及的应用场景全部挖掘的快消耗殆尽了,如果还有什么使用场景,可以去github提个issues。

github地址:github.com/GerryIsWarr… 可以点个star,持续研究下去

原文发布时间:2018-07-02
本文来源 掘金如需转载请紧急联系作者
相关实践学习
SLB负载均衡实践
本场景通过使用阿里云负载均衡 SLB 以及对负载均衡 SLB 后端服务器 ECS 的权重进行修改,快速解决服务器响应速度慢的问题
负载均衡入门与产品使用指南
负载均衡(Server Load Balancer)是对多台云服务器进行流量分发的负载均衡服务,可以通过流量分发扩展应用系统对外的服务能力,通过消除单点故障提升应用系统的可用性。 本课程主要介绍负载均衡的相关技术以及阿里云负载均衡产品的使用方法。
相关文章
|
2月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
97 2
|
3月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
1月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
38 18
|
1月前
|
前端开发 JavaScript API
前端Get请求能在body上传参吗
【10月更文挑战第11天】 在浏览器环境中,GET请求的body参数会被忽略,这是因为浏览器中的XHR和fetch实现限制了这一行为。而在Node.js服务端环境中,GET请求可以在body中传递参数,因为服务端请求库没有这样的限制。实际上,GET请求不带body是HTTP标准的一部分,但在某些场景下,为了遵循RESTful规范,可以考虑通过服务端转发或BFF模式来实现复杂的参数传递。
|
1月前
|
存储 缓存 监控
|
1月前
|
移动开发 前端开发 HTML5
SharedWorker 优化前端轮询请求
【10月更文挑战第6天】
29 1
|
2月前
|
JSON 前端开发 JavaScript
跨越跨域大山,前端不得不知道的Ajax
该文章介绍了AJAX技术的基本使用方法,包括GET和POST请求的模拟,并探讨了浏览器同源策略及其对跨域请求的影响,同时还提出了JSONP和CORS作为解决跨域问题的方案。
|
3月前
|
存储 前端开发 Serverless
中后台前端开发问题之Django项目中接收和处理用户的抽奖请求如何解决
中后台前端开发问题之Django项目中接收和处理用户的抽奖请求如何解决
20 0
|
3月前
|
负载均衡 前端开发 数据处理
"揭秘!ALB负载均衡器如何赋能Airflow,让数据处理命令请求在云端翩翩起舞,挑战性能极限,你不可不知的秘密!"
【8月更文挑战第20天】在现代云计算环境中,负载均衡ALB作为七层HTTP/HTTPS流量分发器,能显著提升系统的可用性和扩展性。结合Airflow这一开源工作流管理平台,ALB可以有效分发其REST API命令请求。通过配置ALB实例监听HTTP/S请求,并将多个Airflow实例加入目标组,再配合健康检查确保实例稳定,即可实现对Airflow命令的高效负载均衡,进而增强数据处理任务的可靠性和性能。
39 0
|
Web App开发 移动开发 前端开发
前端通信:ajax设计方案(二)---集成轮询技术
上一篇文章介绍了ajax技术核心方法,和跨域的问题(只要后台支持跨域默认post就可以),这篇文章讲解一下使用ajax实现的轮询技术,至于iframe,SSE服务器单向推送,以及webSocket双工通道暂时不涉及。
1383 0
下一篇
无影云桌面