title: How can I catch jQuery AJAX errors?
body: <p>When an AJAX request is submitted to a site, server-side errors are easily handled with the jQuery promise approach. <code>.done()</code>, <code>.fail()</code>, etc. However for some requests (e.g. to an invalid site or one that doesn't accept cross-origin requests), an exception occurs immediately as the call is made. Here's an example of one error in the console:</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <code>http://someotherserver/api/blahblah</code>. Origin
    <code>http://localhost:52625</code> is not allowed by Access-Control-Allow-Origin.</p>
  </blockquote>
  
  <p>Yes, I know about CORS...that's not the issue. What I'm actually doing is trying a web api call to test if the server IP/name is correct</p>
  
  <p>I'm aware of the <code>error</code> option in the jQuery request syntax:</p>
  
  <pre><code>$.ajax({
      url: remoteURL,
      type: 'GET',
      error: function (err) {
          console.log("AJAX error in request: " + JSON.stringify(err, null, 2));
      }
  }).etc.etc.
  </code></pre>
  
  <p>The error is handled here, but exceptions are still logged in the console. It seemed reasonable to wrap the above in a <code>try-catch</code> block, but that doesn't seem to help.</p>
  
  <p>I've found <a href="https://stackoverflow.com/questions/10740225/jquery-catch-ajax-exeptions">this question</a>, but the solution involves hacking the jQuery code. Surely there's a better way to catch these errors and not clog up the console logs??</p>