Fix external wallet extension script conflicts and console noise - Enhanced error handling system

Co-authored-by: 0xrinegade <[email protected]>

Author: Copilot

src/components/EnhancedErrorBoundary.js

@@ -0,0 +1,162 @@
+/**
+ * Enhanced Error Boundary Component
+ * 
+ * Provides comprehensive error handling for React components
+ * with special handling for external script conflicts
+ */
+
+import React from 'react';
+import { classifyError, shouldSuppressError, logError, ERROR_CATEGORIES } from '../utils/errorHandling';
+
+class EnhancedErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      errorCategory: null,
+      retryCount: 0
+    };
+  }
+
+  static getDerivedStateFromError(error) {
+    const category = classifyError(error);
+    
+    // Don't show error boundary for external errors
+    if (shouldSuppressError(error)) {
+      return null;
+    }
+    
+    return {
+      hasError: true,
+      error,
+      errorCategory: category
+    };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    const category = classifyError(error);
+    
+    // Log error with appropriate level based on category
+    if (category === ERROR_CATEGORIES.APPLICATION) {
+      logError(error, 'ErrorBoundary caught application error');
+      this.setState({
+        error,
+        errorInfo,
+        errorCategory: category
+      });
+    } else {
+      // External errors - just log for debugging
+      logError(error, 'ErrorBoundary caught external error', 'debug');
+    }
+  }
+
+  handleRetry = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      errorCategory: null,
+      retryCount: this.state.retryCount + 1
+    });
+  }
+
+  handleReload = () => {
+    window.location.reload();
+  }
+
+  render() {
+    if (this.state.hasError) {
+      const { error, errorCategory, retryCount } = this.state;
+      const { fallback: FallbackComponent } = this.props;
+      
+      // If a custom fallback is provided, use it
+      if (FallbackComponent) {
+        return React.isValidElement(FallbackComponent) ? 
+          FallbackComponent : 
+          <FallbackComponent 
+            error={error} 
+            errorCategory={errorCategory}
+            onRetry={this.handleRetry}
+            onReload={this.handleReload}
+            retryCount={retryCount}
+          />;
+      }
+
+      // Default error UI based on error category
+      return (
+        <div className="error-boundary min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+          <div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mx-4">
+            <div className="flex items-center mb-4">
+              <div className="flex-shrink-0">
+                <svg className="h-8 w-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 15.5c-.77.833.192 2.5 1.732 2.5z" />
+                </svg>
+              </div>
+              <div className="ml-3">
+                <h3 className="text-lg font-medium text-gray-900 dark:text-white">
+                  Application Error
+                </h3>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  {errorCategory === ERROR_CATEGORIES.NETWORK_CONNECTION ? 
+                    'Connection error occurred' :
+                    'Something went wrong'
+                  }
+                </p>
+              </div>
+            </div>
+            
+            {process.env.NODE_ENV === 'development' && (
+              <div className="mb-4 p-3 bg-gray-100 dark:bg-gray-700 rounded text-xs">
+                <div className="font-mono text-red-600 dark:text-red-400">
+                  {error?.message || 'Unknown error'}
+                </div>
+                {error?.stack && (
+                  <details className="mt-2">
+                    <summary className="cursor-pointer text-gray-600 dark:text-gray-300">
+                      Stack trace
+                    </summary>
+                    <pre className="mt-1 text-gray-500 dark:text-gray-400 overflow-auto">
+                      {error.stack}
+                    </pre>
+                  </details>
+                )}
+              </div>
+            )}
+            
+            <div className="flex space-x-3">
+              {retryCount < 3 && (
+                <button
+                  onClick={this.handleRetry}
+                  className="flex-1 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                >
+                  Try Again {retryCount > 0 && `(${retryCount + 1})`}
+                </button>
+              )}
+              
+              <button
+                onClick={this.handleReload}
+                className="flex-1 bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+              >
+                Reload Page
+              </button>
+            </div>
+            
+            {errorCategory === ERROR_CATEGORIES.NETWORK_CONNECTION && (
+              <div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded">
+                <p className="text-sm text-blue-700 dark:text-blue-300">
+                  This appears to be a network connectivity issue. Please check your internet connection and try again.
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default EnhancedErrorBoundary;

src/contexts/PhantomWalletProvider.js

@@ -12,6 +12,7 @@ import { ToastContainer } from '../components/Toast';
 import { ReconnectionModal } from '../components/ReconnectionModal';
 import { SVM_NETWORKS, getNetworkConfig, getDefaultNetworkConfig } from '../config/networks';
 import { ERROR_CATEGORIES } from '../hooks/useToast';
+import { safeExecute, logError } from '../utils/errorHandling';
 
 // Maximum number of reconnection attempts
 const MAX_RECONNECT_ATTEMPTS = 3;
@@ -151,40 +152,46 @@ const PhantomWalletProvider = ({ children }) => {
     return baseDelay + (baseDelay * jitter);
   }, []);
 
-  // Detect Phantom wallet
+  // Detect Phantom wallet with error protection
   const detectPhantomWallet = useCallback(() => {
-    if (typeof window === 'undefined') return null;
-    
-    // Check for Phantom's Solana provider
-    if (window.phantom?.solana) {
-      return window.phantom.solana;
-    }
-    
-    // Check for legacy solana provider
-    if (window.solana?.isPhantom) {
-      return window.solana;
-    }
-    
-    return null;
+    return safeExecute(() => {
+      if (typeof window === 'undefined') return null;
+      
+      // Check for Phantom's Solana provider
+      if (window.phantom?.solana) {
+        return window.phantom.solana;
+      }
+      
+      // Check for legacy solana provider
+      if (window.solana?.isPhantom) {
+        return window.solana;
+      }
+      
+      return null;
+    }, 'detectPhantomWallet', null);
   }, []);
 
-  // Connect to Phantom wallet
+  // Connect to Phantom wallet with enhanced error handling
   const connect = useCallback(async () => {
     try {
       setConnecting(true);
       setError(null);
       setConnectionState('connecting');
 
-      const phantomWallet = detectPhantomWallet();
+      const phantomWallet = await detectPhantomWallet();
 
       if (!phantomWallet) {
         throw new Error('Phantom wallet not found. Please install Phantom browser extension.');
       }
 
-      // Connect to Phantom
-      const response = await phantomWallet.connect();
+      // Connect to Phantom with safe execution
+      const response = await safeExecute(
+        () => phantomWallet.connect(),
+        'phantom-wallet-connect',
+        null
+      );
 
-      if (response.publicKey) {
+      if (response?.publicKey) {
         const pubKey = new PublicKey(response.publicKey.toString());
         const address = pubKey.toString();
 
@@ -207,7 +214,7 @@ const PhantomWalletProvider = ({ children }) => {
         throw new Error('Failed to get public key from Phantom wallet');
       }
     } catch (err) {
-      console.error('[PhantomWalletProvider] Connection failed:', err);
+      logError(err, 'PhantomWalletProvider connection');
       const errorMsg = err.message || 'Failed to connect to Phantom wallet';
       setError(errorMsg);
       setConnectionState('error');
@@ -245,9 +252,9 @@ const PhantomWalletProvider = ({ children }) => {
     }
   }, [detectPhantomWallet, toast]);
 
-  // Disconnect from Phantom wallet
+  // Disconnect from Phantom wallet with error protection
   const disconnect = useCallback(async () => {
-    try {
+    return safeExecute(async () => {
       if (wallet && wallet.disconnect) {
         await wallet.disconnect();
       }
@@ -268,12 +275,12 @@ const PhantomWalletProvider = ({ children }) => {
       });
 
       console.log('[PhantomWalletProvider] Disconnected from Phantom wallet');
-    } catch (err) {
-      console.error('[PhantomWalletProvider] Disconnect failed:', err);
+    }, 'phantom-wallet-disconnect').catch((err) => {
+      logError(err, 'PhantomWalletProvider disconnect');
       const errorMsg = err.message || 'Disconnect failed';
       setError(errorMsg);
       toast.criticalError(`Disconnect failed: ${errorMsg}`);
-    }
+    });
   }, [wallet, toast]);
 
   // Sign transaction
@@ -483,11 +490,11 @@ const PhantomWalletProvider = ({ children }) => {
     console.log('[PhantomWalletProvider] Reconnection cancelled by user');
   }, []);
 
-  // Check for existing connection on mount
+  // Check for existing connection on mount with error protection
   useEffect(() => {
     const checkExistingConnection = async () => {
-      try {
-        const phantomWallet = detectPhantomWallet();
+      return safeExecute(async () => {
+        const phantomWallet = await detectPhantomWallet();
         const wasConnected = localStorage.getItem('phantomConnected') === 'true';
 
         if (phantomWallet && wasConnected) {
@@ -509,41 +516,50 @@ const PhantomWalletProvider = ({ children }) => {
             localStorage.removeItem('phantomAddress');
           }
         }
-      } catch (error) {
-        console.warn('[PhantomWalletProvider] Failed to restore connection:', error);
+      }, 'phantom-wallet-restore-connection').catch((error) => {
+        logError(error, 'PhantomWalletProvider restore connection');
         localStorage.removeItem('phantomConnected');
         localStorage.removeItem('phantomAddress');
-      }
+      });
     };
 
     checkExistingConnection();
   }, [detectPhantomWallet]);
 
-  // Listen for account changes
+  // Listen for account changes with error protection
   useEffect(() => {
     if (wallet && connected) {
       const handleAccountChanged = (publicKey) => {
-        if (publicKey) {
-          const pubKey = new PublicKey(publicKey.toString());
-          const address = pubKey.toString();
-          
-          setPublicKey(pubKey);
-          setWalletAddress(address);
-          localStorage.setItem('phantomAddress', address);
-          
-          toast.info('Phantom wallet account changed', { 
-            category: ERROR_CATEGORIES.SUCCESS 
-          });
-        } else {
-          // Account disconnected
-          disconnect();
-        }
+        safeExecute(() => {
+          if (publicKey) {
+            const pubKey = new PublicKey(publicKey.toString());
+            const address = pubKey.toString();
+            
+            setPublicKey(pubKey);
+            setWalletAddress(address);
+            localStorage.setItem('phantomAddress', address);
+            
+            toast.info('Phantom wallet account changed', { 
+              category: ERROR_CATEGORIES.SUCCESS 
+            });
+          } else {
+            // Account disconnected
+            disconnect();
+          }
+        }, 'phantom-wallet-account-change').catch((error) => {
+          logError(error, 'PhantomWalletProvider account change handler');
+        });
       };
 
-      wallet.on('accountChanged', handleAccountChanged);
+      // Safe event listener attachment
+      safeExecute(() => {
+        wallet.on('accountChanged', handleAccountChanged);
+      }, 'phantom-wallet-event-listener');
 
       return () => {
-        wallet.off('accountChanged', handleAccountChanged);
+        safeExecute(() => {
+          wallet.off('accountChanged', handleAccountChanged);
+        }, 'phantom-wallet-event-cleanup');
       };
     }
   }, [wallet, connected, disconnect, toast]);

src/pages/_app.js

@@ -5,6 +5,9 @@ import dynamic from 'next/dynamic';
 import { initWebVitals } from '@/utils/webVitals';
 import { analyzeBundleSize } from '@/utils/lazyLoading';
 
+// Import error handling for external script conflicts
+import { setupGlobalErrorHandling } from '@/utils/errorHandling';
+
 // Import styles - order matters for CSS
 // IMPORTANT: In CSS files, all @import statements must be at the top of the file
 // with proper formatting and line breaks between them and the first CSS rule.
@@ -33,13 +36,16 @@ import { PhantomWalletProvider } from '@/contexts/PhantomWalletProvider';
 // Import Layout
 import Layout from '@/components/Layout';
 
-// Dynamically import ErrorBoundary to prevent SSR issues
-const ErrorBoundary = dynamic(() => import('@/components/ErrorBoundary'), { ssr: false });
+// Dynamically import EnhancedErrorBoundary to prevent SSR issues
+const ErrorBoundary = dynamic(() => import('@/components/EnhancedErrorBoundary'), { ssr: false });
 
 export default function App({ Component, pageProps }) {
 
   // Initialize performance monitoring
   useEffect(() => {
+    // Setup global error handling first to catch external script errors
+    setupGlobalErrorHandling();
+    
     // Initialize Web Vitals monitoring
     initWebVitals();