How to handle the expected error in AJAX (including disclosing them to the user)

Question

The expected error is one of the servers that I expected or even raised myself in the code. For example, when a user tries to perform an action for which he does not have sufficient privileges, I would raise a PermissionError (user-defined Exception ) error message.

I was looking for a good way to handle the expected error for an AJAX situation. The only requirement is to be able to display an error message to the user, since I want my users to be aware of what is happening.

My current approach is to pack the error message into a JSON object and send it back to the client end

 var ajaxResponse = $.ajax({ .... }); ajaxResponse.done(function(jsonObj) { if (jsonObj.success) { /* no error, do something */ } else { /* expected error returned, display jsonObj.error to user */ } }); ajaxResponse.fail(function(jqXHR, textStatus, errorThrown) { /* unexpected error returned */ }); 

I have a different approach that I'm not sure about. Basically, instead of packing the expected error message in a JSON object, in my django code I would return HttpResponse(content="no sufficient privilege", status=403) . JQuery at the client end will be modified as follows:

 ajaxResponse.done(function(response_data) { /* no error, do something */ }); ajaxResponse.fail(function(jqXHR, textStatus, errorThrown) { /* both expected and unexpected error would end up here. * It an expected error when error code is 403 and * jqXHR.responseText would give me the error message to * display to the user. */ }); 

I like how the second approach groups all errors, expected or unexpected, in one place. But then I feel that the http status code should not be used that way. In any case, I want to know which one is the right way. If none of them, please share what you would do.

Answer 1

You have such a global configuration -

 $.ajaxSetup({ error: function(xhr){ /* Do something with xhr.responseText */ window.status='Your error message goes here'; } }); 

Answer 2

The jqXHR object contains all the information about the failed response. First let me simplify the way the request is executed:

  $.ajax({ url: '/the/posting/url', type: 'POST', data: { param: value, param_two: value_two}, success: function(){ alert('Everything went as is supposed to be.'); }, error: function(jqXHR, t, e){ console.log(jqXHR.responseText); } }) 

So, in this way you control what you want if the request is good or not. Then you see that I wrote something like:

 console.log(jqXHR.responseText); 

This is because this property gives you detailed error information (depending on how you place the trace when something goes wrong). You can read it in the Firebug console (Firefox) or the developer tools (Chrome and Safari).

There is no need to serialize the object in json to find out that something went wrong, because django (I suppose) is sending the error as is and the error. Therefore, when jquery knows that something was just wrong, it causes an error property for the ajax object and that it is, and you can read in the console.

Answer 3

Personally, I always use the one approach, especially since there are more errors than HTTP error codes. There may also be times when your js code cannot distinguish between expected and unexpected errors if you use the second approach.