From 51ea254dde10019eefd133d370aea5276c116c5c Mon Sep 17 00:00:00 2001 From: MechaCat02 Date: Tue, 7 Jul 2026 19:11:37 +0200 Subject: [PATCH] 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) --- backend/Cargo.lock | 2 +- backend/Cargo.toml | 2 +- frontend/e2e/streamed-load-errors.spec.ts | 96 +++++++++++++++++++ frontend/package.json | 2 +- frontend/src/routes/bookmarks/+page.ts | 15 ++- frontend/src/routes/collections/+page.ts | 9 +- .../src/routes/collections/[id]/+page.svelte | 13 ++- frontend/src/routes/library/+page.ts | 9 +- frontend/src/routes/search/+page.svelte | 12 ++- frontend/src/routes/search/+page.ts | 13 +-- 10 files changed, 145 insertions(+), 28 deletions(-) create mode 100644 frontend/e2e/streamed-load-errors.spec.ts diff --git a/backend/Cargo.lock b/backend/Cargo.lock index cec967a..7942035 100644 --- a/backend/Cargo.lock +++ b/backend/Cargo.lock @@ -1558,7 +1558,7 @@ checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4" [[package]] name = "mangalord" -version = "0.122.0" +version = "0.122.1" dependencies = [ "anyhow", "argon2", diff --git a/backend/Cargo.toml b/backend/Cargo.toml index d411d99..10c49f5 100644 --- a/backend/Cargo.toml +++ b/backend/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "mangalord" -version = "0.122.0" +version = "0.122.1" edition = "2021" default-run = "mangalord" diff --git a/frontend/e2e/streamed-load-errors.spec.ts b/frontend/e2e/streamed-load-errors.spec.ts new file mode 100644 index 0000000..b96cf88 --- /dev/null +++ b/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); +}); diff --git a/frontend/package.json b/frontend/package.json index ff787a0..0d9e7e4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,6 +1,6 @@ { "name": "mangalord-frontend", - "version": "0.122.0", + "version": "0.122.1", "private": true, "type": "module", "scripts": { diff --git a/frontend/src/routes/bookmarks/+page.ts b/frontend/src/routes/bookmarks/+page.ts index 3609bff..4402e21 100644 --- a/frontend/src/routes/bookmarks/+page.ts +++ b/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 }; } })() }; diff --git a/frontend/src/routes/collections/+page.ts b/frontend/src/routes/collections/+page.ts index 7076abf..9aa04a4 100644 --- a/frontend/src/routes/collections/+page.ts +++ b/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 }; } })() }; diff --git a/frontend/src/routes/collections/[id]/+page.svelte b/frontend/src/routes/collections/[id]/+page.svelte index c0fc6d5..99d8317 100644 --- a/frontend/src/routes/collections/[id]/+page.svelte +++ b/frontend/src/routes/collections/[id]/+page.svelte @@ -29,6 +29,9 @@ let mangas = $state([]); let pages = $state([]); 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(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} +{:else if contentError} + {:else if mangas.length === 0 && pages.length === 0}

This collection is empty. diff --git a/frontend/src/routes/library/+page.ts b/frontend/src/routes/library/+page.ts index da737e8..1a3b6f0 100644 --- a/frontend/src/routes/library/+page.ts +++ b/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 }; } })() }; diff --git a/frontend/src/routes/search/+page.svelte b/frontend/src/routes/search/+page.svelte index 1c81311..bd0bf9d 100644 --- a/frontend/src/routes/search/+page.svelte +++ b/frontend/src/routes/search/+page.svelte @@ -180,7 +180,11 @@ {#await data.results} {:then r} - {#if r.results.length === 0} + {#if r.error} +

+ {:else if r.results.length === 0}

No pages match this search.

@@ -288,7 +292,11 @@ {#await data.results} {:then r} - {#if data.view === 'pages'} + {#if r.error} + + {:else if data.view === 'pages'} {#if r.pages.length === 0}

No pages tagged with "{data.tag}". diff --git a/frontend/src/routes/search/+page.ts b/frontend/src/routes/search/+page.ts index 0cc2e01..7f05381 100644 --- a/frontend/src/routes/search/+page.ts +++ b/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 }; } })();