I have a team in Sydney, Australia connecting to a web application hosted in Manchester, UK.

They typically see 300-400ms latency and around 2% packet loss on the connection.

The web application is heavily async/await, with client side caching and a service worker for all the static content.

The client-side JS uses fetch to connect to a REST JSON API to get data.

Every await fetch has UI spinners and cancel tokens – we expect these Australian users to have a slower experience and spend more time watching progress bars, but everything should still work.

Instead, they’re getting intermittent (but persistent) errors with TypeError: Failed to fetch as the only information. If they try again it usually works, for a while, until it crashes with another Failed to fetch.

This appears (occasionally) with all await fetch requests, for POST and GET, for JSON API calls and FormData containing file objects. Some of these are idempotent and could potentially be automatically retried, but many are not.

The latency shouldn’t be anywhere near enough to cause this – HTTP and TCP are fault tolerant and handle resending dropped packets. fetch should handle quite high drop rates as just a slower connection. It’s as if the connection is completely lost for a few seconds, but then comes back.

What could be causing this and is there any programmatic way (i.e. in the JS code, not network changes) to tell fetch to persevere longer with poor connections?