Front-end communication: Ajax Design (vii)---Increase request error monitoring, front-end load balancing, request outage switching, and iterative problem repair

It took a long time to get to the last iteration, and there were a lot of things going on in the middle, and the iteration was conceived in every spare time and the next iteration was going to do something. The time period is slightly long, hope forgive me.

first, solve the problem of the last iteration to perfect and fix :

1. The last iteration of the Ajax timeout setting, the hand shake timeout is accidentally set to timeoutevent, this issue has been fixed

2. Resolve the configuration of the global configuration of additional parameters, batch inspection will be a parameter error problem.

Introduction of new features:

1. Increased error monitoring and collection of browser sending requests

Application Scenarios:

Front-end development relies on a lot of things, such as the host environment (browser), as well as the data interface (its own server or third-party API, etc.), the last iteration of the browser error collection, you can analyze the user in different environments hosting the usage and differences and problems. However, the user's data request has not been monitored, because the user in different scenarios, network conditions, or even in the development or release of the interface address is incorrectly written, resulting in problems.

Global configuration:

errstatus: {  true,    //  whether to turn on Error collection  errurl: ' http://localhost : 8072 ',    //  Error collection address },

The code is as follows:

    //monitoring error logs for AJAX requestsUploadajaxerror:function(obj) {//Filtering Error Interfaces      if(INITPARAM.ERRSTATUS.ISOPENERR) {if(Obj.errurl!==InitParam.errStatus.errURL) {tempobj.post (InitParam.errStatus.errURL, obj)}}//log error messages so that policies can be judged      if(Selfdata.errajax[obj.errurl] = = =undefined) {Selfdata.errajax[obj.errurl]= 1      } Else{Selfdata.errajax[obj.errurl]+ = 1      }      //Determine if service switching is turned on, and verify policy switching      if(initParam.serviceSwitching.isOpen) {//Validation PolicySelfdata.isneedswitching =initParam.serviceSwitching.strategies (Selfdata.errajax)}}

Coverage and data:

The requested error collection will overwrite the 4xx, 5xx, 0, onerror, and timeout states

PS: In the browser API, the read-only attribute Xmlhttprequest.status returns the number status code in the XMLHttpRequest response. The value of status is an unsigned short integer. The status value is 0 before the request is completed. It is important to note that if the XMLHttpRequest error occurs, the browser returns a status of 0.

Links: Xmlhttprequest.status

Data upload format:

  /*     * Request Error Collection    *   type: Error type    *   errinfo: Wrong request parameter    *   errline: Request Status    *   Browser: Host Environment (browser)    *   /tool.uploadajaxerror (      {' request ',          ErrInfo:JSON.stringify (Ajaxsetting.data),      errLine:xhr.status,      Browser:navigator.userAgent  }) 

Test results:

A. OnError error:

B. 4XX error, 5XX error, 0 error

C. Timeout error

2. Front-end load balancing (balancing requests to different servers)

Application Scenarios:

Many companies now use NGX to do load balancing, use node first to hold all traffic, and then distribute to different servers through NGX to do load, avoid reading and writing on one server to compete for resources, etc., structure such as:

However, if in a situation of ultra-large traffic, the front end as the sender of the request, fully capable of the issuing phase of the request to the different load server, and then through the NGX two times load balancing, the structure is as follows:

Global configuration:

// Load Balancing Configuration loadbalancing: {  false,   //  whether to turn on load  cluster: [' http://localhost : 8076 ', ' http://localhost:8099 ']  //  config address },

Code implementation:

    /** Determine if requests for other domains are processed in the load balancing scheme * 1. For front-end separation, direct request for domain name scheme support * 2. For requests directly from the server, temporarily do not handle, let NGX do negative Load balancer does not support * **/Checkrealurl:function(param, that) {vartemp; if(/http:\/\/|https:\/\//. Test (Param.url)) {Temp=Param.url; //load Balancer to config domain name for request PS: Load Balancer Priority > Downtime Switch Priority        if(Param.errStatus.errURL!== temp) {//Error collection interfaces are not going          if(Param.loadBalancing.isOpen) {//load Open Positive loadtemp = Param.url.replace (/^ (http:\/\/|https:\/\/)/, "). Replace (/^.*?\//, Param.loadbalancing.cluster[tool.random (param.loadbalancing.cluster.length-1, 0)] + '/$ ')          }Else{            //If the load does not open, the outage switch is turned on, then go to a            if(Param.serviceSwitching.isOpen &&selfdata.isneedswitching) {Temp= Param.url.replace (/^ (http:\/\/|https:\/\/)/, "). Replace (/^.*?\//, Param.serviceSwitching.backupUrl + '/$ ')            }          }        }      } Else{Temp= Param.baseurl +Param.urlif(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 the load is not open, the outage switch is turned on, and the downtime policy succeeds.            if(Param.serviceSwitching.isOpen &&selfdata.isneedswitching) {Temp= Param.serviceSwitching.backupUrl + Param.baseurl +Param.url} }} That.currenturl=Tempreturntemp; },

Random function Check:

Because the front-end needs to be randomly obtained by a pseudo-random number, and then use this value to get the domain name of the load configuration, in order to ensure the equalization of random point, here will test the exponential growth under the random 5 times the situation

Test code:

// pseudo-random number function random (max, min) {    return Math.floor (Math.random () * (Max-min + 1) + min);},

Case:

A. Random 5, 10 times

B. Random 5, 100 times

C. Random 5, 1000 times

D. Random 5, 10,000 times

E. Random 5, 100,000 times

Results: In the process of exponential growth, the distribution of the relative pseudo-random number is more and more balanced.

Test results:

3. Downtime switch (support policy)

Application Scenarios:

When the user uses the request interface, when the user clicks on a button, if an interface request fails, in the human perspective, the user will definitely click on the trigger request again, many times press has no effect, will confirm this function is useless. If, at this time, this scenario, with a correct policy at the time of the user click, if the local request fails, support switching the alternate domain name, which can effectively save the lost users.

Global configuration:

//Downtime Switchserviceswitching:{IsOpen:false,//whether to open  //outage Policy (data is a logged error request, and the number is true if the policy is reached, false otherwise)Strategies:function(data) {Let num= 0 for(varKeyinchdata) {num=Data[key]}if(num = = 5){         return true      }Else{         return false}}, Backupurl:' Http://localhost:8033 '//Alternate domain name},

Code implementation:

The same load balancing of the bunch of code, you can look up.

Test case (in the policy I am bound to switch the alternate interface if the error accumulates 5 consecutive times):

Summary: This phase of the iterative requirements have been the Ajax can be involved in the application of all the mining is almost exhausted, if there is any use of the scene, you can go to GitHub to mention a issues.

GitHub Address: Https://github.com/GerryIsWarrior/ajax can point to a star, continue to study

Extra: Once in a test, unexpectedly suddenly found that a used request object can be reused, and a set of creation process from more than 2000 milliseconds to downgrade to 200 milliseconds, so, the next iteration will be a request connection pool, reuse each time the object created to complete, Reduce the speed of each request to a faster level, expecting ...

Front-end communication: Ajax Design (vii)---Increase request error monitoring, front-end load balancing, request outage switching, and iterative problem repair