REST Countries API w/ Svelkit, Ts, Tailwind, Axios & SSR prefetching

Community feedback

• 

  Radh Akhmad•60

  @fadhilradhPosted over 2 years ago

  Hi Antoinec,

  Your project is good and works as expected.

  Regarding your question about : But i could not find the way to catch the API call errors on the client side.

  I read your code, in the requests.config.ts, you need to pass error as catch parameter, then pass the error again in your throw.

  So, insted of writing this in your code :

   catch (_) {
      throw new Error("Sorry! We could not access the API.");
    }
  

  You should write like so :

   catch (error) {
      throw new Error(`Sorry! We could not access the API because ${error}`);
    }
  

  Hope it helps and good luck!

  1

  ---

  

  Antoine C•1,210

  @mattari97Posted over 2 years ago

  @fadhilradh Hey thank you for your answer.

  I might have use poor phrasing in my comment.

  What i meant is that the Sveltekit shadow endpoints does catch the error i throw whose content is not the important part for me. But I was having troubles understanding where to format and display the error correctly.

  But searching again on the docs i found the answer. There is a layout type page __error.svelte that you shall create and display whatever the error is there

  Here is the link for whoever find it usefull:

  Sveltkit Error Page Layout

  now i can catch the thrown error on the page and display it as i want like so:

  in the script type ="module" tag:

    import type { Load } from "@sveltejs/kit";
    export const load: Load = async ({ error }) => {
      return {
        props: {
          error: error?.message,
        },
      };
    };
  

  In the normal script tag:

  export let error: string;
  

  In the html:

  <div>
  // Show the error here as i like
  </div>
  

  Full code here

  Thank you for the time you took to help me it is really appreciated.

  Happy coding 👍

  1