CodingNic

Finish the Browse Experience

Add the Browse Error State

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.

typescript
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.

tsx
{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.