Handling Bad and Faulty Network

Posted By : Akhil Dhiman | 28-Jul-2014
phonegap jquery
While making some network calls sometimes failure of network calls occur. For that i will let you know how to handle failure network cases. Following is the method to implement network call:

Please Refer the below HTML:

 <!DOCTYPE html>
<html lang="en">
    <head>
        <title>i18n</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <</head>
    <body>
        <div>
            Hello World!!!
        </div>
        <div id="networkErrorDiv" class="networkErrorDivs" style="display:none;"></div>
        <div id="ErrorHandlingDivAjaxCall" class="networkErrorDivs" style="display:none;">Network Error. Tap Here To Retry</div>
    </body>
</html>

Below is the js code to implement network call.

 var networkCallObj = {};
var timeOutNetworkCall = 30000;
var timeOutCounter = 0;
var timeOutCounterArray = [0,10000,10000,10000];

function onNetworkCall(url,data,successCallback){
    $(".networkErrorDivs").hide();
    networkCallObj.url = url;
    networkCallObj.data = data;
    networkCallObj.callbackFunction = successCallback;
    $.ajax({
        type: "POST",
        url: url,
        timeout: 30000 ,
        data: data
        }).done(function( msg ) {
            successCallback(msg);
        }).fail(function(jqXHR, textStatus, errorThrown){
            var objTOPass = {
                url:url,
                successCallback:successCallback,
                readyState:jqXHR.readyState,
                data:data,
                status:jqXHR.status
            };
            networlkFailureErrorHandling(objTOPass);
    });
}

Firstly we make an network call with following method:

 var data = {username:test,password:test};
onNetworkCall("www.oodles.com/demo",data,function(msg){
    console.log(msg);
});

In the above example we make an call to url "www.oodles.com/demo" and pass data into it also a success call back function into it. Now network call goes through following steps.

  • Stores url,data,successcallback function into networkCallObj object.
  • Make an ajax call to the url and wait for 30 seconds as timeout is set to 30 seconds.
  • If Response comes then it will make an call to successcallback function and pass data into it.
  • else if response unable to come then it will go in failure section and there it make and object with url, successCallback, jqXHR.readyState, data, jqXHR.status.
  • Make an call to networlkFailureErrorHandling(objTOPass) and pass the object as reference to it. Below is the function defination for networlkFailureErrorHandling
 //Handle Network Failure Case
function networlkFailureErrorHandling(objTOPass){
    $(".networkErrorDivs").hide();
    var objReturned = objTOPass;
    timeOutCounter++;
    timeOutNetworkCall = timeOutCounterArray[timeOutCounter];
    if(objReturned.readyState <= 3){
    	if(timeOutCounter <= 3){
    	    $("div#networkErrorDiv").show().text("Please Wait. Retrying in"+(timeOutNetworkCall/1000)+" seconds.").fadeOut(6000);
            setTimeout(function(){networkCallErrorHandling(objReturned.url,objReturned.successCallback,objReturned.data,timeOutNetworkCall);},timeOutNetworkCall);
    	}
    	else{
            $("#ErrorHandlingDivAjaxCall").show();
    	}
    }
    else{
	$("#ErrorHandlingDivAjaxCall").show();
        timeOutCounter = 0;
    }
}
  • It increase the counter and if counter value <=3 then it will shows the network div at the bottom of app and there it write "Please Wait. Retrying in 10 seconds".
  • And after 10 seconds it again make an network call with same object to networkCallErrorHandling(url,successCallback,data,timeout) function. Below is the function definition of networkCallErrorHandling
 //Handle Network Failure Case Network Calls
var networkCallErrorHandling = function(url,successCallback,data,timeout){
    $(".networkErrorDivs").hide();
    $("#ErrorHandlingDivAjaxCall").hide();
    $.ajax({
        type: "POST",
        url: url,
        timeout: parseInt(timeout) ,
        data: data
        }).done(function( msg ) {
            successCallback(msg);
            timeOutCounter = 0;
        }).fail(function(jqXHR, textStatus, errorThrown){
            var objTOPass = {
                    url:url,
                    successCallback:successCallback,
                    readyState:jqXHR.readyState,
                    data:data,
                    status:jqXHR.status
            };
        networlkFailureErrorHandling(objTOPass);
    });
};
  • If success comes then it will make successcallback function else again go to error section and this process continue.
  • This will try network call three times and if unable to get response then it will shows ErrorHandlingDivAjaxCall div which containing text "Network Error. Tap Here To Retry".
  • Now we have to write an tap event to ErrorHandlingDivAjaxCall div.

Below is the Function that call on tapping ErrorHandlingDivAjaxCall div.

 $(document).ready(function(){
    //Retry Div Event on Network Handler 
    $("div#ErrorHandlingDivAjaxCall").on("click",function(){
        console.log(networkCallObj);
        onNetworkCall(networkCallObj.url,networkCallObj.data,networkCallObj.callbackFunction);
    });
});

Now, On tap to this div it will again make an Network call to the url by taking parameters from networkCallObj object.

 

Thanks

 

Related Tags
mobile application
Kotlin
android
Flutter
ios
css
swift
React Native
cordova
titanium

About Author

Author Image
Akhil Dhiman

Akhil is an iPhone and Android application developer with experience in PhoneGap and Swift(Native iOS). Akhil has good experience working with JavaScript, jQuery and Underscore as well.

Request for Proposal

Name is required

Comment is required

Sending message..