ErrorBoundary

The ErrorBoundary component provides robust error handling for React applications. It catches JavaScript errors anywhere in the component tree and displays a user-friendly fallback UI with recovery options.

Features

• ✅ Automatic Error Catching - Catches errors in child component tree
• ✅ User-Friendly Fallback UI - Professional error display with retry functionality
• ✅ Development Mode Details - Shows error stack traces during development
• ✅ Custom Error Handling - Supports custom error callbacks and fallback UI
• ✅ Retry Functionality - Users can attempt to recover from errors
• ✅ HOC Support - Higher-Order Component pattern available

Automatic Integration

ErrorBoundary is automatically included in all QwickApp instances. No additional setup required!

// ErrorBoundary is automatically applied
<QwickApp appName="My App">
  <MyComponent /> {/* Automatically protected by ErrorBoundary */}
</QwickApp>

Standalone Usage

For use outside of QwickApp or for custom error boundaries:

import { ErrorBoundary } from '@qwickapps/react-framework';

function App() {
  return (
    <ErrorBoundary onError={(error, errorInfo) => logError(error)}>
      <MyComponent />
    </ErrorBoundary>
  );
}

Custom Fallback UI

Provide your own error UI instead of the default:

<ErrorBoundary 
  fallback={
    <div className="custom-error">
      <h2>Oops! Something went wrong</h2>
      <p>Please try refreshing the page</p>
    </div>
  }
>
  <MyComponent />
</ErrorBoundary>

Higher-Order Component

Use the withErrorBoundary HOC to wrap any component:

import { withErrorBoundary } from '@qwickapps/react-framework';

const SafeComponent = withErrorBoundary(MyComponent, {
  onError: (error) => console.error('Component error:', error),
  showErrorDetails: true
});

Props

Prop	Type	Description
children	ReactNode	Child components to protect
fallback	ReactNode	Custom fallback UI (optional)
onError	(error: Error, errorInfo: ErrorInfo) => void	Error callback (optional)
showErrorDetails	boolean	Show error details (overrides development mode)

Error Recovery

The default error UI includes:

• Try Again button - Resets error state and re-renders children
• Refresh Page button - Performs full page reload
• Error Details (dev mode) - Expandable section with error stack trace

Development vs Production

Development Mode

• Shows detailed error information
• Includes component stack trace
• Expandable error details section

Production Mode

• Shows user-friendly error message only
• Hides technical error details
• Focuses on recovery options

Error Logging

ErrorBoundary automatically logs errors to:

1. Console - Always logs to browser console
2. Custom Logger - Calls onError callback if provided
3. Global Logger - Uses window.qwickapps.logError if available

// Set up global error logging
window.qwickapps = {
  logError: (error, errorInfo) => {
    // Send to your logging service
    analytics.track('error', { error: error.message });
  }
};

Testing

ErrorBoundary is fully tested and handles:

• Component rendering errors
• Async errors during lifecycle methods
• Custom error handling callbacks
• Retry functionality
• Development mode error details

Best Practices

1. Let QwickApp Handle It - Use automatic integration when possible
2. Custom Boundaries - Create specific boundaries for critical sections
3. Error Reporting - Implement onError callback for production error tracking
4. Graceful Degradation - Design fallback UI that maintains app functionality
5. User Communication - Provide clear recovery instructions in custom fallback UI

Examples

API Integration with Error Boundary

import { ErrorBoundary } from '@qwickapps/react-framework';

function DataComponent() {
  // Component that might fail during API calls
  const { data, error } = useAPI('/api/data');
  
  if (error) throw error; // Let ErrorBoundary handle it
  
  return <div>{data}</div>;
}

function App() {
  return (
    <ErrorBoundary 
      onError={(error) => {
        // Report API errors
        errorReporting.track('api_error', error);
      }}
      fallback={
        <div>
          <h3>Unable to load data</h3>
          <p>Please check your connection and try again.</p>
        </div>
      }
    >
      <DataComponent />
    </ErrorBoundary>
  );
}

Form Section Protection

function FormSection() {
  return (
    <ErrorBoundary fallback={<div>Form temporarily unavailable</div>}>
      <ComplexFormComponent />
    </ErrorBoundary>
  );
}