20 — Error Boundaries & Error Handling

Error boundaries catch JavaScript errors during rendering and display fallback UI instead of crashing the entire app.

Key Rules

• Error boundaries must be class components (no hook equivalent yet)
• They catch errors in: rendering, lifecycle methods, constructors of children
• They do NOT catch: event handlers, async code, server-side rendering, errors in the boundary itself

Error Handling Strategy

Error Type	Solution
Render errors	Error Boundary
Event handler errors	try/catch in handler
Async errors (fetch)	try/catch + state
Global unhandled	window.onerror / unhandledrejection

Libraries

• react-error-boundary — Functional API for error boundaries with retry, reset, fallback components

File

• error-handling.tsx — class error boundary, react-error-boundary patterns, error recovery, error logging, global error handling