title: catch ajax request errors and replace with custom message
body: <p><strong>UPDATE</strong>: run this and take a look at you developer console! You will see error 429 and custom error handled message!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>setInterval(() =&gt; {
    $.ajax({
      "async": true,
      "crossDomain": true,
      "url": `https://us1.locationiq.com/v1/search?key=pk.55397e7aa188d68fc571ccc54f9eea44&amp;q=empire state&amp;format=json&amp;limit=50`,
      "method": "GET"
    }).done(function(response) {
      console.log(response);
    }).fail(function(xhr, status, error) {
      //i want to display only this
      console.log('fail')
    });
  }, 500)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have an ajax call, what i am doing is submitting a GET request to a remote url and it works fine. What im trying to achieve is if i get back an error I want to log <code>fail</code> instead of logging the actual error message received from the response in the console. How can I achieve this? Thanks in advance.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var settings = {
    "async": true,
    "crossDomain": true,
    "url": `urlPath`,
    "method": "GET"
  }
  
  
  $.ajax(settings).done(function(response) {
    console.log(response);
  });
  $.ajax(settings).fail(function(xhr, status, error) {
    //i want to display only this
    console.log('fail')
  });</code></pre>
  </div>
  </div>
  </p>