title: Handling network errors with axios and Twilio
body: <p>I have an application that uses axios for it's ajax requests. When a user experiences a network issue (for example, their wifi goes out and they no longer have an internet connection while on my application), I want to make sure that only the first axios request is made, and if I detect there is a network issue, to not attempt any more requests, but instead to retry the same request until successful.</p>
  
  <p>My application performs many requests, including a request every 2.5 seconds (in this example, <code>getData</code>). It also establishes a Twilio connection when the application initializes (it executes <code>twilio()</code> on initialization).</p>
  
  <p>When a connection is lost, the following happens:</p>
  
  <ol>
  <li><p><code>getData</code> fails, resulting in a console message of <code>this is a network error.</code></p></li>
  <li><p><code>TwilioDevice.offline</code> is executed. This results in two error messages: first a <code>this is a network error.</code> message (error message #2) when <code>TwilioDevice.offline</code> tries <code>fetchToken()</code>, and then a <code>received an error.</code> message (error message #3) after the <code>fetchToken()</code> fails.</p></li>
  </ol>
  
  <p>Given #'s 1 and 2, how can I make sure that:</p>
  
  <ul>
  <li>If I experience a network error, I only receive one error message instead of 3 saying that "there was a network error"</li>
  <li>My app detects that there is a network error, then tries to re-establish a connection, then, if successful, resumes fetching data, Twilio tokens, etc.</li>
  </ul>
  
  <p>Thanks! Code is below.</p>
  
  <p><strong>example code:</strong></p>
  
  <pre><code>const getData = async () =&gt; {
    try {
      const response = await axios.get('api/data');
      return response.data;
    } catch (error) {
      handleError(error);
    }
  };
  
  const fetchToken = async () =&gt; {
    try {
      const data = await axios.get('api/twilio-token');
      return data.token;
    } catch (error) {
      return handleError(error);
    }
  };
  
  const handleError = error =&gt; {
    if (!error.response) {
      console.log("this is a network error.");
    } else {
      console.log("received an error.");
    }
  };
  </code></pre>
  
  <p><strong>twilio.js:</strong></p>
  
  <pre><code>import { Device as TwilioDevice } from 'twilio-client';
  
  const registerEvents = () =&gt; {
    TwilioDevice.ready(() =&gt; {
      console.log('Twilio.Device is now ready for connections');
    });
    TwilioDevice.connect((conn) =&gt; {
      console.log(`Connecting call with id ${conn.parameters.CallSid}`);
      // code to start call
      conn.disconnect((connection) =&gt; {
        console.log(`Disconnecting call with id ${connection.parameters.CallSid}`);
        // code to end call
      });
    });
    TwilioDevice.error((error) =&gt; {
      console.log("Twilio Error:");
      console.log(error);
    });
    TwilioDevice.offline(async () =&gt; {
      try {
        const newTwilioToken = await fetchToken(); // error message #2
        return TwilioDevice.setup(newTwilioToken);
      } catch (error) {
        return handleError(error); // error message #3
      }
    });
  };
  
  export const twilio = async () =&gt; {
    try {
      registerEvents();
      const twilioToken = await fetchToken();
      TwilioDevice.setup(twilioToken);
    } catch (error) {
      return handleError(error);
    }
  };
  </code></pre>