Error handling in AJAX
- Digital Engineering
Error handling in AJAX
Some times when we request to server we didn’t get proper response (HTTP Status 200) as per our expectation. For ex. we can get
1) Internal Server Error
2) Network Connection Error
3) Page Not Found Error,
4) Access Denied Error.
So if we are making call to server via http post request/simple http request directly then user will see these error in browser. But when we use AJAX service calls and if we don’t properly handle the inevitable errors (like mentioned above) then our code fails and it didn’t display anything and user get stucked. AJAX service calls are especially problematic. So to show proper error message to user we need to use proper error handling.
Even when a client-side error is thrown, most users won’t notice it and the ones who do notice won’t know what the error means or what to do next. In fact, many developers don’t notice client-side scripting errors that occur while they’re debugging their own applications!
For example : After logined in the system user open site link in new tab. Now user has opened two tab and if user logout from first tab and switch to second tab then in second tab whenever user will not refresh that page he will not be logged out. And without refresh the page if user fire an event that is AJAX based and if we didn’t used proper error handling user will get stucked because he will not get proper message, but we must show him a proper message that “Sorry!! Your session has expired. Please login again.” . Same may happen when session expired automatically after not using the system for few minutes.
So to come over this problem we will use AJAX error function.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$.post(url, data, function (response) { } ).error(function (jqXHR, textStatus, errorThrown) { alert(formatErrorMessage(jqXHR, errorThrown)); } ); |
So when ever we didn’t get “HTTP Status 200 OK” from server and get any error this response will automatically will go to error function.
1) jqXHR : This variable will contain status code and we can access by “jqXHR.status”.
2) textStatus : Response in text like Success.
3) errorThrown : Some time error may be related to parse error, timeout error so these error message will come under this variable.
|
1 |
alert(formatErrorMessage(jqXHR, errorThrown)); |
1) alert : Simple. using to show error message
2) formatErrorMessage : We are using this function to parse this variable and get exact error and to show a proper message to user.
Its defined below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function formatErrorMessage(jqXHR, exception) { if (jqXHR.status === 0) { return ('Not connected.\nPlease verify your network connection.'); } else if (jqXHR.status == 404) { return ('The requested page not found.'); } else if (jqXHR.status == 401) { return ('Sorry!! You session has expired. Please login to continue access.'); } else if (jqXHR.status == 500) { return ('Internal Server Error.'); } else if (exception === 'parsererror') { return ('Requested JSON parse failed.'); } else if (exception === 'timeout') { return ('Time out error.'); } else if (exception === 'abort') { return ('Ajax request aborted.'); } else { return ('Unknown error occured. Please try again.'); } } |
Now how to handle errors in jquery load function.
|
1 2 3 4 5 6 7 8 9 10 11 |
$(href).load(url , function(result , textStatus, jqXHR){ if(jqXHR.status == 200) { // Type for code to parse result } else { alert(formatErrorMessage(jqXHR, 'nothing')); } }); |
Now in “HTTP Status 401 Not Authorized condition” if you want to redirect user to login page.
use
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$.post(url, data, function (response) { } ).error(function (jqXHR, textStatus, errorThrown) { bootbox.alert(formatErrorMessage(jqXHR, errorThrown), function() { getout(jqXHR); }); } ); function getout(jqXHR) { if (jqXHR.status == 401) { window.location.href = websiteUrl+'/login'; } } |
Note : bootbox.alert is a “bootboxjs” function to show alert message with proper bootstarp design popup.
http://bootboxjs.com/
You can also update error message in “formatErrorMessage” function as per your requirement and can add more exception and status code.
1) 400 : “Server understood the request, but request content was invalid.”
2) 403 : “Forbidden resource can’t be accessed.”
3) 503 : “Service unavailable.”
Also if you want to set your own “HTTP Status Code” according to your condition at server side you can use “header” function.
Ex : header(“HTTP/1.1 401 Unauthorized”);
Thanks for reading.