Error Boundary & Error Handling

You are a frontend reliability engineer who designs error handling systems that keep applications functional even when things go wrong. Create a comprehensive error handling architecture for the following project.

Project Details:
Application Type: [SAAS/E-COMMERCE/FINANCIAL/CONTENT/REAL-TIME]
Framework: [REACT/NEXT.JS/REMIX]
Error Monitoring Service: [SENTRY/DATADOG/BUGSNAG/NONE YET]
API Architecture: [REST/GRAPHQL/TRPC/MIXED]
User Base: [CONSUMER/ENTERPRISE/INTERNAL]
Availability Requirements: [STANDARD/HIGH/CRITICAL]

Section 1 - Error Boundary Architecture:
Design the error boundary hierarchy specifying a root-level boundary that prevents the entire application from crashing, route-level boundaries that isolate page failures, and component-level boundaries around high-risk widgets like third-party integrations, data visualizations, and user-generated content renderers. Create the error boundary component implementation including the componentDidCatch lifecycle for logging, the getDerivedStateFromError for rendering fallback UI, and a reset mechanism that allows users to retry the failed operation. Establish the fallback UI system with different fallback components for each boundary level including a full-page error screen with navigation for route-level failures and inline error cards with retry buttons for component-level failures. Specify how error boundaries interact with Suspense boundaries in React 18 and above including how to handle errors from lazy-loaded components and async server components. Address the limitation that error boundaries do not catch errors in event handlers, async code, or server-side rendering and specify the complementary error handling patterns needed for these cases.

Section 2 - Global Error Catching and Logging:
Define the global error handler setup using window.onerror for uncaught exceptions and window.onunhandledrejection for unhandled Promise rejections capturing the error message, stack trace, source file, and line number. Create the error normalization pipeline that transforms different error types including native Error objects, string throws, React error info, network errors, and third-party library errors into a consistent error format with severity level, error code, user context, and reproducibility information. Establish the error deduplication strategy that groups identical errors together rather than reporting each occurrence separately using fingerprinting based on the error message, stack trace signature, and component tree location. Specify the error context enrichment approach automatically attaching the current route, user identifier without personal data, application version, browser information, feature flags, and the sequence of recent user actions to every error report. Address the sensitive data scrubbing system that removes authentication tokens, personal information, and other sensitive data from error reports before they are sent to the monitoring service.

Section 3 - API Error Handling:
Design the API error response handling architecture that maps HTTP status codes and API error formats to user-facing error messages and recovery actions. Create the error interceptor pattern in the HTTP client or GraphQL client that catches network errors, timeout errors, authentication failures, rate limiting responses, and server errors before they reach component code. Establish the retry strategy for transient failures including automatic retry with exponential backoff for 503 Service Unavailable and network timeout errors, immediate retry for idempotent GET requests, and no automatic retry for mutation failures that could cause duplicate actions. Specify the authentication error handling flow including how 401 responses trigger token refresh attempts, how to queue failed requests during token refresh and replay them after, and how to redirect to login when refresh fails. Address the offline error handling detecting network unavailability and presenting appropriate messaging to users about which features are available offline versus which require connectivity.

Section 4 - Error Recovery Patterns:
Define the component-level recovery patterns including retry buttons that re-render the failed component, refresh actions that refetch failed data, and graceful degradation that shows reduced functionality rather than a complete error state. Create the optimistic update rollback system that reverts UI changes when a mutation fails, restores the previous state in the client state manager, and shows a notification explaining the failure. Establish the data consistency recovery handling for scenarios where the client state becomes inconsistent with the server state including full state refresh mechanisms, conflict resolution dialogs, and automatic reconciliation for non-conflicting differences. Specify the error recovery for multi-step operations like checkout flows or form wizards where failures in later steps should not lose data entered in earlier steps. Address the circuit breaker pattern for frontend features that depend on unreliable services including how to detect repeated failures, temporarily disable the feature, show an appropriate message, and automatically re-enable the feature when the service recovers.

Section 5 - User-Facing Error Experience:
Design the error message system with user-friendly language that avoids technical jargon, clearly explains what happened, and provides actionable next steps including retry, navigate elsewhere, or contact support. Create the error page designs for common scenarios including 404 not found with search and popular links, 403 forbidden with permission request flow, 500 server error with status page link, and offline state with cached content available. Establish the toast notification error system for non-blocking errors that do not prevent the user from continuing their work including auto-dismissal timing, action buttons for quick fixes, and stacking behavior when multiple errors occur. Specify the form submission error display including inline field errors mapped from server validation responses, a summary banner listing all errors with anchor links to the relevant fields, and the focus management that moves the user to the first error. Address the error help integration including contextual help articles linked from specific error states, the feedback mechanism for reporting errors that seem incorrect, and the proactive notification system that alerts users to known issues before they encounter them.

Section 6 - Monitoring, Alerting, and Improvement:
Define the error monitoring dashboard showing error counts by type and severity, error trends over time, affected user counts, and the most impactful errors ranked by frequency and user impact. Create the alerting rules that notify the engineering team when error rates spike above baseline, when new error types appear after a deployment, when critical user flows like checkout or login have elevated failure rates, and when error counts for specific issues exceed thresholds. Establish the error triage process including severity classification criteria, response time expectations for each severity level, and the escalation path from individual developer to team lead to engineering leadership. Specify the post-incident review process for significant error events including how to conduct the review, what information to capture, how to track remediation actions, and how to share learnings across the team. Address the proactive error prevention strategy including chaos engineering approaches for frontend applications, automated canary deployments that monitor error rates before full rollout, and feature flag kill switches that can disable problematic features instantly.