Advice Generator App

Community feedback

• 

  Jay Khatri•4,230

  @khatri2002

  Posted 5 months ago

  Hi @Abaljerind!

  The developed solution looks good!

  I would just suggest you to use a try-catch block in the handleGetQuote function, where the API is being called.

  async function handleGetQuote() {
    try {
      const res = await fetch("https://api.adviceslip.com/advice");
  
      // Check if the response is successful
      if (!res.ok) {
        throw new Error(`HTTP error! Status: ${res.status}`);
      }
  
      const data = await res.json();
      setQuote(data.slip.advice);
      setQuoteId(data.slip.id);
    } catch (error) {
      console.error("An error occurred while fetching the quote:", error);  //Can be removed in production environment
      alert("Sorry, we couldn't fetch a quote at this time. Please try again later.");
    }
  }
  

  Why is error handling important in API calls?

  1. Uncertain Server Responses: APIs can behave unpredictably. The server might be down, rate limits could be exceeded, or there could be unexpected errors on the server side. Handling errors ensures your app can gracefully deal with such situations.

  2. User Experience: Without error handling, your app might crash or display incomplete information, leaving users confused. A clear error message (like "Sorry, we couldn't fetch a quote") keeps the user informed.

  3. Network Issues: Network failures or connectivity issues can occur, especially in mobile environments. The catch block can handle these gracefully.

  4. Standard Practices: It's a best practice to handle errors where the API call is made. Centralizing error handling here ensures you're addressing failures close to their origin and maintaining cleaner and more maintainable code.

  5. Future-proofing: If the API changes its response structure, adds authentication, or modifies its behavior, proper error handling can prevent breaking your application. For instance, checking res.ok ensures that you're not blindly processing an error response as if it were successful.

  By wrapping your API calls in a try-catch block, you make your application more robust, user-friendly, and aligned with best development practices.

  The rest of the solution looks amazing! Keep up the great work! 🚀

  01

  Marked as helpful