How to handle network failure in React-Native, when network is off

Question

How to handle network failure in React-Native, when device not connected to network.

My scenario is am trying to connect some api, while fetching request if network is disconnected react-native throws network request failed error. how to handle this scenario to give the user best user experience.

How to handle Network request failed in a better way.

Constrict

Have you found any solutions since this time? – Bisayas

Answer 1

Use NetInfo like this:

// Check for network connectivity
NetInfo.isConnected.fetch().done((isConnected) => {
    if ( isConnected )
    {
        // Run your API call
    }
    else
    {
        // Ideally load from local storage
    }
});

Coccid

NetInfo hasn't been fixed since 2016. – Laktasic

@LingboTang the world has got progressively more depressing since 2016.. NetInfo is just trying to protect you – Clipped

@ComethTheNerd isConnected will always return false on iOS and it hasn't been fixed: github.com/facebook/react-native/issues/8615 – Laktasic

Hey , I want to show message whenever net disconnected . i don't want to call it in every api . – Cryohydrate

Answer 2

Handle the exception using a catch block, from the catch block you can perform the action that handles the exception, may be a redirection or a state change to show the error

const url = `your url to be fetched`;
        fetch(url, {
          method: "GET",
          headers: header
        })
          .then(res => res.json())
          .then(json => {
            console.log(json);
             this.setState({
                data:json
              });  
    })
    .catch(error => {
      if (error) {
        //perform the redirection to the network request slow page or set state to show error
      }
    });

Synecdoche

Answer 3

This may happen because of 2 main things:

1. Wrong definition about networks request (AndroidManifest.xml or info.plist)
2. Interruption while streaming the response or very slow internet connection, or other same reasons...

Just handle this case inside catch:

try {
  const response = fetch(request)
} catch (e) {
  if (error.message === 'Network request failed') {
    // retry or any other handling like showing alert 
  } else {
    throw e; 
  }
}

Hogback

Answer 4

Use package in React i.e. npm i react-detect-offline import { Offline, Online } from 'react-detect-offline'; in your app and enclose value to be shown in Online mode under Online else Offline message like Network Disconnected <Online>Show Online values</Online> <Offline>Network Disconnected</Offline>

Maniple

Answer 5

The red screen only display in debug mode. To handle the error in case no Internet connection, can use try...catch block

     try {
        let response = await fetch(url, params);
    } catch (error) {
        
        console.error(error);
    }

Coppola

The handle is not good enough, you catch all errors and not only network request failed – Hogback