fix: surface streamed load failures inline

The streamed loaders on bookmarks, collections, library, search, and the
collection detail page swallowed only ApiError into their in-band `error`
field and re-threw anything else. A raw network failure (a non-ApiError
TypeError from fetch) therefore escaped the `{#await}` to SvelteKit's
generic error page. On the collection detail page a content-load failure
showed a misleading "this collection is empty", and on search a failed
results query showed a false "no matches" because the streamed `error`
was never rendered.

Fold non-ApiError failures into the same in-band `error` so every
transient blip renders as an inline message, add a `contentError` branch
to the collection detail grid, and render the search results `error` in
both result views.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/routes/bookmarks/+page.ts

@@ -16,15 +16,14 @@ export const load: PageLoad = async () => {
                 if (e instanceof ApiError && e.status === 401) {
                     return { bookmarks: [], authenticated: false, error: null as string | null };
                 }
-                // Anything else (502 upstream_unavailable from a backend
-                // restart, 500 internal_error) is rendered inline rather than
-                // re-thrown — SvelteKit's generic error.html is not the right
-                // UX for a transient API blip and the user is already
+                // Anything else — an HTTP error (502 upstream_unavailable from
+                // a backend restart, 500 internal_error) or a raw network
+                // failure (a non-ApiError TypeError) — renders inline rather
+                // than re-thrown: SvelteKit's generic error.html is not the
+                // right UX for a transient API blip and the user is already
                 // authenticated as far as we know.
-                if (e instanceof ApiError) {
-                    return { bookmarks: [], authenticated: true, error: e.message };
-                }
-                throw e;
+                const message = e instanceof ApiError ? e.message : 'Something went wrong.';
+                return { bookmarks: [], authenticated: true, error: message };
             }
         })()
     };

frontend/src/routes/collections/+page.ts

@@ -16,10 +16,11 @@ export const load: PageLoad = async () => {
                 if (e instanceof ApiError && e.status === 401) {
                     return { collections: [], authenticated: false, error: null as string | null };
                 }
-                if (e instanceof ApiError) {
-                    return { collections: [], authenticated: true, error: e.message };
-                }
-                throw e;
+                // An HTTP error or a raw network failure (a non-ApiError
+                // TypeError) renders inline rather than escaping to the
+                // framework error page for a transient API blip.
+                const message = e instanceof ApiError ? e.message : 'Something went wrong.';
+                return { collections: [], authenticated: true, error: message };
             }
         })()
     };

frontend/src/routes/collections/[id]/+page.svelte

@@ -29,6 +29,9 @@
     let mangas = $state<Manga[]>([]);
     let pages = $state<CollectionPageItem[]>([]);
     let contentLoading = $state(true);
+    // Set when the streamed content fails to load, so we surface an inline
+    // error instead of a misleading "this collection is empty".
+    let contentError = $state<string | null>(null);
 
     // Seed (and re-seed on navigation) from the streamed content. A monotonic
     // guard drops a stale resolution that lands after a newer navigation.
@@ -37,6 +40,7 @@
         const content = data.content;
         const seq = ++contentSeq;
         contentLoading = true;
+        contentError = null;
         content
             .then((r) => {
                 if (seq !== contentSeq) return;
@@ -44,8 +48,11 @@
                 pages = r.pages;
                 contentLoading = false;
             })
-            .catch(() => {
+            .catch((e) => {
                 if (seq !== contentSeq) return;
+                mangas = [];
+                pages = [];
+                contentError = e instanceof Error ? e.message : 'Something went wrong.';
                 contentLoading = false;
             });
     });
@@ -203,6 +210,10 @@
 
 {#if contentLoading}
     <MangaGridSkeleton count={6} />
+{:else if contentError}
+    <p class="error" role="alert" data-testid="collection-content-error">
+        Couldn't load this collection's contents: {contentError}
+    </p>
 {:else if mangas.length === 0 && pages.length === 0}
     <p class="status" data-testid="collection-empty">
         This collection is empty.

frontend/src/routes/library/+page.ts

@@ -51,10 +51,11 @@ export const load: PageLoad = async () => {
                 if (e instanceof ApiError && e.status === 401) {
                     return { ...empty, authenticated: false };
                 }
-                if (e instanceof ApiError) {
-                    return { ...empty, error: e.message };
-                }
-                throw e;
+                // An HTTP error or a raw network failure (a non-ApiError
+                // TypeError) renders inline rather than escaping to the
+                // framework error page for a transient API blip.
+                const message = e instanceof ApiError ? e.message : 'Something went wrong.';
+                return { ...empty, error: message };
             }
         })()
     };

frontend/src/routes/search/+page.svelte

@@ -180,7 +180,11 @@
         {#await data.results}
             <SearchResultsSkeleton />
         {:then r}
-            {#if r.results.length === 0}
+            {#if r.error}
+                <p class="error" role="alert" data-testid="search-results-error">
+                    Couldn't load results: {r.error}
+                </p>
+            {:else if r.results.length === 0}
                 <p class="hint" data-testid="search-content-empty">
                     No pages match this search.
                 </p>
@@ -288,7 +292,11 @@
         {#await data.results}
             <SearchResultsSkeleton />
         {:then r}
-            {#if data.view === 'pages'}
+            {#if r.error}
+                <p class="error" role="alert" data-testid="search-results-error">
+                    Couldn't load results: {r.error}
+                </p>
+            {:else if data.view === 'pages'}
                 {#if r.pages.length === 0}
                     <p class="hint" data-testid="search-pages-empty">
                         No pages tagged with "{data.tag}".

frontend/src/routes/search/+page.ts

@@ -92,10 +92,11 @@ export const load: PageLoad = async ({ url }) => {
         if (e instanceof ApiError && e.status === 401) {
             return { ...base, authenticated: false, results: Promise.resolve(emptyResults) };
         }
-        if (e instanceof ApiError) {
-            return { ...base, error: e.message, results: Promise.resolve(emptyResults) };
-        }
-        throw e;
+        // Any other HTTP error or a raw network failure (a non-ApiError
+        // TypeError) is surfaced inline rather than escaping to the framework
+        // error page.
+        const message = e instanceof ApiError ? e.message : 'Something went wrong.';
+        return { ...base, error: message, results: Promise.resolve(emptyResults) };
     }
 
     // Streamed so the results list shows a skeleton while it (re-)queries on
@@ -125,8 +126,8 @@ export const load: PageLoad = async ({ url }) => {
             const r = await listMyPageTags({ tag, limit: 100 });
             return { ...emptyResults, pages: r.items, total: r.page.total ?? 0 };
         } catch (e) {
-            if (e instanceof ApiError) return { ...emptyResults, error: e.message };
-            throw e;
+            const message = e instanceof ApiError ? e.message : 'Something went wrong.';
+            return { ...emptyResults, error: message };
         }
     })();