add error handling to images api fetch (#8)

Author: balraj-johal

README.md

@@ -19,6 +19,7 @@ You can configure a few things by editing the file `src/config/index.tsx`.
 - `DIR` - The directory to watch.
 - `MAX_IMAGES` - How many images to request. Default 10.
 - `POLL_INTERVAL` - How often should the frontend look for updates. Default 5 seconds.
+- `RETRY_INTERVAL` - How frequently should the frontend retry polling on failure.
 - `FILE_EXTENSION` - The filetypes supported. Default `png`.
 - `FILE_MIME` - The file mime type. Default `image/png`.
 - `SHOW_TITLE` - If the title should be overlaid. Default `false`.

src/config/index.ts

@@ -1,6 +1,7 @@
 export const DIR = `D:\\stable-diffusion-webui\\outputs\\txt2img-images`;
 export const MAX_IMAGES = 10;
 export const POLL_INTERVAL = 5 * 1000;
+export const RETRY_INTERVAL = 10 * 1000;
 export const FILE_EXTENSION = "png";
 export const FILE_MIME = "image/png";
 export const SHOW_TITLE = false;

src/hooks/useImages.ts

@@ -1,15 +1,22 @@
 import { useCallback, useState, useEffect } from "react";
 
-import { POLL_INTERVAL } from "@/config";
+import { POLL_INTERVAL, RETRY_INTERVAL } from "@/config";
 
 const useImages = () => {
   const [images, setImages] = useState<string[]>([]);
 
   const getImages = useCallback(async () => {
-    const data = await fetch("/api/images");
-    const json = await data.json();
-    setImages(json.images);
-    setTimeout(() => getImages(), POLL_INTERVAL);
+    try {
+      const data = await fetch("/api/images");
+      const json = await data.json();
+      setImages(json.images);
+      setTimeout(() => getImages(), POLL_INTERVAL);
+    } catch (error) {
+      console.error(error);
+      setTimeout(() => {
+        getImages();
+      }, RETRY_INTERVAL);
+    }
   }, []);
 
   useEffect(() => {