Why this lesson matters

Understand error boundaries and use it correctly in an App Router project. Loading, error and not-found files are route-level UX contracts. They let users understand latency, recover from render failures and distinguish missing resources from internal errors.

How to reason about it

  • For Error Boundaries, the outcome to verify is: Offer a clear recovery path instead of leaking internal error details.
  • In Error Boundaries, keep this failure controlled: A generic spinner or leaked stack trace gives users no useful recovery path and can expose implementation details.
  • Error Boundaries practice target: Add loading, recoverable error and not-found states to one dynamic route, then trigger each state deliberately.

Practical walkthrough

In the Error Boundaries walkthrough: Offer a clear recovery path instead of leaking internal error details.

app/dashboard/error.tsxtsx
'use client';
export default function ErrorView({ reset }: { reset: () => void }) {
  return <button onClick={reset}>Try again</button>;
}

Practice it yourself

Practice

Error Boundaries exercise

Add loading, recoverable error and not-found states to one dynamic route, then trigger each state deliberately.

  • Record the expected result before execution
  • Test one valid path and one lesson-specific failure path
  • Explain in two lines which boundary owns the decision

Summary