Javascript“类型错误:加载失败”调用“fetch”时出错在 iOS 上
我正在使用 Sentry 记录 JS 客户端错误,并且有很多“TypeError:加载失败”错误。它只发生在 iOS 上。我在谷歌上找不到任何东西。这是原生 Javascript 错误还是其他错误?这是什么意思?这与“TypeError:已取消”看似相关的问题是分开的。
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".
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
据我了解,
fetch
API 可能会在失败时故意返回非常有限的错误详细信息。 (否则,恶意 JS 程序可能会发出各种获取请求并查看其结果来识别存在哪些内部服务器、用户可以访问哪些服务器等。)如果您可以访问 Mac,则可以看到此信息您可以自己尝试从 Safari DevTools 控制台发出
fetch
请求。例如:由于 CORS,对
google.com
的请求失败。example.does-not-exist
的请求是无效名称。 DevTools 控制台提供了完整的详细信息,因此实际使用浏览器的开发人员可以进行故障排除,但这些详细信息不适用于 JS 代码; JS 代码在每种情况下都会收到相同的“TypeError:加载失败”消息。如果您足够幸运,能够访问浏览器控制台,则可以看到更多详细信息,但除此之外,我不知道您可以采取任何措施来追踪问题 - 它可能几乎是任何网络错误。
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 forexample.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.
自 2023 年起,“加载失败”是 fetch 未响应时的 IOS 消息。在 Windows 上,它被拼写为“无法获取”。
这些消息可以在 fetch 周围的 try/catch(error) 中检测到。这些字符串将是 error.message 的确切值
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
有同样的问题,由于证书和 iphone 将 addres api 视为危险而发生问题。
帮助我直接在 safari 或 chrome 中进入地址 api,例如:https://my-adres-api/api/product,然后选择允许与该地址连接。
现在请求效果很好
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
就我而言,这个问题主要出现在 iOS 15 的 Safari 上。通过通过 Mac 调试 iPhone,我发现预加载链接 与
imagesrcset
在 Safari 中处理不好(除非取消优先级),抛出;具有无效的 imagesrcset 值
,如在此问题中。Sentry 中看起来像提取错误的原因是预加载链接实际上 在底层使用 fetch 。
鉴于这只是图像预加载失败,除非它导致性能问题,否则您可以安全地在 Sentry 中忽略此特定问题,直到 webkit 错误 231150 - Safari 抱怨
imagesrcset
值无效,而 Chrome 没有 得到修复。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.因为这是一个 CORS 错误:/必须将主机包含在目标白名单中
For it was a CORS error :/ had to include the host in the destination allowlist