title: Catching "Failed to load resource" when using the Fetch API
body: <p>I'm trying to catch a bunch of errors related to the same origin policy when using the Fetch API but without any success:</p>
  
  <pre><code>window.onerror = (message, file, line, col, error) =&gt; console.log(error)
  window.addEventListener('error', (error) =&gt; console.log(error))
  
  try {
      fetch('https://www.bitstamp.net/api/ticker/').catch(e =&gt; {
          console.log('Caugth error:')
          console.log(e)
          console.log(JSON.stringify(e))
      })
  }
  catch (e) {
      console.log('try-catch')
      console.log(e)
  }
  </code></pre>
  
  <p>The errors I want to catch only appear in the web console:</p>
  
  <p><a href="https://i.stack.imgur.com/y3cF9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y3cF9.png" alt="error messages"></a></p>
  
  <p><s>See code example here: <a href="https://github.com/nyg/fetch-error-test" rel="nofollow noreferrer">https://github.com/nyg/fetch-error-test</a></s></p>
  
  <p>How can I catch these errors to provide an on-screen message?</p>
  
  <p><strong>EDIT</strong>: The fetch's catch block is actually executed.</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>fetch('https://www.bitstamp.net/api/ticker/')
      .then(response =&gt; response.text())
      .then(pre)
      .catch(e =&gt; {
          pre(`Caugth error: ${e.message}`)
      })
  
  function pre(text) {
      var pre = document.createElement('pre')
      document.body.insertAdjacentElement('afterbegin', pre)
      pre.insertAdjacentText('beforeend', text)
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>pre {
      border: 1px solid black;
      margin: 20px;
      padding: 20px;
  }</code></pre>
  </div>
  </div>
  </p>