21409318999

Committed 27 Jan 2026 06:31PM UTC coverage: 25.979% (+1.1%) from 24.924%

Build # 21409318999

Build Type

Pull #106

github

Committed by

web-flow

Commit Message

Merge 8aff89c0f into 04afaf4f3

Pull Request Pull Request #106: Implement GitHub issue reporting in ErrorFallback

Run Details

348 of 2104 branches covered (16.54%)

Branch coverage included in aggregate %.

0 of 6 new or added lines in 1 file covered. (0.0%)

939 of 2850 relevant lines covered (32.95%)

1.75 hits per line

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

36.36

/src/components/error/ErrorFallback.tsx

/**
 * Error Fallback Component
 *
 * User-friendly error display with retry functionality.
 * Follows ThumbCode's organic design language.
 * Uses paint daube icons for brand consistency.
 */

import { Alert, Linking, Pressable, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { ErrorIcon } from '@/components/icons';
import { Container, VStack } from '@/components/layout';
import { Text } from '@/components/ui';
import { organicBorderRadius } from '@/lib/organic-styles';

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 {
      const issueTitle = encodeURIComponent(
        `[Bug] Error Report: ${error?.name || 'Unknown Error'}`
      );
      const issueBody = encodeURIComponent(
        `**Error Details**\nMessage: ${error?.message || 'No message'}\n\n**Component Stack**\n\`\`\`\n${componentStack || 'No stack trace'}\n\`\`\``
      );
      const url = `https://github.com/agentic-dev-library/thumbcode/issues/new?title=${issueTitle}&body=${issueBody}`;

      Linking.openURL(url).catch((err) => {
        console.error('Failed to open issue URL:', err);
        Alert.alert('Report Issue', 'Could not open GitHub issues page.');
      });
    }
  };

  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={organicBorderRadius.hero}
          >
            <ErrorIcon size={40} color="coral" turbulence={0.25} />
          </View>

          {/* Error Title */}
          <Text
            size="xl"
            weight="bold"
            className="text-white text-center font-display"
            testID="error-title"
            accessibilityRole="header"
          >
            {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={organicBorderRadius.card}>
              <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={organicBorderRadius.cta}
            >
              <Text weight="semibold" className="text-white">
                Try Again
              </Text>
            </Pressable>
          )}

          {/* Secondary Action */}
          <Pressable className="py-2" onPress={handleReportIssue} testID="report-issue-button">
            <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={organicBorderRadius.card}>
      <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	* Uses paint daube icons for brand consistency.
7	*/
8
9	import { Alert, Linking, Pressable, View } from 'react-native';
10	import { useSafeAreaInsets } from 'react-native-safe-area-context';
11	import { ErrorIcon } from '@/components/icons';
12	import { Container, VStack } from '@/components/layout';
13	import { Text } from '@/components/ui';
14	import { organicBorderRadius } from '@/lib/organic-styles';
15
16	interface ErrorFallbackProps {
17	error: Error \| null;
18	componentStack?: string \| null;
19	onRetry?: () => void;
20	onReportIssue?: () => void;
21	title?: string;
22	message?: string;
23	}
24
25	export function ErrorFallback({
26	error,
27	componentStack,
28	onRetry,
29	onReportIssue,
30	title = 'Something went wrong',	1✔
31	message = "We're sorry, but something unexpected happened. Please try again.",	1✔
32	}: ErrorFallbackProps) {
33	const insets = useSafeAreaInsets();	1✔
34	const isDev = __DEV__;	1✔
35
36	const handleReportIssue = () => {	1✔
37	if (onReportIssue) {	×
38	onReportIssue();	×
39	} else {
NEW 40	const issueTitle = encodeURIComponent(	×
41	`[Bug] Error Report: ${error?.name \|\| 'Unknown Error'}`	×
42	);
NEW 43	const issueBody = encodeURIComponent(	×
44	`Error Details\nMessage: ${error?.message \|\| 'No message'}\n\nComponent Stack\n\`\`\`\n${componentStack \|\| 'No stack trace'}\n\`\`\``	×
45	);
NEW 46	const url = `https://github.com/agentic-dev-library/thumbcode/issues/new?title=${issueTitle}&body=${issueBody}`;	×
47
NEW 48	Linking.openURL(url).catch((err) => {	×
NEW 49	console.error('Failed to open issue URL:', err);	×
NEW 50	Alert.alert('Report Issue', 'Could not open GitHub issues page.');	×
51	});
52	}
53	};
54
55	return (	1✔
56	<View
57	className="flex-1 bg-charcoal"
58	style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}
59	>
60	<Container padding="lg" className="flex-1 justify-center">
61	<VStack spacing="lg" align="center">
62	{/* Error Icon */}
63	<View
64	className="w-20 h-20 bg-coral-500/20 items-center justify-center"
65	style={organicBorderRadius.hero}
66	>
67	<ErrorIcon size={40} color="coral" turbulence={0.25} />
68	</View>
69
70	{/* Error Title */}
71	<Text
72	size="xl"
73	weight="bold"
74	className="text-white text-center font-display"
75	testID="error-title"
76	accessibilityRole="header"
77	>
78	{title}
79	</Text>
80
81	{/* Error Message */}
82	<Text className="text-neutral-400 text-center max-w-xs">{message}</Text>
83
84	{/* Dev-only Error Details */}
85	{isDev && error && (	3✔
86	<View className="bg-surface p-4 w-full max-w-sm" style={organicBorderRadius.card}>
87	<Text size="sm" weight="semibold" className="text-coral-500 mb-2">
88	Debug Info
89	</Text>
90	<Text size="sm" className="text-neutral-400 font-mono mb-2">
91	{error.name}: {error.message}
92	</Text>
93	{componentStack && (	2✔
94	<Text size="xs" className="text-neutral-500 font-mono" numberOfLines={8}>
95	{componentStack}
96	</Text>
97	)}
98	</View>
99	)}
100
101	{/* Retry Button */}
102	{onRetry && (	1!
103	<Pressable
104	onPress={onRetry}
105	className="bg-coral-500 px-8 py-3 active:bg-coral-600"
106	style={organicBorderRadius.cta}
107	>
108	<Text weight="semibold" className="text-white">
109	Try Again
110	</Text>
111	</Pressable>
112	)}
113
114	{/* Secondary Action */}
115	<Pressable className="py-2" onPress={handleReportIssue} testID="report-issue-button">
116	<Text size="sm" className="text-teal-500">
117	Report Issue
118	</Text>
119	</Pressable>
120	</VStack>
121	</Container>
122	</View>
123	);
124	}
125
126	/**
127	* Compact error fallback for inline use
128	*/
129	interface CompactErrorFallbackProps {
130	message?: string;
131	onRetry?: () => void;
132	}
133
134	export function CompactErrorFallback({
135	message = 'Failed to load',	×
136	onRetry,
137	}: CompactErrorFallbackProps) {
138	return (	×
139	<View className="bg-surface/50 p-4" style={organicBorderRadius.card}>
140	<VStack spacing="sm" align="center">
141	<Text size="sm" className="text-neutral-400">
142	{message}
143	</Text>
144	{onRetry && (	×
145	<Pressable onPress={onRetry}>
146	<Text size="sm" className="text-teal-500">
147	Tap to retry
148	</Text>
149	</Pressable>
150	)}
151	</VStack>
152	</View>
153	);
154	}

agentic-dev-library / thumbcode / 21409318999

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