@umituz/react-native-design-system 2.6.107 → 2.6.110

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.107",
-  "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
+  "version": "2.6.110",
+  "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area and exception utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "exports": {

package/src/exception/domain/entities/ExceptionEntity.ts

@@ -0,0 +1,115 @@
+/**
+ * Exception Entity - Domain Layer
+ * Pure business logic representation of errors and exceptions
+ */
+
+import { generateUUID } from '@umituz/react-native-uuid';
+
+export type ExceptionSeverity = 'fatal' | 'error' | 'warning' | 'info';
+export type ExceptionCategory = 'network' | 'validation' | 'authentication' | 'authorization' | 'business-logic' | 'system' | 'storage' | 'unknown';
+
+export interface ExceptionContext {
+  userId?: string;
+  screen?: string;
+  action?: string;
+  componentStack?: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface ExceptionEntity {
+  id: string;
+  message: string;
+  stackTrace?: string;
+  severity: ExceptionSeverity;
+  category: ExceptionCategory;
+  context: ExceptionContext;
+  timestamp: Date;
+  handled: boolean;
+  reported: boolean;
+}
+
+export interface ErrorLog {
+  id: string;
+  exceptionId: string;
+  userId?: string;
+  message: string;
+  stackTrace?: string;
+  severity: ExceptionSeverity;
+  category: ExceptionCategory;
+  context: ExceptionContext;
+  createdAt: Date;
+}
+
+/**
+ * Factory function to create an exception entity
+ */
+export function createException(
+  error: Error,
+  severity: ExceptionSeverity = 'error',
+  category: ExceptionCategory = 'unknown',
+  context: ExceptionContext = {}
+): ExceptionEntity {
+  return {
+    id: generateUUID(),
+    message: error.message,
+    stackTrace: error.stack,
+    severity,
+    category,
+    context,
+    timestamp: new Date(),
+    handled: false,
+    reported: false,
+  };
+}
+
+/**
+ * Factory function to create an error log
+ */
+export function createErrorLog(
+  exception: ExceptionEntity
+): ErrorLog {
+  return {
+    id: generateUUID(),
+    exceptionId: exception.id,
+    userId: exception.context.userId,
+    message: exception.message,
+    stackTrace: exception.stackTrace,
+    severity: exception.severity,
+    category: exception.category,
+    context: exception.context,
+    createdAt: new Date(),
+  };
+}
+
+/**
+ * Determine if exception should be reported
+ */
+export function shouldReportException(exception: ExceptionEntity): boolean {
+  // Don't report warnings or info
+  if (exception.severity === 'warning' || exception.severity === 'info') {
+    return false;
+  }
+
+  // Don't report validation errors (user errors)
+  if (exception.category === 'validation') {
+    return false;
+  }
+
+  // Report everything else
+  return true;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

package/src/exception/domain/repositories/IExceptionRepository.ts

@@ -0,0 +1,37 @@
+/**
+ * Exception Repository Interface
+ * Defines the contract for exception data persistence
+ */
+
+import type { ExceptionEntity, ErrorLog } from '../entities/ExceptionEntity';
+
+export interface ExceptionRepositoryError {
+    code: string;
+    message: string;
+}
+
+export type ExceptionResult<T> =
+    | { success: true; data: T }
+    | { success: false; error: ExceptionRepositoryError };
+
+export interface IExceptionRepository {
+    /**
+     * Save an exception to storage
+     */
+    save(exception: ExceptionEntity): Promise<ExceptionResult<void>>;
+
+    /**
+     * Get all stored exceptions
+     */
+    getAll(): Promise<ExceptionResult<ExceptionEntity[]>>;
+
+    /**
+     * Clear all stored exceptions
+     */
+    clear(): Promise<ExceptionResult<void>>;
+
+    /**
+     * Log an error
+     */
+    log(errorLog: ErrorLog): Promise<ExceptionResult<void>>;
+}

package/src/exception/index.ts

@@ -0,0 +1,65 @@
+/**
+ * @umituz/react-native-exception - Public API
+ *
+ * Exception handling and error tracking for React Native apps
+ *
+ * Usage:
+ *   import { ErrorBoundary, exceptionService, useExceptionStore } from '@umituz/react-native-exception';
+ */
+
+// =============================================================================
+// DOMAIN LAYER EXPORTS
+// =============================================================================
+
+// Entities
+export type {
+  ExceptionEntity,
+  ErrorLog,
+  ExceptionContext,
+  ExceptionSeverity,
+  ExceptionCategory,
+} from './domain/entities/ExceptionEntity';
+export {
+  createException,
+  createErrorLog,
+  shouldReportException,
+} from './domain/entities/ExceptionEntity';
+
+// Repositories
+export type {
+  IExceptionRepository,
+  ExceptionRepositoryError,
+  ExceptionResult,
+} from './domain/repositories/IExceptionRepository';
+
+// =============================================================================
+// INFRASTRUCTURE LAYER EXPORTS
+// =============================================================================
+
+// State Store (Zustand)
+export { useExceptionStore, useExceptions } from './infrastructure/storage/ExceptionStore';
+
+// Services
+// Infrastructure Services
+export { ExceptionService } from './infrastructure/services/ExceptionService';
+export { ExceptionHandler } from './infrastructure/services/ExceptionHandler';
+export { ExceptionReporter } from './infrastructure/services/ExceptionReporter';
+export { ExceptionLogger } from './infrastructure/services/ExceptionLogger';
+
+// =============================================================================
+// PRESENTATION LAYER EXPORTS
+// =============================================================================
+
+// Components
+export { ErrorBoundary } from './presentation/components/ErrorBoundary';
+export { ExceptionEmptyState } from './presentation/components/ExceptionEmptyState';
+export type { ExceptionEmptyStateProps } from './presentation/components/ExceptionEmptyState';
+export { ExceptionErrorState } from './presentation/components/ExceptionErrorState';
+export type { ExceptionErrorStateProps } from './presentation/components/ExceptionErrorState';
+
+
+
+
+
+
+

package/src/exception/infrastructure/services/ExceptionHandler.ts

@@ -0,0 +1,93 @@
+/**
+ * Exception Handler Service
+ *
+ * Handles exception creation, validation, and basic processing.
+ *
+ * SOLID: Single Responsibility - Only exception handling
+ * DRY: Centralized exception processing logic
+ * KISS: Simple exception handling interface
+ */
+
+import type {
+  ExceptionEntity,
+  ExceptionContext,
+  ExceptionSeverity,
+  ExceptionCategory,
+} from '../../domain/entities/ExceptionEntity';
+import {
+  createException,
+  shouldReportException,
+} from '../../domain/entities/ExceptionEntity';
+
+export class ExceptionHandler {
+  /**
+   * Create and validate an exception
+   */
+  static createException(
+    error: Error,
+    severity: ExceptionSeverity = 'error',
+    category: ExceptionCategory = 'unknown',
+    context: ExceptionContext = {},
+  ): ExceptionEntity {
+    return createException(error, severity, category, context);
+  }
+
+  /**
+   * Check if exception should be reported
+   */
+  static shouldReportException(exception: ExceptionEntity): boolean {
+    return shouldReportException(exception);
+  }
+
+  /**
+   * Validate exception data
+   */
+  static validateException(exception: ExceptionEntity): boolean {
+    return !!(
+      exception.id &&
+      exception.message &&
+      exception.timestamp &&
+      exception.severity &&
+      exception.category
+    );
+  }
+
+  /**
+   * Sanitize exception for logging
+   */
+  static sanitizeException(exception: ExceptionEntity): ExceptionEntity {
+    return {
+      ...exception,
+      message: this.sanitizeMessage(exception.message),
+      context: this.sanitizeContext(exception.context),
+    };
+  }
+
+  /**
+   * Sanitize error message
+   */
+  private static sanitizeMessage(message: string): string {
+    // Remove sensitive information from error messages
+    return message
+      .replace(/password=[^&\s]*/gi, 'password=***')
+      .replace(/token=[^&\s]*/gi, 'token=***')
+      .replace(/key=[^&\s]*/gi, 'key=***');
+  }
+
+  /**
+   * Sanitize context object
+   */
+  private static sanitizeContext(context: ExceptionContext): ExceptionContext {
+    const sanitized: ExceptionContext = { ...context };
+
+    // Remove sensitive fields
+    const sensitiveFields = ['password', 'token', 'apiKey', 'secret'];
+    sensitiveFields.forEach(field => {
+      if (sanitized.metadata && sanitized.metadata[field]) {
+        sanitized.metadata = { ...sanitized.metadata, [field]: '***' };
+      }
+    });
+
+    return sanitized;
+  }
+}

package/src/exception/infrastructure/services/ExceptionLogger.ts

@@ -0,0 +1,142 @@
+/**
+ * Exception Logger Service
+ *
+ * Handles local logging and persistence of exceptions.
+ *
+ * SOLID: Single Responsibility - Only exception logging/persistence
+ * DRY: Centralized logging logic
+ * KISS: Simple logging interface
+ */
+
+import type { ExceptionEntity } from '../../domain/entities/ExceptionEntity';
+import { ExceptionHandler } from './ExceptionHandler';
+import { storageRepository } from '@umituz/react-native-storage';
+
+export class ExceptionLogger {
+  private static readonly STORAGE_KEY = '@exceptions';
+  private maxStoredExceptions = 100;
+
+  /**
+   * Log exception locally
+   */
+  async logException(exception: ExceptionEntity): Promise<void> {
+    try {
+      const sanitizedException = ExceptionHandler.sanitizeException(exception);
+      const existingExceptions = await this.getStoredExceptions();
+
+      // Add new exception
+      existingExceptions.unshift(sanitizedException);
+
+      // Limit storage size
+      if (existingExceptions.length > this.maxStoredExceptions) {
+        existingExceptions.splice(this.maxStoredExceptions);
+      }
+
+      await storageRepository.setString(ExceptionLogger.STORAGE_KEY, JSON.stringify(existingExceptions));
+    } catch (error) {
+      // Fallback to console if storage fails
+      console.error('Failed to log exception:', error);
+    }
+  }
+
+  /**
+   * Get stored exceptions
+   */
+  async getStoredExceptions(): Promise<ExceptionEntity[]> {
+    try {
+      const result = await storageRepository.getString(ExceptionLogger.STORAGE_KEY, '[]');
+      if (result.success) {
+        return JSON.parse(result.data);
+      }
+      return [];
+    } catch (error) {
+      console.warn('Failed to get stored exceptions:', error);
+      return [];
+    }
+  }
+
+  /**
+   * Clear all stored exceptions
+   */
+  async clearStoredExceptions(): Promise<void> {
+    try {
+      await storageRepository.setString(ExceptionLogger.STORAGE_KEY, '[]');
+    } catch (error) {
+      console.warn('Failed to clear stored exceptions:', error);
+    }
+  }
+
+  /**
+   * Get exceptions by category
+   */
+  async getExceptionsByCategory(category: ExceptionEntity['category']): Promise<ExceptionEntity[]> {
+    const exceptions = await this.getStoredExceptions();
+    return exceptions.filter(ex => ex.category === category);
+  }
+
+  /**
+   * Get exceptions by severity
+   */
+  async getExceptionsBySeverity(severity: ExceptionEntity['severity']): Promise<ExceptionEntity[]> {
+    const exceptions = await this.getStoredExceptions();
+    return exceptions.filter(ex => ex.severity === severity);
+  }
+
+  /**
+   * Get recent exceptions (last N days)
+   */
+  async getRecentExceptions(days: number = 7): Promise<ExceptionEntity[]> {
+    const exceptions = await this.getStoredExceptions();
+    const cutoffDate = new Date();
+    cutoffDate.setDate(cutoffDate.getDate() - days);
+
+    return exceptions.filter(ex => new Date(ex.timestamp) >= cutoffDate);
+  }
+
+  /**
+   * Get exception statistics
+   */
+  async getExceptionStats(): Promise<{
+    total: number;
+    bySeverity: Record<ExceptionEntity['severity'], number>;
+    byCategory: Record<ExceptionEntity['category'], number>;
+  }> {
+    const exceptions = await this.getStoredExceptions();
+
+    const bySeverity: Record<ExceptionEntity['severity'], number> = {
+      fatal: 0,
+      error: 0,
+      warning: 0,
+      info: 0,
+    };
+
+    const byCategory: Record<ExceptionEntity['category'], number> = {
+      network: 0,
+      validation: 0,
+      authentication: 0,
+      authorization: 0,
+      'business-logic': 0,
+      system: 0,
+      storage: 0,
+      unknown: 0,
+    };
+
+    exceptions.forEach(ex => {
+      bySeverity[ex.severity]++;
+      byCategory[ex.category]++;
+    });
+
+    return {
+      total: exceptions.length,
+      bySeverity,
+      byCategory,
+    };
+  }
+
+  /**
+   * Update max stored exceptions limit
+   */
+  setMaxStoredExceptions(limit: number): void {
+    this.maxStoredExceptions = Math.max(1, limit);
+  }
+}

package/src/exception/infrastructure/services/ExceptionReporter.ts

@@ -0,0 +1,134 @@
+/**
+ * Exception Reporter Service
+ *
+ * Handles reporting exceptions to external services.
+ *
+ * SOLID: Single Responsibility - Only exception reporting
+ * DRY: Centralized reporting logic
+ * KISS: Simple reporting interface
+ */
+
+import type { ExceptionEntity } from '../../domain/entities/ExceptionEntity';
+
+export interface ExceptionReporterConfig {
+  enabled: boolean;
+  endpoint?: string;
+  apiKey?: string;
+  environment: 'development' | 'staging' | 'production';
+}
+
+export class ExceptionReporter {
+  private config: ExceptionReporterConfig;
+
+  constructor(config: ExceptionReporterConfig) {
+    this.config = config;
+  }
+
+  /**
+   * Report exception to external service
+   */
+  async reportException(exception: ExceptionEntity): Promise<boolean> {
+    if (!this.config.enabled) {
+      return false;
+    }
+
+    try {
+      // Default console reporting for development
+      if (this.config.environment === 'development') {
+        return this.reportToConsole(exception);
+      }
+
+      // External service reporting
+      if (this.config.endpoint) {
+        return await this.reportToExternalService(exception);
+      }
+
+      return false;
+    } catch (error) {
+      // Don't throw in reporter to avoid infinite loops
+      console.warn('Exception reporting failed:', error);
+      return false;
+    }
+  }
+
+  /**
+   * Report to console (development)
+   */
+  private reportToConsole(exception: ExceptionEntity): boolean {
+    const level = this.getConsoleLevel(exception.severity);
+
+    console[level](
+      `[${exception.severity.toUpperCase()}] ${exception.category}:`,
+      exception.message,
+      {
+        id: exception.id,
+        timestamp: exception.timestamp,
+        context: exception.context,
+        stack: exception.stackTrace,
+      }
+    );
+
+    return true;
+  }
+
+  /**
+   * Report to external service
+   */
+  private async reportToExternalService(exception: ExceptionEntity): Promise<boolean> {
+    if (!this.config.endpoint) {
+      return false;
+    }
+
+    const response = await fetch(this.config.endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...(this.config.apiKey && { 'Authorization': `Bearer ${this.config.apiKey}` }),
+      },
+      body: JSON.stringify({
+        id: exception.id,
+        message: exception.message,
+        severity: exception.severity,
+        category: exception.category,
+        timestamp: exception.timestamp,
+        context: exception.context,
+        stackTrace: exception.stackTrace,
+        environment: this.config.environment,
+      }),
+    });
+
+    return response.ok;
+  }
+
+  /**
+   * Get console level for severity
+   */
+  private getConsoleLevel(severity: ExceptionEntity['severity']): 'log' | 'warn' | 'error' {
+    switch (severity) {
+      case 'fatal':
+      case 'error':
+        return 'error';
+      case 'warning':
+        return 'warn';
+      default:
+        return 'log';
+    }
+  }
+
+  /**
+   * Update reporter configuration
+   */
+  updateConfig(config: Partial<ExceptionReporterConfig>): void {
+    this.config = { ...this.config, ...config };
+  }
+}
+
+
+
+
+
+
+
+
+
+

package/src/exception/infrastructure/services/ExceptionService.ts

@@ -0,0 +1,154 @@
+/**
+ * Exception Service - Infrastructure Layer
+ *
+ * Facade for exception handling using composition.
+ * Delegates to specialized services for specific operations.
+ *
+ * SOLID: Facade pattern - Single entry point, delegates to specialists
+ * DRY: Avoids code duplication by composing smaller services
+ * KISS: Simple interface, complex operations delegated
+ */
+
+import type {
+  ExceptionEntity,
+  ExceptionContext,
+  ExceptionSeverity,
+  ExceptionCategory,
+} from '../../domain/entities/ExceptionEntity';
+import { ExceptionHandler } from './ExceptionHandler';
+import { ExceptionReporter } from './ExceptionReporter';
+import { ExceptionLogger } from './ExceptionLogger';
+import { useExceptionStore } from '../storage/ExceptionStore';
+
+export class ExceptionService {
+  private logger: ExceptionLogger;
+  private reporter: ExceptionReporter;
+
+  constructor(reporterConfig?: ExceptionReporter['config']) {
+    this.logger = new ExceptionLogger();
+    this.reporter = new ExceptionReporter(
+      reporterConfig || {
+        enabled: false,
+        environment: 'development'
+      }
+    );
+  }
+
+  /**
+   * Handle an exception
+   */
+  async handleException(
+    error: Error,
+    severity: ExceptionSeverity = 'error',
+    category: ExceptionCategory = 'unknown',
+    context: ExceptionContext = {},
+  ): Promise<void> {
+    const exception = ExceptionHandler.createException(error, severity, category, context);
+
+    // Add to store
+    useExceptionStore.getState().addException(exception);
+
+    // Log locally
+    await this.logger.logException(exception);
+
+    // Report to external service if needed
+    if (ExceptionHandler.shouldReportException(exception)) {
+      await this.reporter.reportException(exception);
+    }
+
+    // Mark as handled
+    useExceptionStore.getState().markAsHandled(exception.id);
+  }
+
+  /**
+   * Handle network errors
+   */
+  async handleNetworkError(error: Error, context: ExceptionContext = {}): Promise<void> {
+    await this.handleException(error, 'error', 'network', context);
+  }
+
+  /**
+   * Handle validation errors
+   */
+  async handleValidationError(error: Error, context: ExceptionContext = {}): Promise<void> {
+    await this.handleException(error, 'warning', 'validation', context);
+  }
+
+  /**
+   * Handle authentication errors
+   */
+  async handleAuthError(error: Error, context: ExceptionContext = {}): Promise<void> {
+    await this.handleException(error, 'error', 'authentication', context);
+  }
+
+  /**
+   * Handle system errors
+   */
+  async handleSystemError(error: Error, context: ExceptionContext = {}): Promise<void> {
+    await this.handleException(error, 'fatal', 'system', context);
+  }
+
+  /**
+   * Get stored exceptions
+   */
+  async getStoredExceptions(): Promise<ExceptionEntity[]> {
+    return this.logger.getStoredExceptions();
+  }
+
+  /**
+   * Get exception statistics
+   */
+  async getExceptionStats() {
+    return this.logger.getExceptionStats();
+  }
+
+  /**
+   * Clear stored exceptions
+   */
+  async clearStoredExceptions(): Promise<void> {
+    await this.logger.clearStoredExceptions();
+  }
+
+  /**
+   * Update reporter configuration
+   */
+  updateReporterConfig(config: Partial<ExceptionReporter['config']>): void {
+    this.reporter.updateConfig(config);
+  }
+
+  /**
+   * Set max stored exceptions
+   */
+  setMaxStoredExceptions(limit: number): void {
+    this.logger.setMaxStoredExceptions(limit);
+  }
+
+  /**
+   * Handle storage/permission errors
+   */
+  async handleStorageError(error: Error, context: ExceptionContext = {}): Promise<void> {
+    await this.handleException(error, 'error', 'storage', context);
+  }
+
+  /**
+   * Handle fatal errors
+   */
+  async handleFatalError(error: Error, context: ExceptionContext = {}): Promise<void> {
+    await this.handleException(error, 'fatal', 'system', context);
+  }
+
+  /**
+   * Clear all exceptions
+   */
+  clearExceptions(): void {
+    useExceptionStore.getState().clearExceptions();
+  }
+}
+
+// Export default instance
+export const exceptionService = new ExceptionService();
+
+
+
+
+

package/src/exception/infrastructure/storage/ExceptionStore.ts

@@ -0,0 +1,44 @@
+/**
+ * Exception Store
+ * Zustand store for exception state management
+ */
+
+import { createStore } from '@umituz/react-native-storage';
+import type { ExceptionEntity } from '../../domain/entities/ExceptionEntity';
+
+interface ExceptionState {
+    exceptions: ExceptionEntity[];
+}
+
+interface ExceptionActions {
+    addException: (exception: ExceptionEntity) => void;
+    clearExceptions: () => void;
+    markAsHandled: (id: string) => void;
+}
+
+export const useExceptionStore = createStore<ExceptionState, ExceptionActions>({
+    name: 'exception-store',
+    initialState: {
+        exceptions: [],
+    },
+    persist: false,
+    actions: (set: (state: Partial<ExceptionState>) => void, get: () => ExceptionState) => ({
+        addException: (exception: ExceptionEntity) =>
+            set({ exceptions: [...get().exceptions, exception] }),
+        clearExceptions: () => set({ exceptions: [] }),
+        markAsHandled: (id: string) =>
+            set({
+                exceptions: get().exceptions.map((e: ExceptionEntity) =>
+                    e.id === id ? { ...e, handled: true } : e
+                ),
+            }),
+    }),
+});
+
+/**
+ * Hook to get exceptions from store
+ */
+export const useExceptions = () => {
+    const exceptions = useExceptionStore((state: ExceptionState) => state.exceptions);
+    return exceptions;
+};

package/src/exception/presentation/components/ErrorBoundary.tsx

@@ -0,0 +1,129 @@
+/**
+ * Error Boundary Component
+ * Catches React errors and provides fallback UI
+ */
+
+import React, { Component, ReactNode } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { exceptionService } from '../../infrastructure/services/ExceptionService';
+import { useAppDesignTokens } from '../../../theme';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    // Log error to exception service
+    exceptionService.handleFatalError(error, {
+      componentStack: errorInfo.componentStack ?? undefined,
+      screen: 'ErrorBoundary',
+    });
+
+    // Call external onError if provided
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+  }
+
+  handleReset = (): void => {
+    this.setState({
+      hasError: false,
+      error: null,
+    });
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <ErrorDisplay error={this.state.error} onReset={this.handleReset} />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+interface ErrorDisplayProps {
+  error: Error | null;
+  onReset: () => void;
+}
+
+const ErrorDisplay: React.FC<ErrorDisplayProps> = ({ error, onReset }) => {
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Something went wrong</Text>
+      <Text style={styles.message}>
+        {error?.message || 'An unexpected error occurred'}
+      </Text>
+      <TouchableOpacity style={styles.button} onPress={onReset}>
+        <Text style={styles.buttonText}>Try Again</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    button: {
+      backgroundColor: tokens.colors.primary,
+      borderRadius: tokens.borders.radius.sm,
+      paddingHorizontal: tokens.spacing.lg,
+      paddingVertical: tokens.spacing.sm,
+    },
+    buttonText: {
+      color: tokens.colors.textInverse,
+      fontSize: tokens.typography.bodyLarge.fontSize,
+      fontWeight: tokens.typography.labelLarge.fontWeight,
+    },
+    container: {
+      alignItems: 'center',
+      backgroundColor: tokens.colors.backgroundPrimary,
+      flex: 1,
+      justifyContent: 'center',
+      padding: tokens.spacing.lg,
+    },
+    message: {
+      color: tokens.colors.textSecondary,
+      fontSize: tokens.typography.bodyLarge.fontSize,
+      marginBottom: tokens.spacing.lg,
+      textAlign: 'center',
+    },
+    title: {
+      color: tokens.colors.textPrimary,
+      fontSize: tokens.typography.headlineSmall.fontSize,
+      fontWeight: tokens.typography.headlineSmall.fontWeight,
+      marginBottom: tokens.spacing.sm,
+    },
+  });
+
+

package/src/exception/presentation/components/ExceptionEmptyState.tsx

@@ -0,0 +1,123 @@
+/**
+ * Empty State Component
+ * Displays when no data is available
+ *
+ * Presentation Layer - UI Component
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { AtomicIcon, AtomicText } from "../../../atoms";
+import { useAppDesignTokens } from "../../../theme";
+
+export interface ExceptionEmptyStateProps {
+  icon?: string;
+  title: string;
+  description?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+  illustration?: React.ReactNode;
+}
+
+export const ExceptionEmptyState: React.FC<ExceptionEmptyStateProps> = ({
+  icon = "inbox",
+  title,
+  description,
+  actionLabel,
+  onAction,
+  illustration,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = React.useMemo(
+    () =>
+      StyleSheet.create({
+        actionButton: {
+          borderRadius: tokens.borders.radius.md,
+          marginTop: tokens.spacing.sm,
+          paddingHorizontal: tokens.spacing.lg,
+          paddingVertical: tokens.spacing.md,
+        },
+        actionButtonText: {
+          // AtomicText handles typography
+        },
+        container: {
+          alignItems: "center",
+          flex: 1,
+          justifyContent: "center",
+          padding: tokens.spacing.xl,
+        },
+        description: {
+          marginBottom: tokens.spacing.lg,
+          maxWidth: 280,
+        },
+        iconContainer: {
+          alignItems: "center",
+          borderRadius: 60,
+          height: 120,
+          justifyContent: "center",
+          marginBottom: tokens.spacing.lg,
+          width: 120,
+        },
+        title: {
+          marginBottom: tokens.spacing.sm,
+        },
+      }),
+    [tokens],
+  );
+
+  return (
+    <View style={styles.container}>
+      {illustration ? (
+        illustration
+      ) : (
+        <View
+          style={[
+            styles.iconContainer,
+            { backgroundColor: tokens.colors.surface },
+          ]}
+        >
+          <AtomicIcon name={icon} size="xxl" color="secondary" />
+        </View>
+      )}
+
+      <AtomicText
+        type="headlineSmall"
+        color="primary"
+        style={[styles.title, { textAlign: "center" }]}
+      >
+        {title}
+      </AtomicText>
+
+      {description && (
+        <AtomicText
+          type="bodyMedium"
+          color="secondary"
+          style={[styles.description, { textAlign: "center" }]}
+        >
+          {description}
+        </AtomicText>
+      )}
+
+      {actionLabel && onAction && (
+        <TouchableOpacity
+          style={[
+            styles.actionButton,
+            { backgroundColor: tokens.colors.primary },
+          ]}
+          onPress={onAction}
+          activeOpacity={0.8}
+        >
+          <AtomicText
+            type="labelLarge"
+            color="onPrimary"
+            style={styles.actionButtonText}
+          >
+            {actionLabel}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+

package/src/exception/presentation/components/ExceptionErrorState.tsx

@@ -0,0 +1,118 @@
+/**
+ * Error State Component
+ * Generic error display with retry action
+ *
+ * Presentation Layer - UI Component
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicIcon,
+  AtomicText,
+} from "../../../atoms";
+import {
+  useAppDesignTokens,
+} from "../../../theme";
+
+export interface ExceptionErrorStateProps {
+  /** Icon name from Ionicons */
+  icon?: string;
+  /** Error title */
+  title: string;
+  /** Error description */
+  description?: string;
+  /** Retry button label */
+  actionLabel?: string;
+  /** Retry action callback */
+  onAction?: () => void;
+  /** Custom illustration instead of icon */
+  illustration?: React.ReactNode;
+}
+
+export const ExceptionErrorState: React.FC<ExceptionErrorStateProps> = ({
+  icon = "alert-circle-outline",
+  title,
+  description,
+  actionLabel,
+  onAction,
+  illustration,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = React.useMemo(
+    () =>
+      StyleSheet.create({
+        actionButton: {
+          alignItems: "center",
+          borderRadius: tokens.borders.radius.full,
+          flexDirection: "row",
+          gap: tokens.spacing.sm,
+          marginTop: tokens.spacing.sm,
+          paddingHorizontal: tokens.spacing.lg,
+          paddingVertical: tokens.spacing.md,
+        },
+        container: {
+          alignItems: "center",
+          flex: 1,
+          justifyContent: "center",
+          padding: tokens.spacing.xl,
+        },
+        description: {
+          marginBottom: tokens.spacing.lg,
+          maxWidth: 280,
+          textAlign: "center",
+        },
+        iconContainer: {
+          alignItems: "center",
+          borderRadius: 60,
+          height: 120,
+          justifyContent: "center",
+          marginBottom: tokens.spacing.lg,
+          width: 120,
+        },
+        title: {
+          marginBottom: tokens.spacing.sm,
+          textAlign: "center",
+        },
+      }),
+    [tokens],
+  );
+
+  return (
+    <View style={styles.container}>
+      {illustration ? (
+        illustration
+      ) : (
+        <View
+          style={[styles.iconContainer, { backgroundColor: tokens.colors.surface }]}
+        >
+          <AtomicIcon name={icon as never} size="xxl" color="secondary" />
+        </View>
+      )}
+
+      <AtomicText type="headlineSmall" color="primary" style={styles.title}>
+        {title}
+      </AtomicText>
+
+      {description && (
+        <AtomicText type="bodyMedium" color="secondary" style={styles.description}>
+          {description}
+        </AtomicText>
+      )}
+
+      {actionLabel && onAction && (
+        <TouchableOpacity
+          style={[styles.actionButton, { backgroundColor: tokens.colors.primary }]}
+          onPress={onAction}
+          activeOpacity={0.8}
+        >
+          <AtomicIcon name="refresh-outline" size="sm" color="onPrimary" />
+          <AtomicText type="labelLarge" color="onPrimary">
+            {actionLabel}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};

package/src/exports/exception.ts

@@ -0,0 +1,7 @@
+/**
+ * Exception Exports
+ *
+ * Exception handling and error tracking for React Native apps
+ */
+
+export * from '../exception';

package/src/index.ts

@@ -57,6 +57,11 @@ export * from './exports/organisms';
 // =============================================================================
 export * from './exports/safe-area';
 
+// =============================================================================
+// EXCEPTION EXPORTS
+// =============================================================================
+export * from './exports/exception';
+
 // =============================================================================
 // VARIANT UTILITIES
 // =============================================================================