Javascript "TypeError: Load Failed" error when calling "fetch" on iOS

Question

I'm logging JS client errors using Sentry and there's a lot of "TypeError: Load failed" errors. It's only occurring on iOS. I can't find anything on Google. Is this a native Javascript error or something else? What does it mean? This is separate from a seemingly related issue with "TypeError: cancelled".

Screenshot from Sentry of the breadcrumbs

Answer 1

For it was a CORS error :/ had to include the host in the destination allowlist

Answer 2

As of 2023, "Load failed" is the IOS message for when fetch does not respond. On windows, it's spelled "Failed to fetch".

These messages can be detected in a try/catch(error) around the fetch. Those strings will be the exact values of error.message

Answer 3

In my case, this issue appeared mostly on iOS 15 in Safari. By debugging an iPhone through Mac I found that preload links with imagesrcset are not handled well in Safari (unless de-prioritized), throwing <link rel=preload> has an invalid imagesrcset value, as described in this question.

The reason why it looks like fetch error in Sentry is that preload link actually uses fetch under the hood.

Given it's just the image preload that is failing, and unless it's causing you performance problems, you can safely ignore this particular issue in Sentry until this webkit Bug 231150 - Safari complains about invalid imagesrcset value in where Chrome doesn't gets fixed.

Answer 4

Had the same problem, problems occured because of certificate and iphone took addres api as dangerous.

Helped me get into address api directly in safari or chrome for instance: https://my-adres-api/api/product and then choosing allow to connect with that address.

Now requests works excellent

Answer 5

From what I understand, the fetch API may deliberately return very limited error details on failure. (Otherwise, a malicious JS program could issue a variety of fetch requests and look at their results to identify which internal servers exist, which servers the user has access to, etc.)

If you have access to a Mac, you can see this for yourself by experimenting with fetch requests from the Safari DevTools console. For example:

The request for google.com fails due to CORS. The request for example.does-not-exist is an invalid name. The DevTools console gives full details, so a developer who's actually at the browser can troubleshoot, but those details aren't available to JS code; the JS code gets the same "TypeError: Load failed" message in each case.

If you're lucky enough to have a way to access the browser console, you can see more details, but otherwise, I'm not aware of anything you can do to track down the problem - it could presumably be virtually any network error.