title: React app 'crashes' due to fetch/axios inability to correctly pass error to catch block
body: <p>I have a small React app that fetches some resources with <code>axios</code> through <code>UseEffect()</code> hook. The app itself works fine in debug. However, when I try to test out the build version of my app, it 'crashes', that is, it doesn't render anything aside from setting body background color.</p>
  <p>When in debug mode, the app shows 0 errors or warnings, and the only leads the build has is <code>TypeError</code>'s for built-in type-specific methods like <code>.map()</code>, <code>.filter()</code> and <code>.toLowerCase()</code> all which, conveniently, are present in components that fetch data with <code>axios</code>. After some testing I came to conclusion that the cause of the 'crash' was <code>axios</code> (and <code>fetch()</code>) that, for a reason unknown to me, doesn't pass the error upon unsuccessful fetch to the <code>.catch()</code> block and tries instead to execute <code>.then()</code> with undefined <code>data</code>, which, in turn, don't have methods like <code>.map()</code> or <code>.toLowerCase()</code>, cause <code>TypeError</code>'s and 'crash' the whole app.</p>
  <p>I tried to rewrite all <code>axios</code> containing components with <code>fetch()</code>, but the result is the same. The closest thing I have found on my own was <a href="https://stackoverflow.com/questions/55464417/when-using-fetch-axios-etc-catch-doesnt-handle-the-error-instead-your-app">this answer</a> for React Native (and not plain React) that advises to change <code>console.error()</code> (which crashes the app) to <code>console.log()</code>, but it's hardly applicable in my case since I don't use <code>console.error()</code> at all.</p>
  <p>Below you can find a sample component that fetches data with <code>axios</code>:</p>
  <pre><code>import axios from 'axios';
  import { useState, useEffect } from 'react';
  
  const Salute = () =&gt; {
    const [user, setUser] = useState('john doe');
  
    useEffect(() =&gt; {
      axios
        .get('/api/user?id=1')
        .then(({ data: { fullName } }) =&gt; setUser(fullName.toLowerCase()))
        .catch((err) =&gt; console.log(err));
    }, []);
  
    return (
      &lt;div className='salute'&gt;
        &lt;h1&gt;
          hi, it's &lt;span id='username'&gt;{user}&lt;/span&gt;
        &lt;/h1&gt;
      &lt;/div&gt;
    );
  };
  
  export default Salute;
  
  </code></pre>