title: How to catch HTTP response error and then pass to the caller
body: <p>I have an API to update data to the database.</p>
  <p>I am using Fetch API to send data to the server API for storing data in the database.</p>
  <p>In case the webserver cannot update data to the database, it returns a 500 error code and an error message.</p>
  <p>And the response JSON as the following:</p>
  <p><code>{&quot;status&quot;:&quot;error&quot;,&quot;message&quot;:&quot;Some wrong when update roster data.&quot;}</code></p>
  <p>My problem is that I cannot forward the message to the fetch API caller.</p>
  <p>It is my fetch API source code:</p>
  <pre><code>static async fetchAPI(url,method,getParams,postParams){
    if (getParams){
        const paramsObject = new URLSearchParams(getParams);
        const queryString = paramsObject.toString();  
        url+=&quot;?&quot;+queryString;
    }
    url=&quot;/rosterWeb&quot;+url;
    console.log(&quot;=======================&quot;);
    console.log(&quot;url=&quot;+url);
    console.log(&quot;method=&quot;+method);
    console.log(&quot;getParams=&quot;+getParams);
    console.log(&quot;postParams=&quot;+postParams);
    console.log(&quot;=======================&quot;);
    return fetch(url,
                  {
                      body: JSON.stringify(postParams),
                      headers:{
                          'Content-Type': 'application/json' 
                      },
                      &quot;method&quot;:method || 'GET',
                  })
            .then(response =&gt;{
              if (response.ok){
                return response.json();                
              } else {
                if (response.status===500){
                  response.json()
                  .then(json=&gt;{
                    throw new Error(json.message);
                  })
                }
              }  
            })
            .catch(error =&gt;{
              console.error('Error:', error);
            });              
                  
  </code></pre>
  <p>}</p>
  <p>This is my middleware code snippet:</p>
  <pre><code>import Utility from './Utility';
  export default class Roster{
    ..............
    .......
    constructor(){
      this.saveToDB=async(data)=&gt;{
          return await Utility.fetchAPI(*saveDataURL*,POST',null,rosterData);
      }
    }
  }
  </code></pre>
  <p>This is my UI component code snippet:</p>
  <pre><code>export default function ButtonPanel(){
   ..............................
   
   async function saveDataToDB(){
      
      let roster=new Roster();
  
      await roster.saveRosterToDB({
         ........................
         ...........................
      })
      .then(result=&gt;{
          console.log(&quot;Update Success&quot;)
      })
      .catch(error=&gt;{
          console.log(&quot;ButtonPanel Exception Caught&quot;);
          console.log(error);
      })
      /*
      try{
          let result=await roster.saveRosterToDB({
              month:rosterMonth.getMonth()+1,
              preferredShiftList:rosterData.preferredShiftList,
              rosterList:rosterData.rosterList,
              year:rosterMonth.getFullYear(),
          })
          console.log(result);
      }catch(error){
          console.log(&quot;Exception caught.&quot;);
          console.log(error.message);
      };
      */
      roster=null;
    }
  }
  </code></pre>
  <p>When I execute the Roster.saveRosterToDB method, both try-catch and then-catch structure, it also returns the following error:</p>
  <pre><code>`Unhandled Rejection (Error): Some wrong when update roster data.
  (anonymous function)
  c:/Users/knvb/workspace/rosterWeb_react_node/src/utils/Utility.js:91`
  </code></pre>
  <p>Where &quot;Some wrong when update roster data&quot; is come from response JSON.</p>
  <p>And the ButtonPanel.saveDataToDB print the statement &quot;Update success&quot; to the console.</p>
  <p>I tried to forward the message from the server to ButtonPanel via an exception.</p>
  <p>However, the exception/error does not be triggered, how can I fix it?</p>