Finish the Browse Experience
9 min read
Add the Browse Error State
Add the Browse Error State
Make the home page recover cleanly when the TMDB request fails.
Step 1 — Add an error value
In app/page.tsx, create errorMessage alongside the other server-side values.
let errorMessage: string | null = null;
Step 2 — Wrap both requests
Keep the Promise.all request together inside try/catch. On failure, store the error message rather than allowing the route to render an unhandled exception.
Step 3 — Render a friendly error branch
When errorMessage exists, render the existing error-box. Give the missing-key case its specific setup guidance and use the raw message for other failures.
{errorMessage ? (
<div className="error-box">
Couldn't load movies.
Only render the normal browse controls and grid when there is no error.
Checkpoint
Temporarily remove the TMDB key and refresh /. The page should show the intended error box instead of crashing.