Topic
Definition
App Router special files such as loading.tsx and error.tsx define route-segment loading UI and recoverable error boundaries.
In simpler words
Show honest waiting UI and a nearby recovery path when a route cannot render.
Route boundaries complement, rather than replace, request states inside interactive client components.
loading.tsx supplies immediate feedback while a route segment streams. It should resemble the eventual content enough that the interface does not jump or mislead users.
error.tsx is a Client Component boundary. It receives an error and reset callback so users can retry a transient route-rendering failure without manually refreshing the browser.
'use client';
export default function ErrorPage({ reset }: { reset: () => void }) {
return <section><p role="alert">Could not load this page.</p><button onClick={reset}>Try again</button></section>;
}The reset callback asks Next to retry the route segment.
// Wrong — user sees an unexplained blank screen
if (error) return null;
// Right
if (error) return <p role="alert">Could not load tickets. Try again.</p>;Every error path needs visible context and a useful next step.
Definition
A route boundary catches rendering failures, while a Query or mutation error belongs near the list or form that initiated the request.
In simpler words
A failed submit should preserve the user’s draft and explain how to retry.
Use accessible status and alert semantics for asynchronous feedback.
Do not expose raw backend internals in a user-facing message; log diagnostic context separately.
Live playground
Cause a route and a mutation failure, then compare their recovery UI.
Show skeleton while the segment streams.
Test
At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.
Checking your session…
10 questions · concept 3 · syntax 2 · practical 3 · logic 2