If a fetch call fails in Chrome, then the only error details that I get back is

TypeError: Failed to fetch

How do I display an informative error message to the end user in this case?

Specifically:

Is it possible to get any details about why fetch failed?

For example, if the server crashed, Chrome DevTools might log a console message of net:ERR_EMPTY_RESPONSE, but there appears to be no way to access this from JavaScript.

As far as I can tell, the answer is no; I assume this is for security reasons, to avoid letting malicious JS find out which sites are and aren't accessible by inspecting error messages.

Is it possible to distinguish fetch errors from other TypeErrors?

If I can't get error details, I'd like to at least replace the horribly vague "Failed to fetch" with an informative "Failed to access the web site; please try again later" message, and I'd like to do this without any risk of displaying that message for other TypeErrors.

The only solution I've found here is to check the actual message to see if it's "Failed to fetch". This is obviously browser-specific; it works in Chrome, it seems like it will work in any user language of Chrome, and other browsers would need their own testing and handling.

If a fetch call fails in Chrome, then the only error details that I get back is

TypeError: Failed to fetch

How do I display an informative error message to the end user in this case?

Specifically:

Is it possible to get any details about why fetch failed?

For example, if the server crashed, Chrome DevTools might log a console message of net:ERR_EMPTY_RESPONSE, but there appears to be no way to access this from JavaScript.

As far as I can tell, the answer is no; I assume this is for security reasons, to avoid letting malicious JS find out which sites are and aren't accessible by inspecting error messages.

Is it possible to distinguish fetch errors from other TypeErrors?

If I can't get error details, I'd like to at least replace the horribly vague "Failed to fetch" with an informative "Failed to access the web site; please try again later" message, and I'd like to do this without any risk of displaying that message for other TypeErrors.

The only solution I've found here is to check the actual message to see if it's "Failed to fetch". This is obviously browser-specific; it works in Chrome, it seems like it will work in any user language of Chrome, and other browsers would need their own testing and handling.

• javascript
• google-chrome
• exception
• fetch-api

Share Improve this question Follow edited Sep 8, 2016 at 15:17 Bergi 666k161161 gold badges1k1k silver badges1.5k1.5k bronze badges asked Sep 8, 2016 at 14:42 Josh KelleyJosh Kelley 58.5k2222 gold badges163163 silver badges256256 bronze badges 5

• 8 TypeError seems like...really the wrong error type. Strange. – T.J. Crowder Commented Sep 8, 2016 at 14:47
• .catch doesn't work for you? – Jaromanda X Commented Sep 8, 2016 at 14:52
• @JaromandaX - .catch works, but I'd like to get error details if possible (my first question), and to avoid incorrectly catching other TypeErrors as fetch errors, I feel like I either have to put the .catch very close to fetch (so no other errors can occur, thus losing flexibility in how I structure my promises) or rely on browser-specific behavior like the text of the fetch message (my second question). – Josh Kelley Commented Sep 8, 2016 at 15:06
• I meant does handling the error in .catch stop the output to console (I take it that's where this error is showing) – Jaromanda X Commented Sep 8, 2016 at 15:09
• The TypeError: Failed to fetch message is all you get in the .catch so you'll have to do some fancy footwork to change that to a meaningful message - the .catch can be at the end of the chain, doesn't matter – Jaromanda X Commented Sep 8, 2016 at 15:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

It seems likely that there aren't any more details for networking/permission/input problems.

Is it possible to distinguish fetch errors from other TypeErrors?

Yes, you just need to catch only the the errors from the fetch call:

fetch(…)
.catch(err => new FetchError(err))
.…

class FetchError extends Error {
    constructor(orig) {
        super();
        this.message = "fetch error";
        this.details = orig;
    }
}