Likes page shows a styled error per section when an external API fetch fails

[ooloth]

Why

Any of five external API calls (TMDB, iTunes, Notion) can fail at render time, and without an error boundary the entire page crashes to a framework-level error screen that tells the user nothing useful.

Current state

app/likes/page.tsx fetches data from multiple APIs using .unwrap() with no try/catch. There is no app/error.tsx or app/likes/error.tsx to intercept thrown exceptions. When any fetch fails, Next.js surfaces a raw crash screen with no context about which section failed or why.

Ideal state

• When a single external API fetch fails, only the affected media section shows an error message naming the section (e.g. "TV shows could not be loaded right now")
• The rest of the Likes page continues to render normally
• A app/likes/error.tsx boundary exists as a last-resort fallback for unrecoverable failures

Starting points

• app/likes/page.tsx — contains all .unwrap() calls; the primary place to add per-section error handling
• ui/sections/likes-row.tsx — the section component that would render the fallback message

QA plan

1. Simulate a failed TMDB fetch (e.g. by temporarily setting an invalid API key) and load /likes — Expect only the affected section to show a named error message; other sections render normally
2. Verify the page title and surrounding layout remain intact during a section failure

Done when

A user visiting /likes during a partial API outage sees a styled, section-specific error message rather than a framework crash screen.

[ooloth]

Additional code evidence for the concurrency failure mode:

First Promise.all (lines 13–17): fetches Notion items for books, albums, and podcasts in parallel. Each leg uses .then(r => r.unwrap()). A throw from any one .unwrap() rejects the entire Promise.all — the sibling futures run to completion, but their results are silently discarded rather than retained as partial data.

Second Promise.all (lines 20–35): fetches TMDB (tv, movies) and iTunes (books, albums, podcasts) in parallel with the same .then(r => r.unwrap()) pattern. A failure on any one leg drops the results from all five concurrent fetches.

Neither call site has a surrounding try/catch or .catch(). When one .unwrap() throws, the unhandled rejection propagates to Next.js and the entire Likes route renders an error page rather than showing the sections that did load.

---

Generated by Claude Code