javascriptfetchserver-error

How can i catch a server error with async await in javascript?


So i have a function that fetches data from my API. I set a limit to the requests and when the limit is reached, the server returns a 500 response. When testing in local development, the error is catched and the showLimitReachedAlert function for a popup is triggered. When running the setup with docker (+ nginx) the popup function is not triggered.

How can i modify this function to catch 500 response and trigger the function?

function searchByKeyword() {
  for (let x in networks) {
    let urlParameter = x;
    let network = networks[x];

    async function SearchKeywordForNetwork() {
      let url = `${base}/articles/${urlParameter}/${startDate.value}/${endDate.value}/${searchKeyword.value}`;
      const response = await fetch(url);
      const json = await response.json();
      network.value = json;
    }

    SearchKeywordForNetwork().catch(showLimitReachedAlert);
  }
}

Solution

  • Figured out how to do this. Tested both in the Docker and local version.

    function getMostRecentNews() {
      for (let x in networks) {
        let urlParameter = x;
        let network = networks[x];
    
        async function getToday() {
          let url = `${base}/articles/${urlParameter}`;
    
          fetch(url)
            .then(async (response) => {
              const json = await response.json();
              network.value = json;
    
              // check for error response
              if (!response.ok) {
                // const error = (json && json.message) || json.statusText;
                return Promise.reject(error);
              }
            })
            .catch((error) => {
              showLimitReachedAlert();
            });
        }
    
        getToday();
      }
    }