sound/image error catching

extensions/src/doodlebot/ArrayError.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import type Extension from ".";
+    import {
+        ReactiveInvoke,
+        reactiveInvoke,
+        activeClass,
+        color,
+    } from "$common";
+    import { onDestroy } from "svelte";
+
+    export let extension: Extension;
+
+    export let close: () => void;
+
+    const invoke: ReactiveInvoke<Extension> = (functionName, ...args) =>
+        reactiveInvoke((extension = extension), functionName, args);
+
+    const container = activeClass;
+
+    onDestroy(() => {
+        console.log("Closed");
+    });
+</script>
+
+<div
+    class:container
+    style:width="50vw"
+    style:background-color={color.ui.white}
+    style:color={color.text.primary}
+>
+    <h1>Cannot load Doodlebot's sound/image server!</h1>
+    <h2>Please try reloading the page.</h2>
+</div>
+
+<style>
+    .container {
+        text-align: center;
+        padding: 30px;
+    }
+</style>

extensions/src/doodlebot/Doodlebot.ts

@@ -855,8 +855,7 @@ export default class Doodlebot {
 
             return itemNames;
         } catch (error) {
-            console.error('Error fetching or parsing HTML:', error);
-            return [];
+            throw new Error('Error fetching or parsing HTML:', error)
         }
     }
 

extensions/src/doodlebot/index.ts

@@ -168,8 +168,12 @@ export default class DoodlebotBlocks extends extension(details, "ui", "customArg
   async setDoodlebot(doodlebot: Doodlebot) {
     this.doodlebot = doodlebot;
     this.setIndicator("connected");
-    imageFiles = await doodlebot.findImageFiles();
-    soundFiles = await doodlebot.findSoundFiles();
+    try {
+      imageFiles = await doodlebot.findImageFiles();
+      soundFiles = await doodlebot.findSoundFiles();
+    } catch (e) {
+      this.openUI("ArrayError");
+    }
     console.log("SETTING");
     console.log(soundFiles);
   }