diff --git a/.changeset/add-error-boundaries.md b/.changeset/add-error-boundaries.md new file mode 100644 index 00000000..70be1cf8 --- /dev/null +++ b/.changeset/add-error-boundaries.md @@ -0,0 +1,7 @@ +--- +"@darkresearch/mallory-client": minor +--- + +Add React Error Boundaries to prevent app crashes + +Implemented error boundaries at three levels (root, feature, component) to provide graceful error handling and prevent the app from crashing to a blank screen. Added `react-error-boundary` package and created reusable ErrorBoundary components with fallback UI. diff --git a/apps/client/__tests__/unit/ErrorBoundary.test.tsx b/apps/client/__tests__/unit/ErrorBoundary.test.tsx new file mode 100644 index 00000000..845fc09a --- /dev/null +++ b/apps/client/__tests__/unit/ErrorBoundary.test.tsx @@ -0,0 +1,48 @@ +/** + * Unit Tests for ErrorBoundary Component Structure + * + * Note: Full rendering tests are skipped because Bun test runner + * doesn't support React Native's Flow syntax out of the box. + * We verify structure and imports instead. + */ + +import { describe, test, expect } from 'bun:test'; +import fs from 'fs'; +import path from 'path'; + +describe('ErrorBoundary Component', () => { + const componentPath = path.join(__dirname, '../../components/ui/ErrorBoundary.tsx'); + const fallbackPath = path.join(__dirname, '../../components/ui/ErrorFallback.tsx'); + + test('should exist', () => { + expect(fs.existsSync(componentPath)).toBe(true); + expect(fs.existsSync(fallbackPath)).toBe(true); + }); + + test('ErrorBoundary should import react-error-boundary', () => { + const content = fs.readFileSync(componentPath, 'utf-8'); + expect(content).toContain('react-error-boundary'); + expect(content).toContain('ErrorBoundary'); + expect(content).toContain('ErrorFallback'); + }); + + test('ErrorBoundary should handle different levels', () => { + const content = fs.readFileSync(componentPath, 'utf-8'); + expect(content).toContain("level = 'component'"); + expect(content).toContain("name = 'Unknown'"); + expect(content).toContain('console.error'); // Should log errors + }); + + test('ErrorFallback should have retry button', () => { + const content = fs.readFileSync(fallbackPath, 'utf-8'); + expect(content).toContain('TouchableOpacity'); + expect(content).toContain('onPress={resetErrorBoundary}'); + expect(content).toContain('Try Again'); + }); + + test('ErrorFallback should handle root level', () => { + const content = fs.readFileSync(fallbackPath, 'utf-8'); + expect(content).toContain("level === 'root'"); + expect(content).toContain('Reload App'); + }); +}); diff --git a/apps/client/app/_layout.tsx b/apps/client/app/_layout.tsx index 02e6f599..6d5a525b 100644 --- a/apps/client/app/_layout.tsx +++ b/apps/client/app/_layout.tsx @@ -13,9 +13,9 @@ import { ActiveConversationProvider } from '../contexts/ActiveConversationContex import { initializeComponentRegistry } from '../components/registry'; import { DataPreloader } from '../components/DataPreloader'; import { ChatManager } from '../components/chat/ChatManager'; -import 'react-native-url-polyfill/auto'; import { Analytics } from '@vercel/analytics/react'; import { SpeedInsights } from '@vercel/speed-insights/react'; +import { ErrorBoundary } from '../components/ui/ErrorBoundary'; // Keep the splash screen visible while we fetch resources SplashScreen.preventAutoHideAsync(); @@ -39,7 +39,7 @@ export default function RootLayout() { // Initialize component registry for dynamic UI console.log('๐Ÿ”ง Initializing component registry...'); initializeComponentRegistry(); - + // Set up status bar for light theme StatusBar.setBarStyle('dark-content'); if (Platform.OS === 'android') { @@ -59,34 +59,36 @@ export default function RootLayout() { } return ( - - - - - - - - - - - {Platform.OS === 'web' && ( - <> - - - - )} - - - - - - - + + + + + + + + + + + + {Platform.OS === 'web' && ( + <> + + + + )} + + + + + + + + ); } \ No newline at end of file diff --git a/apps/client/components/DataPreloader.tsx b/apps/client/components/DataPreloader.tsx index 6eb0127f..5a4a92d3 100644 --- a/apps/client/components/DataPreloader.tsx +++ b/apps/client/components/DataPreloader.tsx @@ -1,5 +1,6 @@ import { useAuth } from '../contexts/AuthContext'; import { useChatHistoryData } from '../hooks/useChatHistoryData'; +import { ErrorBoundary } from './ui/ErrorBoundary'; /** * DataPreloader Component @@ -13,13 +14,24 @@ import { useChatHistoryData } from '../hooks/useChatHistoryData'; * - Real-time subscriptions keep cache fresh * - Doesn't render anything (invisible to user) */ -export function DataPreloader() { +function DataPreloaderInner() { const { user } = useAuth(); - + // Pre-load chat history data in background // This populates the module-level cache in useChatHistoryData useChatHistoryData(user?.id); - + // Don't render anything return null; } + +/** + * DataPreloader with Error Boundary + */ +export function DataPreloader() { + return ( + + + + ); +} diff --git a/apps/client/components/chat/ChatManager.tsx b/apps/client/components/chat/ChatManager.tsx index ac9582a4..0c42e245 100644 --- a/apps/client/components/chat/ChatManager.tsx +++ b/apps/client/components/chat/ChatManager.tsx @@ -20,6 +20,7 @@ import { updateChatCache, clearChatCache, isCacheForConversation } from '../../l import { useAuth } from '../../contexts/AuthContext'; import { useWallet } from '../../contexts/WalletContext'; import { useActiveConversationContext } from '../../contexts/ActiveConversationContext'; +import { ErrorBoundary } from '../ui/ErrorBoundary'; /** * ChatManager props @@ -31,27 +32,27 @@ interface ChatManagerProps { /** * ChatManager component - manages active chat state globally */ -export function ChatManager({}: ChatManagerProps) { +function ChatManagerInner({ }: ChatManagerProps) { const { user } = useAuth(); const { walletData } = useWallet(); const { width: viewportWidth } = useWindowDimensions(); - + // Get conversationId from context instead of internal state const { conversationId: currentConversationId } = useActiveConversationContext(); - + const [initialMessages, setInitialMessages] = useState([]); const [initialMessagesConversationId, setInitialMessagesConversationId] = useState(null); const [isLoadingHistory, setIsLoadingHistory] = useState(false); const previousStatusRef = useRef('ready'); const conversationMessagesSetRef = useRef(null); - + // Extract wallet balance const walletBalance = React.useMemo(() => { if (!walletData?.holdings) return undefined; - + const solHolding = walletData.holdings.find(h => h.tokenSymbol === 'SOL'); const usdcHolding = walletData.holdings.find(h => h.tokenSymbol === 'USDC'); - + return { sol: solHolding?.holdings, usdc: usdcHolding?.holdings, @@ -65,7 +66,7 @@ export function ChatManager({}: ChatManagerProps) { transport: new DefaultChatTransport({ fetch: async (url, options) => { const token = await storage.persistent.getItem(SECURE_STORAGE_KEYS.AUTH_TOKEN); - + const { gridSessionSecrets, gridSession } = await loadGridContextForX402({ getGridAccount: async () => { const account = await gridClientService.getAccount(); @@ -78,13 +79,13 @@ export function ChatManager({}: ChatManagerProps) { return await storage.persistent.getItem(SECURE_STORAGE_KEYS.GRID_SESSION_SECRETS); } }); - + const existingBody = JSON.parse(options?.body as string || '{}'); const enhancedBody = { ...existingBody, ...(gridSessionSecrets && gridSession ? { gridSessionSecrets, gridSession } : {}) }; - + const fetchOptions: any = { ...options, body: JSON.stringify(enhancedBody), @@ -112,18 +113,18 @@ export function ChatManager({}: ChatManagerProps) { // Track previous conversationId to detect changes const previousConversationIdRef = useRef(null); - + // Stop stream and clear cache when conversation changes useEffect(() => { const previousId = previousConversationIdRef.current; - + if (previousId && previousId !== currentConversationId) { console.log('๐Ÿ”„ [ChatManager] Conversation changed:', { from: previousId, to: currentConversationId }); console.log('๐Ÿ›‘ [ChatManager] Stopping previous conversation stream'); stop(); clearChatCache(); } - + previousConversationIdRef.current = currentConversationId; }, [currentConversationId, stop]); @@ -135,14 +136,14 @@ export function ChatManager({}: ChatManagerProps) { console.log(' Current messages.length:', messages.length); console.log(' Current initialMessages.length:', initialMessages.length); console.log('โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”'); - + if (!currentConversationId || currentConversationId === 'temp-loading') { console.log('๐Ÿ” [ChatManager] Skipping history load - invalid conversationId:', currentConversationId); setIsLoadingHistory(false); updateChatCache({ isLoadingHistory: false }); return; } - + // Clear messages immediately when conversation changes to prevent showing old messages console.log('๐Ÿงน [ChatManager] Clearing messages for conversation switch to:', currentConversationId); console.log(' Before clear - messages.length:', messages.length); @@ -153,27 +154,27 @@ export function ChatManager({}: ChatManagerProps) { conversationMessagesSetRef.current = null; // Reset ref so new messages can be set console.log('โœ… [ChatManager] Messages cleared (setMessages([]) and setInitialMessages([]) called)'); console.log('โœ… [ChatManager] Ref and conversationId tracker reset'); - + let isCancelled = false; - + const loadHistory = async () => { setIsLoadingHistory(true); updateChatCache({ isLoadingHistory: true, conversationId: currentConversationId }); - + console.log('๐Ÿ“– [ChatManager] Loading historical messages for conversation:', currentConversationId); - + try { const startTime = Date.now(); - + // Check cache first const cachedMessages = getCachedMessagesForConversation(currentConversationId); - + if (cachedMessages !== null) { console.log('๐Ÿ“ฆ [ChatManager] Using cached messages:', cachedMessages.length, 'messages'); - + const convertedMessages = cachedMessages.map(convertDatabaseMessageToUIMessage); const loadTime = Date.now() - startTime; - + if (!isCancelled) { console.log('โœ… [ChatManager] Loaded cached messages:', { conversationId: currentConversationId, @@ -188,12 +189,12 @@ export function ChatManager({}: ChatManagerProps) { } return; } - + // Cache miss - load from database console.log('๐Ÿ” [ChatManager] Cache miss, loading from database'); const historicalMessages = await loadMessagesFromSupabase(currentConversationId); const loadTime = Date.now() - startTime; - + if (!isCancelled) { console.log('โœ… [ChatManager] Loaded historical messages:', { conversationId: currentConversationId, @@ -217,7 +218,7 @@ export function ChatManager({}: ChatManagerProps) { }; loadHistory(); - + return () => { isCancelled = true; }; @@ -233,16 +234,16 @@ export function ChatManager({}: ChatManagerProps) { console.log(' messages.length:', messages.length); console.log(' conversationId:', currentConversationId); console.log(' conversationMessagesSetRef.current:', conversationMessagesSetRef.current); - + // Only set messages if: // 1. History loading is complete // 2. We have initialMessages to set // 3. InitialMessages are for the CURRENT conversation (prevents React batching bug!) // 4. We haven't already set messages for this conversation - if (!isLoadingHistory && - initialMessages.length > 0 && - initialMessagesConversationId === currentConversationId && - conversationMessagesSetRef.current !== currentConversationId) { + if (!isLoadingHistory && + initialMessages.length > 0 && + initialMessagesConversationId === currentConversationId && + conversationMessagesSetRef.current !== currentConversationId) { console.log('โœ… [ChatManager] CALLING setMessages() with', initialMessages.length, 'messages'); console.log(' First message ID:', initialMessages[0]?.id); console.log(' Last message ID:', initialMessages[initialMessages.length - 1]?.id); @@ -266,10 +267,10 @@ export function ChatManager({}: ChatManagerProps) { // Update cache whenever messages or status changes useEffect(() => { if (!currentConversationId || currentConversationId === 'temp-loading') return; - + // Filter out system messages for display const displayMessages = messages.filter(msg => msg.role !== 'system'); - + console.log('โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”'); console.log('๐Ÿ“ฆ [ChatManager] UPDATING CACHE WITH MESSAGES'); console.log(' conversationId:', currentConversationId); @@ -280,7 +281,7 @@ export function ChatManager({}: ChatManagerProps) { console.log(' Last message:', displayMessages[displayMessages.length - 1]?.id, '-', displayMessages[displayMessages.length - 1]?.role); } console.log('โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”'); - + updateChatCache({ conversationId: currentConversationId, messages: displayMessages, @@ -292,26 +293,26 @@ export function ChatManager({}: ChatManagerProps) { // Update stream state based on status and message content useEffect(() => { if (!currentConversationId || currentConversationId === 'temp-loading') return; - + const displayMessages = messages.filter(msg => msg.role !== 'system'); - + if (status === 'streaming' && displayMessages.length > 0) { const lastMessage = displayMessages[displayMessages.length - 1]; - + if (lastMessage.role === 'assistant') { const hasReasoningParts = lastMessage.parts?.some((p: any) => p.type === 'reasoning'); const messageContent = (lastMessage as any).content; const hasTextContent = messageContent && typeof messageContent === 'string' && messageContent.trim().length > 0; - + // Extract reasoning text const reasoningParts = lastMessage.parts?.filter((p: any) => p.type === 'reasoning') || []; const liveReasoningText = reasoningParts.map((p: any) => p.text || '').join('\n\n'); - + // Update cache with reasoning text updateChatCache({ liveReasoningText, }); - + // Determine stream state if (hasReasoningParts && !hasTextContent) { updateChatCache({ @@ -335,17 +336,17 @@ export function ChatManager({}: ChatManagerProps) { useEffect(() => { const handleSendMessage = (event: Event) => { const { conversationId, message } = (event as CustomEvent).detail; - + // Only handle if it's for our current conversation if (conversationId === currentConversationId) { console.log('๐Ÿ“จ [ChatManager] Received sendMessage event:', message); - + // Update cache to waiting state updateChatCache({ streamState: { status: 'waiting', startTime: Date.now() }, liveReasoningText: '', }); - + // Send message via useChat sendMessage({ text: message }); } @@ -353,7 +354,7 @@ export function ChatManager({}: ChatManagerProps) { const handleStop = (event: Event) => { const { conversationId } = (event as CustomEvent).detail; - + if (conversationId === currentConversationId) { console.log('๐Ÿ›‘ [ChatManager] Received stop event'); stop(); @@ -362,7 +363,7 @@ export function ChatManager({}: ChatManagerProps) { const handleRegenerate = (event: Event) => { const { conversationId } = (event as CustomEvent).detail; - + if (conversationId === currentConversationId) { console.log('๐Ÿ”„ [ChatManager] Received regenerate event'); regenerate(); @@ -384,3 +385,14 @@ export function ChatManager({}: ChatManagerProps) { return null; } +/** + * ChatManager with Error Boundary + */ +export function ChatManager(props: ChatManagerProps) { + return ( + + + + ); +} + diff --git a/apps/client/components/ui/ErrorBoundary.tsx b/apps/client/components/ui/ErrorBoundary.tsx new file mode 100644 index 00000000..31c71f53 --- /dev/null +++ b/apps/client/components/ui/ErrorBoundary.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'; +import { ErrorFallback } from './ErrorFallback'; + +interface ErrorBoundaryProps { + children: React.ReactNode; + level?: 'root' | 'feature' | 'component'; + name?: string; +} + +/** + * Reusable Error Boundary component + * + * Wraps components to catch errors and show fallback UI instead of crashing. + * + * @param level - Error boundary level (root/feature/component) for logging context + * @param name - Component/feature name for error tracking + */ +export function ErrorBoundary({ + children, + level = 'component', + name = 'Unknown' +}: ErrorBoundaryProps) { + const handleError = (error: Error, errorInfo: React.ErrorInfo) => { + // Log error with context + console.error(`[ErrorBoundary:${level}:${name}] Error caught:`, { + error: error.message, + stack: error.stack, + componentStack: errorInfo.componentStack, + timestamp: new Date().toISOString(), + }); + + // TODO: Send to error tracking service (Sentry, LogRocket, etc.) + // Example: Sentry.captureException(error, { tags: { level, name } }); + }; + + return ( + } + onError={handleError} + onReset={() => { + // Optional: Clear any error state, reload data, etc. + console.log(`[ErrorBoundary:${level}:${name}] Reset triggered`); + }} + > + {children} + + ); +} diff --git a/apps/client/components/ui/ErrorFallback.tsx b/apps/client/components/ui/ErrorFallback.tsx new file mode 100644 index 00000000..8c399852 --- /dev/null +++ b/apps/client/components/ui/ErrorFallback.tsx @@ -0,0 +1,152 @@ +import React from 'react'; +import { View, Text, TouchableOpacity, StyleSheet, Platform } from 'react-native'; +import type { FallbackProps } from 'react-error-boundary'; + +interface ErrorFallbackProps extends FallbackProps { + level?: 'root' | 'feature' | 'component'; + name?: string; +} + +/** + * Error Fallback UI Component + * + * Displays user-friendly error message with retry option. + * Different layouts based on error boundary level. + */ +export function ErrorFallback({ + error, + resetErrorBoundary, + level = 'component', + name = 'Unknown' +}: ErrorFallbackProps) { + const isRootLevel = level === 'root'; + const isDev = __DEV__; + + return ( + + + {/* Icon */} + โš ๏ธ + + {/* Title */} + + {isRootLevel ? 'App Error' : 'Something went wrong'} + + + {/* Message */} + + {isRootLevel + ? 'The app encountered an unexpected error. Please try reloading.' + : `There was a problem loading this ${level === 'feature' ? 'feature' : 'component'}.` + } + + + {/* Error details (dev only) */} + {isDev && ( + + {name} + {error.message} + + )} + + {/* Retry button */} + + + {isRootLevel ? 'Reload App' : 'Try Again'} + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + padding: 20, + alignItems: 'center', + justifyContent: 'center', + minHeight: 200, + }, + rootContainer: { + flex: 1, + backgroundColor: '#FFEFE3', + }, + content: { + alignItems: 'center', + maxWidth: 400, + }, + icon: { + fontSize: 48, + marginBottom: 16, + }, + title: { + fontSize: 24, + fontWeight: '600', + color: '#1a1a1a', + marginBottom: 12, + textAlign: 'center', + fontFamily: Platform.select({ + web: 'Satoshi-Bold', + default: 'Satoshi-Bold', + }), + }, + message: { + fontSize: 16, + color: '#666', + marginBottom: 24, + textAlign: 'center', + lineHeight: 24, + fontFamily: Platform.select({ + web: 'Satoshi-Regular', + default: 'Satoshi-Regular', + }), + }, + errorDetails: { + backgroundColor: '#f5f5f5', + padding: 12, + borderRadius: 8, + marginBottom: 24, + width: '100%', + }, + errorName: { + fontSize: 12, + fontWeight: '600', + color: '#d32f2f', + marginBottom: 4, + fontFamily: Platform.select({ + web: 'Satoshi-Medium', + default: 'Satoshi-Medium', + }), + }, + errorMessage: { + fontSize: 12, + color: '#666', + fontFamily: Platform.select({ + web: 'Satoshi-Regular', + default: 'Satoshi-Regular', + }), + }, + button: { + backgroundColor: '#1a1a1a', + paddingHorizontal: 32, + paddingVertical: 14, + borderRadius: 12, + minWidth: 160, + }, + buttonText: { + color: '#fff', + fontSize: 16, + fontWeight: '600', + textAlign: 'center', + fontFamily: Platform.select({ + web: 'Satoshi-Medium', + default: 'Satoshi-Medium', + }), + }, +}); diff --git a/apps/client/package.json b/apps/client/package.json index 16fcf368..3f78cc44 100644 --- a/apps/client/package.json +++ b/apps/client/package.json @@ -119,6 +119,7 @@ "lucide-react": "^0.544.0", "react": "19.1.0", "react-dom": "19.1.0", + "react-error-boundary": "^6.0.0", "react-native": "0.81.4", "react-native-gesture-handler": "^2.28.0", "react-native-markdown-display": "^7.0.2",