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>

backend/Cargo.lock

@@ -1558,7 +1558,7 @@ checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
 
 [[package]]
 name = "mangalord"
-version = "0.122.0"
+version = "0.122.1"
 dependencies = [
  "anyhow",
  "argon2",

backend/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "mangalord"
-version = "0.122.0"
+version = "0.122.1"
 edition = "2021"
 default-run = "mangalord"
 

frontend/e2e/streamed-load-errors.spec.ts

@@ -0,0 +1,96 @@
+import { test, expect, type Page } from './fixtures';
+
+// Streamed loaders (bookmarks / collections / library / search) capture a
+// failed fetch into an in-band `error` field so the page renders an inline
+// message instead of either the framework error page (network failure —
+// a non-ApiError) or a misleading empty state (an HTTP error). These specs
+// drive each distinct loader shape into that error path.
+
+const collectionId = 'd2222222-2222-2222-2222-222222222222';
+
+async function authed(page: Page) {
+    await page.route('**/api/v1/auth/config', (r) =>
+        r.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ self_register_enabled: true, private_mode: false })
+        })
+    );
+    await page.route('**/api/v1/auth/me', (r) =>
+        r.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ user: { id: 'u1', username: 'reader', created_at: '2026-01-01T00:00:00Z', is_admin: false } })
+        })
+    );
+    await page.route('**/api/v1/auth/me/preferences', (r) =>
+        r.fulfill({ status: 200, contentType: 'application/json', body: '{}' })
+    );
+    await page.route('**/api/v1/files/**', (r) => r.fulfill({ status: 200, body: '' }));
+}
+
+test('bookmarks: a network failure renders inline, not the framework error page', async ({ page }) => {
+    await authed(page);
+    // A raw connection failure surfaces as a non-ApiError (TypeError) from
+    // fetch — the case that previously escaped to the framework boundary.
+    await page.route('**/api/v1/me/bookmarks*', (r) => r.abort());
+
+    await page.goto('/bookmarks');
+    await expect(page.getByTestId('bookmarks-error')).toBeVisible();
+});
+
+test('library: a network failure on one of the aggregated fetches renders inline', async ({ page }) => {
+    await authed(page);
+    await page.route('**/api/v1/me/collections*', (r) =>
+        r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ items: [], page: { limit: 200, offset: 0, total: 0 } }) })
+    );
+    await page.route('**/api/v1/me/read-progress*', (r) =>
+        r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ items: [], page: { limit: 100, offset: 0, total: 0 } }) })
+    );
+    await page.route('**/api/v1/me/page-tags/distinct*', (r) =>
+        r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ items: [] }) })
+    );
+    await page.route('**/api/v1/me/page-tags?**', (r) =>
+        r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ items: [], page: { limit: 100, offset: 0, total: 0 } }) })
+    );
+    await page.route('**/api/v1/me/bookmarks*', (r) => r.abort());
+
+    await page.goto('/library');
+    await expect(page.getByTestId('library-error')).toBeVisible();
+});
+
+test('search: a failed results query shows an error, not a false "no matches"', async ({ page }) => {
+    await authed(page);
+    await page.route('**/api/v1/me/page-tags/distinct*', (r) =>
+        r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ items: [{ tag: 'funny', count: 3 }] }) })
+    );
+    // The streamed tagged-pages query fails with a server error.
+    await page.route('**/api/v1/me/page-tags?**', (r) =>
+        r.fulfill({ status: 500, contentType: 'application/json', body: JSON.stringify({ error: { code: 'internal_error', message: 'boom' } }) })
+    );
+
+    await page.goto('/search?tag=funny');
+    // The chip cloud / active tag renders (distinct resolved) ...
+    await expect(page.getByTestId('search-active-tag')).toBeVisible();
+    // ... and the failed results render as an error, not "No pages tagged".
+    await expect(page.getByTestId('search-results-error')).toBeVisible();
+    await expect(page.getByTestId('search-pages-empty')).toHaveCount(0);
+});
+
+test('collection detail: a failed content load shows an inline error, not an empty collection', async ({ page }) => {
+    await authed(page);
+    await page.route(`**/api/v1/collections/${collectionId}`, (r) =>
+        r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ id: collectionId, name: 'Favourites', description: null, manga_count: 1 }) })
+    );
+    await page.route(`**/api/v1/collections/${collectionId}/pages*`, (r) =>
+        r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ items: [], page: { limit: 200, offset: 0, total: 0 } }) })
+    );
+    await page.route(`**/api/v1/collections/${collectionId}/mangas*`, (r) =>
+        r.fulfill({ status: 500, contentType: 'application/json', body: JSON.stringify({ error: { code: 'internal_error', message: 'boom' } }) })
+    );
+
+    await page.goto(`/collections/${collectionId}`);
+    await expect(page.getByRole('heading', { name: 'Favourites' })).toBeVisible();
+    await expect(page.getByTestId('collection-content-error')).toBeVisible();
+    await expect(page.getByTestId('collection-empty')).toHaveCount(0);
+});

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mangalord-frontend",
-  "version": "0.122.0",
+  "version": "0.122.1",
   "private": true,
   "type": "module",
   "scripts": {

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
+                // Anything else — an HTTP error (502 upstream_unavailable from
-                // restart, 500 internal_error) is rendered inline rather than
+                // a backend restart, 500 internal_error) or a raw network
-                // re-thrown — SvelteKit's generic error.html is not the right
+                // failure (a non-ApiError TypeError) — renders inline rather
-                // UX for a transient API blip and the user is already
+                // 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) {
+                const message = e instanceof ApiError ? e.message : 'Something went wrong.';
-                    return { bookmarks: [], authenticated: true, error: e.message };
+                return { bookmarks: [], authenticated: true, error: message };
-                }
-                throw e;
             }
         })()
     };

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) {
+                // An HTTP error or a raw network failure (a non-ApiError
-                    return { collections: [], authenticated: true, error: e.message };
+                // TypeError) renders inline rather than escaping to the
-                }
+                // framework error page for a transient API blip.
-                throw e;
+                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) {
+                // An HTTP error or a raw network failure (a non-ApiError
-                    return { ...empty, error: e.message };
+                // TypeError) renders inline rather than escaping to the
-                }
+                // framework error page for a transient API blip.
-                throw e;
+                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) {
+        // Any other HTTP error or a raw network failure (a non-ApiError
-            return { ...base, error: e.message, results: Promise.resolve(emptyResults) };
+        // TypeError) is surfaced inline rather than escaping to the framework
-        }
+        // error page.
-        throw e;
+        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 };
+            const message = e instanceof ApiError ? e.message : 'Something went wrong.';
-            throw e;
+            return { ...emptyResults, error: message };
         }
     })();