21119301040

Committed 18 Jan 2026 10:00PM UTC coverage: 25.567% (+3.7%) from 21.828%

Build # 21119301040

Build Type

Pull #52

github

Committed by

web-flow

Commit Message

Merge 11207e402 into fac9f81fa

Pull Request Pull Request #52: feat(error): implement comprehensive error handling and logging system

Run Details

260 of 1608 branches covered (16.17%)

Branch coverage included in aggregate %.

124 of 211 new or added lines in 7 files covered. (58.77%)

619 of 1830 relevant lines covered (33.83%)

1.48 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/components/error/ErrorFallback.tsx

/**
 * Error Fallback Component
 *
 * User-friendly error display with retry functionality.
 * Follows ThumbCode's organic design language.
 */

import { 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;
  title?: string;
  message?: string;
}

export function ErrorFallback({
  error,
  componentStack,
  onRetry,
  title = 'Something went wrong',
  message = "We're sorry, but something unexpected happened. Please try again.",
}: ErrorFallbackProps) {
  const insets = useSafeAreaInsets();
  const isDev = __DEV__;

  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">
            <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>
  );
}

1	/**
2	* Error Fallback Component
3	*
4	* User-friendly error display with retry functionality.
5	* Follows ThumbCode's organic design language.
6	*/
7
8	import { Pressable, View } from 'react-native';
9	import { useSafeAreaInsets } from 'react-native-safe-area-context';
10	import { Container, VStack } from '@/components/layout';
11	import { Text } from '@/components/ui';
12
13	interface ErrorFallbackProps {
14	error: Error \| null;
15	componentStack?: string \| null;
16	onRetry?: () => void;
17	title?: string;
18	message?: string;
19	}
20
21	export function ErrorFallback({
22	error,
23	componentStack,
24	onRetry,
25	title = 'Something went wrong',	×
26	message = "We're sorry, but something unexpected happened. Please try again.",	×
27	}: ErrorFallbackProps) {
NEW 28	const insets = useSafeAreaInsets();	×
NEW 29	const isDev = __DEV__;	×
30
NEW 31	return (	×
32	<View
33	className="flex-1 bg-charcoal"
34	style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}
35	>
36	<Container padding="lg" className="flex-1 justify-center">
37	<VStack spacing="lg" align="center">
38	{/* Error Icon */}
39	<View
40	className="w-20 h-20 bg-coral-500/20 items-center justify-center"
41	style={{
42	borderTopLeftRadius: 40,
43	borderTopRightRadius: 36,
44	borderBottomRightRadius: 42,
45	borderBottomLeftRadius: 38,
46	}}
47	>
48	<Text className="text-4xl">⚠️</Text>
49	</View>
50
51	{/* Error Title */}
52	<Text size="xl" weight="bold" className="text-white text-center font-display">
53	{title}
54	</Text>
55
56	{/* Error Message */}
57	<Text className="text-neutral-400 text-center max-w-xs">{message}</Text>
58
59	{/* Dev-only Error Details */}
60	{isDev && error && (	×
61	<View
62	className="bg-surface p-4 w-full max-w-sm"
63	style={{
64	borderTopLeftRadius: 12,
65	borderTopRightRadius: 10,
66	borderBottomRightRadius: 14,
67	borderBottomLeftRadius: 8,
68	}}
69	>
70	<Text size="sm" weight="semibold" className="text-coral-500 mb-2">
71	Debug Info
72	</Text>
73	<Text size="sm" className="text-neutral-400 font-mono mb-2">
74	{error.name}: {error.message}
75	</Text>
76	{componentStack && (	×
77	<Text size="xs" className="text-neutral-500 font-mono" numberOfLines={8}>
78	{componentStack}
79	</Text>
80	)}
81	</View>
82	)}
83
84	{/* Retry Button */}
85	{onRetry && (	×
86	<Pressable
87	onPress={onRetry}
88	className="bg-coral-500 px-8 py-3 active:bg-coral-600"
89	style={{
90	borderTopLeftRadius: 24,
91	borderTopRightRadius: 22,
92	borderBottomRightRadius: 26,
93	borderBottomLeftRadius: 20,
94	}}
95	>
96	<Text weight="semibold" className="text-white">
97	Try Again
98	</Text>
99	</Pressable>
100	)}
101
102	{/* Secondary Action */}
103	<Pressable className="py-2">
104	<Text size="sm" className="text-teal-500">
105	Report Issue
106	</Text>
107	</Pressable>
108	</VStack>
109	</Container>
110	</View>
111	);
112	}
113
114	/**
115	* Compact error fallback for inline use
116	*/
117	interface CompactErrorFallbackProps {
118	message?: string;
119	onRetry?: () => void;
120	}
121
122	export function CompactErrorFallback({
123	message = 'Failed to load',	×
124	onRetry,
125	}: CompactErrorFallbackProps) {
NEW 126	return (	×
127	<View
128	className="bg-surface/50 p-4"
129	style={{
130	borderTopLeftRadius: 12,
131	borderTopRightRadius: 10,
132	borderBottomRightRadius: 14,
133	borderBottomLeftRadius: 8,
134	}}
135	>
136	<VStack spacing="sm" align="center">
137	<Text size="sm" className="text-neutral-400">
138	{message}
139	</Text>
140	{onRetry && (	×
141	<Pressable onPress={onRetry}>
142	<Text size="sm" className="text-teal-500">
143	Tap to retry
144	</Text>
145	</Pressable>
146	)}
147	</VStack>
148	</View>
149	);
150	}

agentic-dev-library / thumbcode / 21119301040

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous