feat(error): implement comprehensive error handling and logging system

app/_layout.tsx

@@ -2,7 +2,7 @@
  * Root Layout
  *
  * Main app layout that provides navigation stack, theme providers,
- * and global context for ThumbCode.
+ * global context, and error handling for ThumbCode.
  */
 
 import { Stack, useRouter, useSegments } from 'expo-router';
@@ -11,9 +11,15 @@ import { useEffect } from 'react';
 import { ActivityIndicator, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { ErrorBoundary } from '@/components/error';
 import { OnboardingProvider, useOnboarding } from '@/contexts/onboarding';
+import { logger, setupGlobalErrorHandlers } from '@/lib';
 import '../global.css';
 
+// Initialize global error handlers
+setupGlobalErrorHandlers();
+logger.info('ThumbCode app started');
+
 function RootLayoutNav() {
   const { isLoading, hasCompletedOnboarding } = useOnboarding();
   const segments = useSegments();
@@ -85,13 +91,15 @@ function RootLayoutNav() {
 
 export default function RootLayout() {
   return (
-    <OnboardingProvider>
-      <GestureHandlerRootView style={{ flex: 1 }}>
-        <SafeAreaProvider>
-          <StatusBar style="light" />
-          <RootLayoutNav />
-        </SafeAreaProvider>
-      </GestureHandlerRootView>
-    </OnboardingProvider>
+    <ErrorBoundary>
+      <OnboardingProvider>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <SafeAreaProvider>
+            <StatusBar style="light" />
+            <RootLayoutNav />
+          </SafeAreaProvider>
+        </GestureHandlerRootView>
+      </OnboardingProvider>
+    </ErrorBoundary>
   );
 }

package.json

@@ -32,14 +32,15 @@
     "generate:all": "pnpm --filter @thumbcode/dev-tools run generate:all"
   },
   "dependencies": {
+    "@anthropic-ai/sdk": "^0.32.0",
+    "@react-native-async-storage/async-storage": "^2.0.0",
+    "@react-native-community/netinfo": "^11.4.1",
+    "@react-navigation/native": "^7.0.0",
     "@thumbcode/config": "workspace:*",
     "@thumbcode/core": "workspace:*",
     "@thumbcode/state": "workspace:*",
     "@thumbcode/types": "workspace:*",
     "@thumbcode/ui": "workspace:*",
-    "@anthropic-ai/sdk": "^0.32.0",
-    "@react-native-async-storage/async-storage": "^2.0.0",
-    "@react-navigation/native": "^7.0.0",
     "babel-preset-expo": "^54.0.9",
     "date-fns": "^4.1.0",
     "diff": "^8.0.3",

src/components/error/ErrorBoundary.tsx

@@ -0,0 +1,108 @@
+/**
+ * Error Boundary Component
+ *
+ * React error boundary that catches errors in child components
+ * and displays a fallback UI.
+ */
+
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+import { logger } from '@/lib/logger';
+import { ErrorFallback } from './ErrorFallback';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+  resetKeys?: unknown[];
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    // Log the error
+    logger.error('React Error Boundary caught an error', error, {
+      componentStack: errorInfo.componentStack,
+    });
+
+    // Update state with error info
+    this.setState({ errorInfo });
+
+    // Call optional error callback
+    this.props.onError?.(error, errorInfo);
+  }
+
+  componentDidUpdate(prevProps: Props): void {
+    // Reset error state when resetKeys change
+    if (this.state.hasError && this.props.resetKeys) {
+      const hasResetKeyChanged = this.props.resetKeys.some(
+        (key, index) => key !== prevProps.resetKeys?.[index]
+      );
+
+      if (hasResetKeyChanged) {
+        this.resetErrorBoundary();
+      }
+    }
+  }
+
+  resetErrorBoundary = (): void => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      // Use custom fallback if provided
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      // Use default error fallback
+      return (
+        <ErrorFallback
+          error={this.state.error}
+          componentStack={this.state.errorInfo?.componentStack}
+          onRetry={this.resetErrorBoundary}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+/**
+ * Hook-friendly wrapper for error boundary
+ */
+export function withErrorBoundary<P extends object>(
+  WrappedComponent: React.ComponentType<P>,
+  fallback?: ReactNode
+) {
+  return function WithErrorBoundary(props: P) {
+    return (
+      <ErrorBoundary fallback={fallback}>
+        <WrappedComponent {...props} />
+      </ErrorBoundary>
+    );
+  };
+}

src/components/error/ErrorFallback.tsx

@@ -0,0 +1,161 @@
+/**
+ * Error Fallback Component
+ *
+ * User-friendly error display with retry functionality.
+ * Follows ThumbCode's organic design language.
+ */
+
+import { Alert, Pressable, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Container, VStack } from '@/components/layout';
+import { Text } from '@/components/ui';
+
+interface ErrorFallbackProps {
+  error: Error | null;
+  componentStack?: string | null;
+  onRetry?: () => void;
+  onReportIssue?: () => void;
+  title?: string;
+  message?: string;
+}
+
+export function ErrorFallback({
+  error,
+  componentStack,
+  onRetry,
+  onReportIssue,
+  title = 'Something went wrong',
+  message = "We're sorry, but something unexpected happened. Please try again.",
+}: ErrorFallbackProps) {
+  const insets = useSafeAreaInsets();
+  const isDev = __DEV__;
+
+  const handleReportIssue = () => {
+    if (onReportIssue) {
+      onReportIssue();
+    } else {
+      // TODO: Implement proper issue reporting (e.g., open GitHub issues URL)
+      Alert.alert('Report Issue', 'Issue reporting will be available in a future update.');
+    }
+  };
+
+  return (
+    <View
+      className="flex-1 bg-charcoal"
+      style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}
+    >
+      <Container padding="lg" className="flex-1 justify-center">
+        <VStack spacing="lg" align="center">
+          {/* Error Icon */}
+          <View
+            className="w-20 h-20 bg-coral-500/20 items-center justify-center"
+            style={{
+              borderTopLeftRadius: 40,
+              borderTopRightRadius: 36,
+              borderBottomRightRadius: 42,
+              borderBottomLeftRadius: 38,
+            }}
+          >
+            <Text className="text-4xl">⚠️</Text>
+          </View>
+
+          {/* Error Title */}
+          <Text size="xl" weight="bold" className="text-white text-center font-display">
+            {title}
+          </Text>
+
+          {/* Error Message */}
+          <Text className="text-neutral-400 text-center max-w-xs">{message}</Text>
+
+          {/* Dev-only Error Details */}
+          {isDev && error && (
+            <View
+              className="bg-surface p-4 w-full max-w-sm"
+              style={{
+                borderTopLeftRadius: 12,
+                borderTopRightRadius: 10,
+                borderBottomRightRadius: 14,
+                borderBottomLeftRadius: 8,
+              }}
+            >
+              <Text size="sm" weight="semibold" className="text-coral-500 mb-2">
+                Debug Info
+              </Text>
+              <Text size="sm" className="text-neutral-400 font-mono mb-2">
+                {error.name}: {error.message}
+              </Text>
+              {componentStack && (
+                <Text size="xs" className="text-neutral-500 font-mono" numberOfLines={8}>
+                  {componentStack}
+                </Text>
+              )}
+            </View>
+          )}
+
+          {/* Retry Button */}
+          {onRetry && (
+            <Pressable
+              onPress={onRetry}
+              className="bg-coral-500 px-8 py-3 active:bg-coral-600"
+              style={{
+                borderTopLeftRadius: 24,
+                borderTopRightRadius: 22,
+                borderBottomRightRadius: 26,
+                borderBottomLeftRadius: 20,
+              }}
+            >
+              <Text weight="semibold" className="text-white">
+                Try Again
+              </Text>
+            </Pressable>
+          )}
+
+          {/* Secondary Action */}
+          <Pressable className="py-2" onPress={handleReportIssue}>
+            <Text size="sm" className="text-teal-500">
+              Report Issue
+            </Text>
+          </Pressable>
+        </VStack>
+      </Container>
+    </View>
+  );
+}
+
+/**
+ * Compact error fallback for inline use
+ */
+interface CompactErrorFallbackProps {
+  message?: string;
+  onRetry?: () => void;
+}
+
+export function CompactErrorFallback({
+  message = 'Failed to load',
+  onRetry,
+}: CompactErrorFallbackProps) {
+  return (
+    <View
+      className="bg-surface/50 p-4"
+      style={{
+        borderTopLeftRadius: 12,
+        borderTopRightRadius: 10,
+        borderBottomRightRadius: 14,
+        borderBottomLeftRadius: 8,
+      }}
+    >
+      <VStack spacing="sm" align="center">
+        <Text size="sm" className="text-neutral-400">
+          {message}
+        </Text>
+        {onRetry && (
+          <Pressable onPress={onRetry}>
+            <Text size="sm" className="text-teal-500">
+              Tap to retry
+            </Text>
+          </Pressable>
+        )}
+      </VStack>
+    </View>
+  );
+}

src/components/error/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Error Components
+ *
+ * Components for error handling and display.
+ */
+
+export { ErrorBoundary, withErrorBoundary } from './ErrorBoundary';
+export { CompactErrorFallback, ErrorFallback } from './ErrorFallback';