diff --git a/docs/ERROR_HANDLING.md b/docs/ERROR_HANDLING.md deleted file mode 100644 index 0fd8b856..00000000 --- a/docs/ERROR_HANDLING.md +++ /dev/null @@ -1,470 +0,0 @@ -# Error Handling Implementation Guide - -## Overview - -PropChain now implements a comprehensive error handling strategy with contextual error boundaries, recovery mechanisms, and analytics integration. This system provides users with clear error messages and actionable recovery options while enabling developers to diagnose and fix issues efficiently. - -## Architecture - -### Core Components - -1. **Error Types & Categories** (`src/types/errors.ts`) - - Structured error classification system - - Severity levels and recovery actions - - Comprehensive error metadata - -2. **Error Factory** (`src/utils/errorFactory.ts`) - - Centralized error creation - - User-friendly message generation - - Context-aware error categorization - -3. **Error Reporting Service** (`src/utils/errorReporting.ts`) - - Analytics integration - - Recovery mechanism orchestration - - Error metrics and tracking - -4. **Contextual Error Boundaries** (`src/components/error/`) - - Domain-specific error handling - - Tailored recovery strategies - - Graceful degradation support - -## Error Categories - -### Web3 Errors -- **Category**: `web3` -- **Severity**: High -- **Common Causes**: Wallet connection failures, transaction errors, network issues -- **Recovery Actions**: Reconnect wallet, switch network, reload page -- **Boundary**: `Web3ErrorBoundary` - -### Network Errors -- **Category**: `network` -- **Severity**: Medium -- **Common Causes**: Connection timeouts, API failures, offline status -- **Recovery Actions**: Retry with exponential backoff, refresh data, reload page -- **Boundary**: `NetworkErrorBoundary` - -### AR/VR Errors -- **Category**: `ar` -- **Severity**: Medium -- **Common Causes**: Camera permission denied, device incompatibility, WebXR errors -- **Recovery Actions**: Grant permissions, check device compatibility, ignore -- **Boundary**: `ARErrorBoundary` - -### UI Errors -- **Category**: `ui` -- **Severity**: Low -- **Common Causes**: Component failures, rendering errors, state issues -- **Recovery Actions**: Refresh component, retry operation, go home -- **Boundary**: `UIErrorBoundary` - -### Validation Errors -- **Category**: `validation` -- **Severity**: Low -- **Common Causes**: Invalid input, form validation failures -- **Recovery Actions**: Retry with corrected input, show validation hints -- **Boundary**: `UIErrorBoundary` - -### Permission Errors -- **Category**: `permission` -- **Severity**: Medium -- **Common Causes**: Camera/location denied, notification access -- **Recovery Actions**: Request permission, show instructions, ignore -- **Boundary**: `UIErrorBoundary` - -### Resource Errors -- **Category**: `resource` -- **Severity**: Medium -- **Common Causes**: Missing assets, API endpoints unavailable -- **Recovery Actions**: Refresh resource, retry request, use fallback -- **Boundary**: `UIErrorBoundary` - -## Error Severity Levels - -### Critical -- **Impact**: Application completely unusable -- **Action Required**: Immediate attention and reload -- **Examples**: Authentication failures, system crashes - -### High -- **Impact**: Major features unavailable -- **Action Required**: User intervention needed -- **Examples**: Wallet disconnection, network failures - -### Medium -- **Impact**: Some features degraded -- **Action Required**: Recovery options available -- **Examples**: AR errors, permission issues - -### Low -- **Impact**: Minor issues, workarounds available -- **Action Required**: Optional retry -- **Examples**: Validation errors, UI glitches - -## Recovery Strategies - -### Automatic Recovery -```typescript -// The system automatically attempts recovery based on error type -const recovered = await errorReporting.attemptRecovery(error); -``` - -### Recovery Actions - -#### Retry -- **Use Case**: Temporary failures, network timeouts -- **Implementation**: Exponential backoff with maximum attempts -- **User Experience**: Shows retry progress and countdown - -#### Refresh -- **Use Case**: Data stale, component state issues -- **Implementation**: Re-fetch data, re-render component -- **User Experience**: Maintains current page state - -#### Reconnect -- **Use Case**: Wallet disconnection, session expiry -- **Implementation**: Clear session, restart connection flow -- **User Experience**: Seamless reconnection - -#### Reload -- **Use Case**: Critical errors, unrecoverable states -- **Implementation**: Full page refresh -- **User Experience**: Clean slate recovery - -#### Grant Permission -- **Use Case**: Camera/location access denied -- **Implementation**: Trigger browser permission dialog -- **User Experience**: Clear permission request - -#### Switch Network -- **Use Case**: Unsupported network, wrong chain -- **Implementation**: Prompt for network switch -- **User Experience**: Guided network selection - -## Usage Guide - -### Basic Error Boundary Usage - -```tsx -import { ErrorBoundaryPresets } from '@/components/error/EnhancedErrorBoundary'; - -function MyComponent() { - return ( - - - - ); -} -``` - -### Advanced Error Boundary Usage - -```tsx -import { EnhancedErrorBoundary } from '@/components/error/EnhancedErrorBoundary'; -import { ErrorCategory } from '@/types/errors'; - -function MyComponent() { - const handleError = (error: AppError) => { - console.log('Error caught:', error); - // Send to custom analytics - }; - - return ( - , - hideOnError: false, - }} - > - - - ); -} -``` - -### Error Creation - -```typescript -import { ErrorFactory } from '@/utils/errorFactory'; - -// Create specific error types -const web3Error = ErrorFactory.createWeb3Error( - 'Wallet connection failed', - 'Unable to connect to wallet. Please check your wallet extension.', - { - context: { walletType: 'MetaMask' }, - recoveryAction: ErrorRecoveryAction.RECONNECT, - } -); - -const networkError = ErrorFactory.createNetworkError( - 'API timeout', - 'Network request timed out. Please check your connection.', - { - context: { endpoint: '/api/properties', timeout: 30000 }, - recoveryAction: ErrorRecoveryAction.RETRY, - } -); -``` - -### Error Reporting - -```typescript -import { errorReporting } from '@/utils/errorReporting'; - -// Manual error reporting -const error = ErrorFactory.createUIError(...); -errorReporting.reportError(error); - -// Get error metrics -const metrics = errorReporting.getMetrics(); -console.log('Total errors:', metrics.totalErrors); -console.log('Recovery success rate:', metrics.recoverySuccessRate); -``` - -## Graceful Degradation - -### Implementation - -```tsx - -

Feature Limited

-

This feature is partially unavailable. You can continue using other features.

- - ), - hideOnError: false, - }} -> - - -``` - -### Use Cases - -- **AR Features**: Fallback to 2D property viewer -- **Real-time Data**: Show cached data with refresh option -- **Advanced Charts**: Display simplified version -- **File Upload**: Show basic upload form - -## Error Analytics - -### Metrics Tracked - -1. **Error Volume**: Total errors by category and severity -2. **Recovery Success Rate**: Percentage of successful recoveries -3. **Top Errors**: Most frequent error occurrences -4. **Error Patterns**: Temporal and contextual patterns - -### Dashboard Integration - -```typescript -// Error metrics can be displayed in admin dashboards -const ErrorMetrics = () => { - const metrics = errorReporting.getMetrics(); - - return ( -
-

Error Analytics

-

Total Errors: {metrics.totalErrors}

-

Recovery Rate: {(metrics.recoverySuccessRate * 100).toFixed(1)}%

- -

Errors by Category

- {Object.entries(metrics.errorsByCategory).map(([category, count]) => ( -
- {category}: {count} -
- ))} -
- ); -}; -``` - -## Testing - -### Error Test Suite - -Visit `/error-test` to access the comprehensive error testing interface: - -1. **Individual Error Tests**: Test specific error types -2. **Boundary Demonstrations**: See each error boundary in action -3. **Recovery Testing**: Verify recovery mechanisms work -4. **Graceful Degradation**: Test fallback components - -### Manual Testing - -```typescript -// Test error boundaries programmatically -const triggerError = (type: string) => { - switch (type) { - case 'web3': - throw ErrorFactory.createWeb3Error(...); - case 'network': - throw ErrorFactory.createNetworkError(...); - case 'ar': - throw ErrorFactory.createARError(...); - // ... other error types - } -}; -``` - -### Automated Testing - -```typescript -// Jest tests for error boundaries -describe('Error Boundaries', () => { - it('should catch Web3 errors', () => { - const error = ErrorFactory.createWeb3Error('Test', 'Test message'); - expect(error.category).toBe(ErrorCategory.WEB3); - expect(error.severity).toBe(ErrorSeverity.HIGH); - }); - - it('should provide recovery options', () => { - const error = ErrorFactory.createNetworkError('Test', 'Test message'); - expect(error.recoveryAction).toBe(ErrorRecoveryAction.RETRY); - expect(error.isRecoverable).toBe(true); - }); -}); -``` - -## Best Practices - -### For Developers - -1. **Use Specific Boundaries**: Choose the right boundary for each domain -2. **Provide Context**: Include relevant information in error context -3. **Enable Recovery**: Allow users to recover from errors when possible -4. **Test Errors**: Verify error handling works as expected -5. **Monitor Metrics**: Track error rates and recovery success - -### Error Message Guidelines - -1. **Be User-Friendly**: Avoid technical jargon -2. **Be Specific**: Explain what went wrong -3. **Be Actionable**: Tell users what to do next -4. **Be Consistent**: Use similar language across error types -5. **Be Localized**: Support multiple languages - -### Recovery Strategy Guidelines - -1. **Prioritize User Experience**: Minimize disruption -2. **Provide Options**: Offer multiple recovery paths -3. **Show Progress**: Indicate recovery attempts -4. **Limit Attempts**: Prevent infinite retry loops -5. **Fallback Gracefully**: Degrade features when needed - -## Configuration - -### Environment Variables - -```bash -# Enable debug mode for detailed error logging -NEXT_PUBLIC_ERROR_DEBUG=true - -# Configure error reporting endpoint -NEXT_PUBLIC_ERROR_ENDPOINT=https://api.propchain.com/errors - -# Set maximum retry attempts (default: 3) -NEXT_PUBLIC_MAX_RETRIES=3 - -# Enable graceful degradation (default: true) -NEXT_PUBLIC_GRACEFUL_DEGRADATION=true -``` - -### Error Reporting Configuration - -```typescript -// Custom error reporting integration -errorReporting.configure({ - endpoint: '/api/errors', - apiKey: process.env.ERROR_API_KEY, - batchSize: 10, - flushInterval: 30000, - includeStackTrace: process.env.NODE_ENV === 'development', -}); -``` - -## Troubleshooting - -### Common Issues - -1. **Errors Not Caught**: Ensure components are wrapped in appropriate boundaries -2. **Recovery Fails**: Check error context and recovery action configuration -3. **Metrics Not Reporting**: Verify analytics endpoint and network connectivity -4. **Fallback Not Showing**: Check graceful degradation configuration - -### Debug Tools - -1. **Error Test Suite**: Use `/error-test` for comprehensive testing -2. **Browser Console**: Check for detailed error logs in development -3. **Network Tab**: Verify error reporting requests are sent -4. **React DevTools**: Inspect component state during errors - -## Performance Considerations - -### Bundle Impact - -- **Error Boundaries**: ~15KB gzipped -- **Error Factory**: ~8KB gzipped -- **Error Reporting**: ~12KB gzipped -- **Total Overhead**: ~35KB gzipped - -### Runtime Performance - -- **Error Creation**: Minimal overhead, cached error instances -- **Boundary Rendering**: Optimized with memoization -- **Recovery Logic**: Asynchronous, non-blocking -- **Analytics Reporting**: Batched and throttled - -## Security Considerations - -### Data Privacy - -1. **Sanitize Errors**: Remove sensitive information from reports -2. **User Consent**: Inform users about error reporting -3. **Data Minimization**: Only collect necessary error data -4. **Secure Transmission**: Use HTTPS for error reporting - -### Error Information - -1. **No PII**: Never include personal information -2. **Limited Context**: Only relevant technical details -3. **Sanitized Stack Traces**: Remove internal paths and secrets -4. **Rate Limiting**: Prevent error spamming - -## Future Enhancements - -### Planned Features - -1. **Machine Learning**: Error pattern recognition and prediction -2. **Automated Fixes**: Self-healing capabilities for common issues -3. **Enhanced Analytics**: Advanced error correlation and analysis -4. **User Feedback**: In-app error reporting and feedback -5. **Integration Testing**: Automated error boundary testing - -### Scalability - -The current architecture supports: -- Easy addition of new error categories -- Flexible recovery strategy configuration -- Pluggable analytics integration -- Custom error boundary creation - -## Conclusion - -This comprehensive error handling system provides PropChain with: - -- ✅ Contextual error boundaries for all application domains -- ✅ Intelligent recovery mechanisms with user guidance -- ✅ Comprehensive error analytics and reporting -- ✅ Graceful degradation for non-critical features -- ✅ Developer-friendly testing and debugging tools -- ✅ Production-ready error monitoring - -The system significantly improves user experience during error conditions while providing developers with the tools needed to diagnose and fix issues efficiently. diff --git a/src/app/api/transactions/route.ts b/src/app/api/transactions/route.ts new file mode 100644 index 00000000..5d4af90d --- /dev/null +++ b/src/app/api/transactions/route.ts @@ -0,0 +1,17 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { getMockApiTransactions } from '@/lib/mockTransactionData'; + +export async function GET(request: NextRequest) { + const { searchParams } = new URL(request.url); + const walletAddress = searchParams.get('walletAddress')?.trim(); + + if (!walletAddress) { + return NextResponse.json({ error: 'Wallet address required' }, { status: 400 }); + } + + if (walletAddress.length < 6) { + return NextResponse.json({ error: 'Invalid wallet address' }, { status: 400 }); + } + + return NextResponse.json(getMockApiTransactions()); +} diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index c86ed4f7..c0bad99e 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -12,6 +12,7 @@ import { ComplianceAuditLog } from "@/components/kyc/ComplianceAuditLog"; import { KycStatusBadge } from "@/components/kyc/KycStatusBadge"; import { useKycStore } from "@/store/kycStore"; import Link from "next/link"; +import { useTranslation } from "react-i18next"; import { TransactionSecuritySettings } from "@/components/security/TransactionSecuritySettings"; import { Skeleton } from "@/components/ui/skeleton"; @@ -61,6 +62,7 @@ const DataRefreshWrapper = dynamic( ); const Index = () => { + const { t } = useTranslation("common"); const [sidebarOpen, setSidebarOpen] = useState(false); const [activeItem, setActiveItem] = useState("dashboard"); const { profile } = useKycStore(); @@ -142,14 +144,22 @@ const Index = () => { Transaction Queue - Transaction History + Transactions Staking & Yield My Certificates - + +
+ + {t("transactions.viewFullHistory")} → + +
diff --git a/src/app/page.tsx b/src/app/page.tsx index f324170d..77228be3 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -165,9 +165,10 @@ function HomeContent() { {/* Feature links — Issues #75, #76, #85, #89 */} -