pezkuwichain/pwap
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pwap.git synced 2026-06-09 20:11:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement comprehensive error handling system

Browse Source 
- shared/lib/error-handler.ts: Substrate error → user-friendly EN/KMR messages
  * Maps 30+ blockchain error types (Staking, Identity, Tiki, ValidatorPool, DEX, Governance)
  * extractDispatchError() - Parse Substrate DispatchError
  * getUserFriendlyError() - Convert to bilingual messages
  * handleBlockchainError() - Toast helper with auto language detection
  * SUCCESS_MESSAGES - Success templates with {{param}} interpolation

- web/src/components/ErrorBoundary.tsx: Global React error boundary
  * Catches unhandled React errors with fallback UI
  * Error details with stack trace (developer mode)
  * Try Again / Reload Page / Go Home buttons
  * RouteErrorBoundary - Smaller boundary for individual routes
  * Support email link (info@pezkuwichain.io)

- shared/components/AsyncComponent.tsx: Async data loading patterns
  * CardSkeleton / ListItemSkeleton / TableSkeleton - Animated loading states
  * LoadingState - Kurdistan green spinner with custom message
  * ErrorState - Red alert with retry button
  * EmptyState - Empty inbox icon with optional action
  * AsyncComponent<T> - Generic wrapper handling Loading/Error/Empty/Success states

- web/src/App.tsx: Wrapped with ErrorBoundary
  * All React errors now caught gracefully
  * Beautiful fallback UI instead of white screen of death

Production-ready error handling with bilingual support (EN/KMR).
This commit is contained in:
Claude
2025-11-16 21:58:05 +00:00
parent b4fa23321e
commit 385039e228
4 changed files with 949 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/App.tsx
+51 -48
View File
@@ -19,61 +19,64 @@ import { AuthProvider } from '@/contexts/AuthContext';
import { ProtectedRoute } from '@/components/ProtectedRoute';
import NotFound from '@/pages/NotFound';
import { Toaster } from '@/components/ui/toaster';
import { ErrorBoundary } from '@/components/ErrorBoundary';
import './App.css';
import './i18n/config';
function App() {
return (
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<AuthProvider>
<AppProvider>
<PolkadotProvider endpoint="ws://127.0.0.1:9944">
<WalletProvider>
<WebSocketProvider>
<IdentityProvider>
<Router>
<Routes>
<Route path="/login" element={<Login />} />
<ErrorBoundary>
<AuthProvider>
<AppProvider>
<PolkadotProvider endpoint="ws://127.0.0.1:9944">
<WalletProvider>
<WebSocketProvider>
<IdentityProvider>
<Router>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/email-verification" element={<EmailVerification />} />
<Route path="/reset-password" element={<PasswordReset />} />
<Route path="/" element={<Index />} />
<Route path="/be-citizen" element={<BeCitizen />} />
<Route path="/dashboard" element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
} />
<Route path="/profile/settings" element={
<ProtectedRoute>
<ProfileSettings />
</ProtectedRoute>
} />
<Route path="/admin" element={
<ProtectedRoute requireAdmin>
<AdminPanel />
</ProtectedRoute>
} />
<Route path="/wallet" element={
<ProtectedRoute>
<WalletDashboard />
</ProtectedRoute>
} />
<Route path="/reserves" element={
<ProtectedRoute>
<ReservesDashboardPage />
</ProtectedRoute>
} />
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
</IdentityProvider>
</WebSocketProvider>
</WalletProvider>
</PolkadotProvider>
</AppProvider>
</AuthProvider>
<Toaster />
<Route path="/email-verification" element={<EmailVerification />} />
<Route path="/reset-password" element={<PasswordReset />} />
<Route path="/" element={<Index />} />
<Route path="/be-citizen" element={<BeCitizen />} />
<Route path="/dashboard" element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
} />
<Route path="/profile/settings" element={
<ProtectedRoute>
<ProfileSettings />
</ProtectedRoute>
} />
<Route path="/admin" element={
<ProtectedRoute requireAdmin>
<AdminPanel />
</ProtectedRoute>
} />
<Route path="/wallet" element={
<ProtectedRoute>
<WalletDashboard />
</ProtectedRoute>
} />
<Route path="/reserves" element={
<ProtectedRoute>
<ReservesDashboardPage />
</ProtectedRoute>
} />
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
</IdentityProvider>
</WebSocketProvider>
</WalletProvider>
</PolkadotProvider>
</AppProvider>
</AuthProvider>
<Toaster />
</ErrorBoundary>
</ThemeProvider>
);
}