A React error boundary catches render/lifecycle errors below it; it does not catch event-handler errors, async rejections, or failed HTTP responses. Handle those where the operation occurs and show a recoverable state. Example: try { const response = await api.save(order, { signal }); setOrder(response); } catch (error) { if (!isAbort(error)) setProblem(toUserProblem(error)); } Use a top-level boundary plus smaller boundaries around independent panels. Log a correlation ID and component context, not tokens or personal data. Map RFC 7807 errors to safe messages, preserve field validation, provide retry only for safe operations, and distinguish empty, loading, offline, forbidden, and server-error states.
Backbencher Developer · · 0 likes