debug: add error boundary and simple fallback to test basic rendering

Author: SeddikBellamine

src/components/ErrorBoundary.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends React.Component<
+  React.PropsWithChildren<object>,
+  ErrorBoundaryState
+> {
+  constructor(props: React.PropsWithChildren<object>) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    console.error('ErrorBoundary: Caught error:', error);
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('ErrorBoundary: Error details:', {
+      error: error.message,
+      stack: error.stack,
+      componentStack: errorInfo.componentStack
+    });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: '20px', color: 'red' }}>
+          <h1>Something went wrong.</h1>
+          <pre>{this.state.error?.message}</pre>
+          <pre>{this.state.error?.stack}</pre>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+} 

src/components/SimpleFallback.tsx

@@ -0,0 +1,20 @@
+export function SimpleFallback() {
+  console.log('SimpleFallback: Rendering fallback component');
+  
+  return (
+    <div style={{ 
+      padding: '20px', 
+      backgroundColor: 'white', 
+      color: 'black',
+      minHeight: '100vh',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }}>
+      <h1>Simple Fallback Component</h1>
+      <p>This is a test component to see if basic rendering works.</p>
+      <p>If you can see this, the app can render basic content.</p>
+    </div>
+  );
+} 

src/main.tsx

@@ -13,6 +13,8 @@ import { Toaster } from './components/ui/toaster.tsx';
 import './index.css';
 import { router } from './router.tsx';
 import { wagmiAdapter } from './utils/wagmiConfig.ts';
+import { ErrorBoundary } from './components/ErrorBoundary.tsx';
+import { SimpleFallback } from './components/SimpleFallback.tsx';
 
 console.log('Starting app initialization...');
 
@@ -36,17 +38,9 @@ try {
 
   ReactDOM.createRoot(rootElement).render(
     <React.StrictMode>
-      <WagmiProvider config={wagmiAdapter.wagmiConfig}>
-        <QueryClientProvider client={queryClient}>
-          <ConditionalRollbarWrapper
-            rollbar={rollbar}
-            rollbarConfig={rollbarConfig}
-          >
-            <RouterProvider router={router} />
-          </ConditionalRollbarWrapper>
-        </QueryClientProvider>
-      </WagmiProvider>
-      <Toaster />
+      <ErrorBoundary>
+        <SimpleFallback />
+      </ErrorBoundary>
     </React.StrictMode>
   );
   console.log('App rendered successfully');