Better error handling and visual clue on errors

src/App.vue

@@ -10,6 +10,7 @@ import { fetchPosts } from '@/sources'
 import Card from './components/Card.vue';
 import ConfigModal from './components/ConfigModal.vue';
 import InfoBar from './components/InfoBar.vue';
+import { arrayUnique } from './utils';
 
 const config = ref<Config>();
 
@@ -18,6 +19,9 @@ const pinned = ref<Array<string>>([])
 const hidden = ref<Array<string>>([])
 const updateInProgress = ref(false)
 
+const statusText = ref<string | undefined>("Initializing ...")
+const statusIsError = ref(false)
+
 var updateIntervalHandle: number;
 var lastUpdate = 0;
 
@@ -127,10 +131,19 @@ async function updateWall() {
   updateInProgress.value = true
 
   try {
-    allPosts.value = await fetchPosts(cfg)
+    allPosts.value = await fetchPosts(cfg, progress => {
+      if (progress.errors.length) {
+        setStatus(progress.errors.slice(-1)[0].message, true)
+      } else if (progress.finished < progress.total) {
+        setStatus(`Updating [${progress.finished}/${progress.total}] ...`)
+      } else {
+        setStatus(false)
+      }
+    })
+
     console.debug("Update completed")
   } catch (e) {
-    console.warn("Update failed", e)
+    setStatus(`Update failed: ${e}`)
   } finally {
     lastUpdate = Date.now()
     updateInProgress.value = false;
@@ -138,6 +151,17 @@ async function updateWall() {
 
 }
 
+
+function setStatus(text: string | false, isError?: boolean) {
+  if (text === false) {
+    statusText.value = undefined
+    statusIsError.value = false
+  } else {
+    statusText.value = text
+    statusIsError.value = isError === true
+  }
+}
+
 /**
  * Filter and order posts based on real-time criteria (e.g. pinned or hidden posts).
  * Most of filtering already happened earlier.
@@ -186,6 +210,7 @@ const hideAuthor = (profile: string) => {
 
 const hideDomain = (profile: string) => {
   var domain = profile.split("@").pop()
+  if (domain)
     toggle(hidden.value, "@" + domain)
 }
 
@@ -204,8 +229,7 @@ const privacyLink = computed(() => {
 
 <template>
   <div id="page">
-    <icon v-show="updateInProgress" icon="spinner" spin
-      class="position-fixed bottom-0 start-0 m-1 opacity-25 text-muted" />
+
     <header v-if="config?.showInfobar" class="secret-hover" style="cursor: context-menu" data-bs-toggle="modal"
       data-bs-target="#configModal" title="Click to edit wall settings">
       <span class="text-muted float-end secret">
@@ -214,11 +238,16 @@ const privacyLink = computed(() => {
       <InfoBar :config="config" />
     </header>
 
+    <aside id="status-row" class="position-absolute opacity-25">
+      <Transition>
+        <icon v-if="statusIsError" icon="triangle-exclamation" class="mx-1" :title="statusText" />
+        <icon v-else-if="updateInProgress" icon="spinner" spin class="mx-1" />
+      </Transition>
+    </aside>
+
     <main>
-      <div v-if="config === undefined">Initializing ...</div>
-      <div v-else-if="filteredPosts.length === 0 && updateInProgress">Loading first posts ...</div>
-      <div v-else-if="filteredPosts.length === 0">Nothing there yet ...</div>
-      <div v-else v-masonry transition-duration="1s" item-selector=".wall-item" percent-position="true" id="wall">
+      <div v-if="config && filteredPosts.length > 0" v-masonry transition-duration="1s" item-selector=".wall-item"
+        percent-position="true" id="wall">
         <Card v-masonry-tile class="wall-item secret-hover" v-for="post in filteredPosts" :key="post.id" :post="post"
           :config="config">
 
@@ -247,6 +276,9 @@ const privacyLink = computed(() => {
     <ConfigModal v-if="config" v-model="config" id="configModal" />
 
     <footer>
+      <aside class="opacity-50 text-center">
+        Status: {{ statusText || "OK" }}
+      </aside>
       <button class="btn btn-link text-muted" @click="toggleTheme(); false">[{{ actualTheme == "dark" ? "Light" : "Dark"
         }} mode]</button>
       <button class="btn btn-link text-muted" data-bs-toggle="modal" data-bs-target="#configModal">[Customize]</button>
@@ -363,4 +395,14 @@ body {
     width: 100%;
   }
 }
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
 </style>

src/main.ts

@@ -27,8 +27,8 @@ import VueDOMPurifyHTML from 'vue-dompurify-html';
 // Register fontawesome icons
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faGear, faSpinner } from '@fortawesome/free-solid-svg-icons'
-library.add(faGear, faSpinner)
+import { faGear, faSpinner, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'
+library.add(faGear, faSpinner, faTriangleExclamation)
 
 import App from '@/App.vue'
 const app = createApp(App)

src/sources.ts

@@ -5,14 +5,24 @@ import type { faTags } from "@fortawesome/free-solid-svg-icons";
 import DOMPurify from 'dompurify'
 
 /**
- * Fetch unique posts from all sources (curently only Mastodon is implemented)
+ * Fetch unique posts from all sources (currently only Mastodon is implemented)
  */
-export async function fetchPosts(cfg: Config): Promise<Post[]> {
+export type Progress = {
+    total: number
+    started: number
+    finished: number
+    errors: Error[]
+}
+
+export async function fetchPosts(cfg: Config, onProgress: (progress: Progress) => void): Promise<Post[]> {
+
     type Task = () => Promise<MastodonStatus[]>;
+    let progress: Progress = {total: 0, started: 0, finished: 0, errors: []}
 
     // Group tasks by domain (see below)
     const domainTasks: Record<string, Array<Task>> = {}
     const addTask = (domain: string, task: Task) => {
+        progress.total += 1;
         (domainTasks[domain] ??= []).push(task)
     }
 
@@ -93,14 +103,19 @@ export async function fetchPosts(cfg: Config): Promise<Post[]> {
         .map(([domain, tasks]) => {
             return async () => {
                 for (const task of tasks) {
+                    progress.started += 1;
                     try {
                         (await task())
                             .map(status => fixLocalAcct(domain, status))
                             .filter(status => filterStatus(cfg, status))
                             .map(status => statusToWallPost(cfg, status))
                             .forEach(addOrRepacePost)
-                    } catch (err) {
-                        console.warn(`Update task failed for domain ${domain}`, err)
+                    } catch (err: any) {
+                        let error = err instanceof Error ? err : new Error(err?.toString())
+                        progress.errors.push(error)
+                    } finally {
+                        progress.finished += 1
+                        onProgress(progress)
                     }
                 }
             }
@@ -145,7 +160,14 @@ async function fetchJson(domain: string, path: string, query?: Record<string, an
         const pairs = Object.entries(query).map(([key, value]) => [key, value.toString()])
         url += "?" + new URLSearchParams(pairs).toString()
     }
-    let rs = await fetch(url)
+
+    let rs: Response;
+    let json: any;
+
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    try {
+        rs = await fetch(url)
 
         // Auto-retry rate limit errors
         let errCount = 0
@@ -165,14 +187,18 @@ async function fetchJson(domain: string, path: string, query?: Record<string, an
             // Retry
             rs = await fetch(url)
         }
+        json = await rs.json()
+    } catch (e: any) {
+        throw new Error(`Failed to fetch ${url} (${e.message || e})`);
+    }
 
-    const json = await rs.json()
-    if (json.error) {
-        console.warn(`Fetch error: ${rs.status} ${JSON.stringify(json)}`)
-        const err = new Error(json.error);
+    if (!rs.ok || json.error) {
+        const err = new Error(`Failed to fetch ${url} (${rs.status}: ${json.error || "Unknown reason"})`);
         (err as any).status = rs.status;
+        (err as any).body = json;
         throw err;
     }
+
     return json
 }
 
@@ -218,7 +244,7 @@ const filterStatus = (cfg: Config, status: MastodonStatus) => {
 }
 
 /**
- * Convert a mastdon status object to a Post.
+ * Convert a mastodon status object to a Post.
  */
 const statusToWallPost = (cfg: Config, status: MastodonStatus): Post => {
     const date = new Date(status.created_at)