React Native中Fetch超时与离线错误区分及默认超时疑问

Hey there! Let's tackle your questions step by step—this is a super common pain point when working with network requests in React Native, so you're not alone here.

1. Do timeouts and offline states throw identical errors with Fetch? #

Yep, you're absolutely right to notice this. In most cases, React Native's fetch API will throw a generic TypeError: Network request failed error for both offline scenarios and request timeouts. This happens because the underlying native network stacks (NSURLSession on iOS, OkHttp on Android) don't always surface distinct error codes or messages that the JS layer can easily distinguish between out of the box. So without extra handling, these two failure modes look identical to your app.

2. Is relying on the native system to handle timeouts a valid approach? Are there default timeouts? #

Your assumption is totally valid! React Native's fetch doesn't have its own built-in timeout mechanism—so it does defer to the native platform's default network timeouts. But it's important to note these defaults vary between iOS and Android:

• iOS: The default timeout for NSURLSession (which fetch uses under the hood) is 60 seconds.
• Android: For OkHttp (the default HTTP client in modern React Native versions), the default connection timeout is 10 seconds, and the default read timeout is also 10 seconds.

If you don't set a custom timeout via a Promise wrapper, the native system will indeed take over here. That said, keep in mind these defaults might not align with your app's user experience needs—so you might still want to add a custom timeout on top if 10/60 seconds feels too long for your use case.

3. Better ways to distinguish timeouts from offline errors (beyond NetInfo) #

I get why NetInfo might not cut it—it only checks network connectivity at a specific moment, and network state can change mid-request. Here are a few more reliable approaches:

• Pre-request network check + error message parsing: Before firing a fetch call, use NetInfo to check if the device is offline. If it is, throw a clear custom error like new Error('OFFLINE'). For errors that occur mid-request, parse the error message or native error code (if accessible) to look for clues—iOS might include NSURLErrorNotConnectedToInternet for offline, or NSURLErrorTimedOut for timeouts; Android might throw ConnectException for offline or SocketTimeoutException for timeouts.
• Wrap fetch in a custom utility: Build a reusable fetch wrapper that combines network state monitoring with native error code mapping. You can use libraries like react-native-netinfo for real-time network updates, and add logic to intercept native errors and categorize them into clear types (offline, timeout, server error, etc.).
• Native module integration: If you need precise error differentiation, create a small native module that catches network errors at the native level, maps them to explicit error codes, and passes them back to the JS layer. This gives you full control over distinguishing between offline and timeout events.

内容的提问来源于stack exchange，提问作者Noitidart