javascript - Catching "Failed to load resource" when using the Fetch API - Stack Overflow

admin管理员组

文章数量:1332619

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('/').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:

See code example here:

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

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

fetch('/')
    .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;
}

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/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:

See code example here: https://github./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/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;
}

• javascript
• error-handling
• cors
• fetch-api

Share Improve this question Follow edited Aug 6, 2017 at 12:04 nyg asked Aug 4, 2017 at 17:11 nygnyg 2,55233 gold badges2929 silver badges4444 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

本文标签： javascriptCatching quotFailed to load resourcequot when using the Fetch APIStack Overflow