CODEWITHSUNDEEP
javascripterror-handlingcorsfetch-api
nyg
nyg

Reputation: 2542

Catching "Failed to load resource" when using the Fetch API

I'm trying to catch a bunch of errors related to the same origin policy when using the Fetch API but without any success:

window.onerror = (message, file, line, col, error) => console.log(error)
window.addEventListener('error', (error) => console.log(error))

try {
    fetch('https://www.bitstamp.net/api/ticker/').catch(e => {
        console.log('Caugth error:')
        console.log(e)
        console.log(JSON.stringify(e))
    })
}
catch (e) {
    console.log('try-catch')
    console.log(e)
}

The errors I want to catch only appear in the web console:

error messages

See code example here: https://github.com/nyg/fetch-error-test

How can I catch these errors to provide an on-screen message?

EDIT: The fetch's catch block is actually executed.

fetch('https://www.bitstamp.net/api/ticker/')
    .then(response => response.text())
    .then(pre)
    .catch(e => {
        pre(`Caugth error: ${e.message}`)
    })

function pre(text) {
    var pre = document.createElement('pre')
    document.body.insertAdjacentElement('afterbegin', pre)
    pre.insertAdjacentText('beforeend', text)
}
pre {
    border: 1px solid black;
    margin: 20px;
    padding: 20px;
}

Upvotes: 5

Views: 13940

Answers (1)

Schrodinger's cat
Schrodinger's cat

Reputation: 1102

As far as I remember, you can not catch browser driven exceptions in your typical try->catch or a catch chain inside of fetch.

CORS exceptions are thrown with intent, to have the user browsing the site, know of such abnormalities if you may call them that, and to protect any leak of possible secure information on the called api/server

Read here Of a previous SO discussion on whether you could catch these errors with an exception handler

If the request throws an error that can be part of the response , like a status error and such, then you may catch it and show a custom message

Upvotes: 3

Related Questions