Standardize error handling across component

[Josue19-08]

➡️ Title

Standardize error handling across components

📘 Description

Create a consistent error handling system throughout the application. Currently, error handling is inconsistent with different patterns used across components, making debugging difficult and user experience inconsistent.

Context: Multiple components handle errors differently - some use console.error, others show alerts, and error types are inconsistent. Need unified approach for better UX and debugging.

✅ Acceptance Criteria

Create error types and interfaces

• Create types/error.ts with standardized error interfaces:
  • AppError interface with code, message, context, timestamp
  • NetworkError, ValidationError, AuthError specific types
  • ErrorSeverity enum (info, warning, error, critical)
  • ErrorCategory enum (network, validation, auth, stellar, unknown)

Build error boundary components

• Create components/error-boundary.tsx:

  • Catch JavaScript errors in component tree
  • Display fallback UI with error details
  • Report errors to logging system
  • Provide retry mechanisms for recoverable errors

• Create components/error-fallback.tsx:

  • Reusable error display component
  • Different layouts for different error types
  • Action buttons (retry, contact support, go back)

Create error handling hook

• Create hooks/use-error-handler.ts:
  • Centralized error processing logic
  • Toast notification management
  • Error logging and reporting
  • Error categorization and severity assignment

Update existing components with errors

• Refactor hooks/auth/use-register-form.ts:

  • Replace catch (err: any) with typed error handling
  • Use error handler hook for consistent messaging
  • Add specific error types for registration failures

• Refactor hooks/auth/use-recovery.ts:

  • Implement standardized error handling
  • Add recovery-specific error messages
  • Use toast notifications for user feedback

• Update hooks/projects/use-projects.ts:

  • Replace generic error handling
  • Add project-specific error types
  • Implement retry logic for network failures

Error display and notifications

• Create components/ui/error-toast.tsx:

  • Consistent toast styling for errors
  • Different styles for error severity levels
  • Auto-dismiss and manual dismiss options

• Update existing toast usage to use standardized error toasts

Error logging system

• Create utils/error-logger.ts:
  • Client-side error logging
  • Error reporting to backend (optional)
  • User context collection
  • Error deduplication

Global error handler setup

• Update app/layout.tsx:
  • Wrap app with error boundary
  • Set up global error handlers
  • Configure error reporting

Example implementations

// types/error.ts
export interface AppError {
  code: string;
  message: string;
  category: ErrorCategory;
  severity: ErrorSeverity;
  context?: Record<string, unknown>;
  timestamp: string;
}

// hooks/use-error-handler.ts
export const useErrorHandler = () => {
  const handleError = (error: unknown, context?: string) => {
    const appError = normalizeError(error, context);
    logError(appError);
    showErrorToast(appError);
  };
  return { handleError };
};

Error handling patterns

• Document error handling best practices in codebase
• Create examples for common error scenarios
• Add error handling guidelines for new components

⚠ Use kebab-case for all file and folder names.
⚠ Do not use default alias imports or relative paths like ../../components/foo.
⚠ Use alias paths with @, e.g. @/components/foo.
⚠ Structure the code with reusable components and reuse existing ones.

[respp]

Hello @Josue19-08 Can I take this issue?

I'm a developer with a solid background in Web3, working across both front-end and back-end. I've contributed to projects in ecosystems like StarkNet, Stellar, Optimism, and Worldcoin, with a focus on building scalable, secure, and efficient blockchain applications.

Currently, I'm a Fellow at OnlyDust and a maintainer at PayStell and StellarRent, where I lead the development of smart contracts and decentralized infrastructure.