title: Using ajaxError global handler to display HTTP status code 401 details
body: <p>I'm trying to add a global error handler, and first test was with a call where I purposefully caused error code 401 due to no <code>Access-Control-Allow-Origin</code> header.</p>
  
  <p>I've used Chrome to show the error and verify that it is thrown but I can't figure out how to use the handler to display that message.</p>
  
  <p>The <code>jqxhr.status</code> is <code>0</code> and <code>jqxhr.statusText</code> is <code>"error"</code> and the <code>thrownError</code> is an empty string.</p>
  
  <p>Using Chrome, I couldn't find the code and message in any of the function variables. Is there a way to show the code and message seen in Chrome debug mode?</p>
  
  <pre><code>$(document).ajaxError(function (event, jqxhr, settings, thrownError) {
      alert("Global Error Catch. Error of " + thrownError + " at url = " + settings.url + " event type of " + settings.type
          + " with event data of " + event.data + " and event type of " + event.type + " and event target of " + event.target
          + " and the jqXHR.status is " + jqxhr.status + " and jqXHR.statusText is " + jqxhr.statusText
          + " and the jqXHR.responseText  is " + jqxhr.responseText + " and jqXHR.responseXML  is " + jqxhr.responseXML);
  });
  </code></pre>
  
  <p>Looking at the code again I noticed that the button click event uses <code>jQuery.when()</code> to find some input variable values before finally making the ajax call that triggers the 401. Could that be why <code>ajaxError</code> is not showing the error in <code>thrownError</code>?</p>
  
  <p><strong>Update</strong>
  After further testing this is not related to the <code>jQuery.when()</code>. But could this be related to the fact I'm making a cross domain ajax request? </p>
  
  <p>Fiddler can at least see a <code>401 unauthorized</code> response and when using Chrome debug mode I can see both the <code>401 unauthorized</code> and the <code>Access-Control-Allow-Origin</code> error message. But is that only sent back to the calling code if I do it myself in the web api? I assumed since it was visible in both Fiddler and Chrome it should be somewhere visible to the global <code>ajaxError</code> handler. </p>
  
  <p><strong>Update2</strong>
  After more testing this does be related to the nature of a CORS request and not how I've used the global error catching. I might need to create a separate question on that specific topic.</p>
  
  <p>I have also tried the code below and <code>jqXHR.status</code> returns 0 and <code>textStatus = "error"</code> and <code>errorThrown=""</code>. I think this is similar to the question posted <a href="https://stackoverflow.com/questions/22844307/ajax-status-code-returns-0-when-fiddler-detects-401?rq=1">here on status code 0 for a 401 in fiddler</a> but I don't see a solution posted. I will searching for posts similar to that and if I find one I will include it as an answer. </p>
  
  <pre><code>$.ajaxSetup({
      error: function (jqXHR, textStatus, errorThrown) {
          if (jqXHR.status == 401) {
              alert("Error 401 : " + textStatus + ": " + errorThrown);
          } else {
              alert("Error: " + textStatus + ": " + errorThrown);
          }
      }
  });
  </code></pre>