Error Handling

import React from 'react';
import { ConvexError } from 'convex/values';

interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
}

class ApiErrorBoundary extends React.Component<
  React.PropsWithChildren<{}>,
  ErrorBoundaryState
> {
  constructor(props: React.PropsWithChildren<{}>) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error('API Error caught by boundary:', error, errorInfo);
    
    // Report to error tracking service
    // reportError(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      const error = this.state.error;
      
      if (error instanceof ConvexError) {
        // Handle Convex-specific errors
        return (
          <div className="bg-red-50 p-4 rounded-lg">
            <h2 className="text-lg font-semibold text-red-900 mb-2">
              Something went wrong
            </h2>
            <p className="text-red-700">{error.data}</p>
            <button 
              onClick={() => this.setState({ hasError: false, error: null })}
              className="mt-2 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
            >
              Try Again
            </button>
          </div>
        );
      }
      
      // Handle other errors
      return (
        <div className="bg-gray-50 p-4 rounded-lg">
          <h2 className="text-lg font-semibold text-gray-900 mb-2">
            Unexpected Error
          </h2>
          <p className="text-gray-700">
            An unexpected error occurred. Please refresh the page or contact support.
          </p>
          <button 
            onClick={() => window.location.reload()}
            className="mt-2 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            Refresh Page
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ApiErrorBoundary;

import { useState } from 'react';
import { ConvexError } from 'convex/values';

interface UseErrorHandlerReturn {
  error: string | null;
  showError: (error: any) => void;
  clearError: () => void;
  handleAsync: <T>(asyncFn: () => Promise<T>) => Promise<T | null>;
}

function useErrorHandler(): UseErrorHandlerReturn {
  const [error, setError] = useState<string | null>(null);

  const showError = (error: any) => {
    if (error instanceof ConvexError) {
      setError(error.data);
    } else if (error instanceof Error) {
      setError(error.message);
    } else if (typeof error === 'string') {
      setError(error);
    } else {
      setError('An unexpected error occurred');
    }
  };

  const clearError = () => setError(null);

  const handleAsync = async <T,>(asyncFn: () => Promise<T>): Promise<T | null> => {
    try {
      clearError();
      return await asyncFn();
    } catch (error) {
      showError(error);
      return null;
    }
  };

  return { error, showError, clearError, handleAsync };
}

// Usage
function MyComponent() {
  const { error, showError, clearError, handleAsync } = useErrorHandler();
  
  const handleCreateProduct = async () => {
    const result = await handleAsync(async () => {
      return await convex.mutation(api.shared.products.createProduct, {
        name: "New Product",
        // ... other fields
      });
    });
    
    if (result) {
      console.log('Product created:', result);
    }
    // Error is automatically handled and displayed
  };

  return (
    <div>
      {error && (
        <div className="bg-red-50 p-4 rounded-lg mb-4">
          <p className="text-red-700">{error}</p>
          <button onClick={clearError} className="text-red-600 underline">
            Dismiss
          </button>
        </div>
      )}
      
      <button onClick={handleCreateProduct}>
        Create Product
      </button>
    </div>
  );
}

async function withRetry<T>(
  fn: () => Promise<T>,
  maxRetries: number = 3,
  delay: number = 1000
): Promise<T> {
  let lastError: any;
  
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      return await fn();
    } catch (error) {
      lastError = error;
      
      // Don't retry on client errors (4xx)
      if (error instanceof ConvexError) {
        const errorData = error.data;
        if (typeof errorData === 'object' && errorData.status >= 400 && errorData.status < 500) {
          throw error;
        }
      }
      
      if (attempt === maxRetries) {
        throw lastError;
      }
      
      // Exponential backoff
      await new Promise(resolve => setTimeout(resolve, delay * Math.pow(2, attempt - 1)));
    }
  }
  
  throw lastError;
}

// Usage
const result = await withRetry(async () => {
  return await convex.mutation(api.shared.products.createProduct, productData);
}, 3, 1000);

function useNetworkErrorHandler() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);
  const [retryQueue, setRetryQueue] = useState<Array<() => Promise<any>>>([]);

  useEffect(() => {
    const handleOnline = () => {
      setIsOnline(true);
      // Process retry queue when back online
      retryQueue.forEach(fn => fn());
      setRetryQueue([]);
    };

    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, [retryQueue]);

  const handleNetworkError = (retryFn: () => Promise<any>) => {
    if (!isOnline) {
      setRetryQueue(prev => [...prev, retryFn]);
      return 'You are offline. Changes will be saved when connection is restored.';
    }
    return 'Network error. Please try again.';
  };

  return { isOnline, handleNetworkError };
}