Updated: Improve Console Logging Strategy

TODO.md

@@ -0,0 +1,38 @@
+# Fix ESLint Errors Plan
+
+## Files to Edit
+
+### 1. src/app/api/errors/route.ts ✅
+- Change import { NextRequest, NextResponse } to import type { NextRequest } and import { NextResponse }
+- Change import { ErrorReportingData } to import type { ErrorReportingData }
+
+### 2. src/components/error/ARErrorBoundary.tsx ✅
+- Change import React, { Component, ReactNode } to import type { ReactNode }
+- Change import { AppError, ErrorBoundaryState, ErrorRecoveryAction } to import type { AppError, ErrorBoundaryState } and import { ErrorRecoveryAction }
+- Change "ar" as any to ErrorCategory.AR
+- Change errorInfo: any to errorInfo: React.ErrorInfo
+
+### 3. src/components/error/ErrorTestSuite.tsx ✅
+- Change recoveryAction: 'reconnect' as any to ErrorRecoveryAction.RECONNECT
+- Change other recoveryAction strings to enum values
+- Change catch (error: any) to error: unknown
+
+### 4. src/store/base.ts ✅
+- Change import { PersistOptions } to import type { PersistOptions }
+- Change any to unknown in function parameters and catch
+
+### 5. src/store/debug.ts ✅
+- Change all any to unknown or Record<string, unknown> in interfaces and functions
+
+### 6. src/types/errors.ts ✅
+- Change Record<string, any> to Record<string, unknown>
+
+### 7. src/utils/errorFactory.ts ✅
+- Change imports to import type
+- Change any to unknown in error parameters
+
+### 8. src/utils/errorReporting.ts ✅
+- Change imports to import type
+
+### 9. src/utils/i18nFormatting.ts ✅
+- Change Record<string, any> to Record<string, unknown>

src/app/api/errors/route.ts

@@ -1,5 +1,7 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { ErrorReportingData } from '@/types/errors';
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+import type { ErrorReportingData } from '@/types/errors';
+import { logger } from '@/utils/logger';
 
 export async function POST(request: NextRequest) {
   try {
@@ -14,7 +16,7 @@ export async function POST(request: NextRequest) {
     }
 
     // Log error (in production, this would go to your analytics service)
-    console.error('Error Report:', {
+    logger.error('Error Report:', {
       id: body.errorId,
       category: body.category,
       severity: body.severity,
@@ -37,7 +39,7 @@ export async function POST(request: NextRequest) {
     );
 
   } catch (error) {
-    console.error('Error reporting failed:', error);
+    logger.error('Error reporting failed:', error);
     return NextResponse.json(
       { error: 'Internal server error' },
       { status: 500 }

src/app/page.tsx

@@ -13,6 +13,7 @@ import {
   ManualErrorSuppressor,
   globalErrorSuppressor,
 } from "@/utils/manualErrorSuppressor";
+import { logger } from "@/utils/logger";
 import { WalletConnector } from "@/components/WalletConnector";
 import { LanguageSwitcher } from "@/components/LanguageSwitcher";
 import {
@@ -39,13 +40,12 @@ function HomeContent() {
 
     // Make manual suppressor available globally
     window.suppressErrors = () => {
-      console.clear();
-      console.log("🔧 Manual error suppression activated");
+      logger.info('Manual error suppression activated');
     };
   }, []);
 
   const handleSampleTransaction = async () => {
-    console.log("Sample transaction executed");
+    logger.info('Sample transaction executed');
   };
 
   return (

src/components/ChainAwareProps.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 import { useChain } from '@/providers/ChainAwareProvider';
 import { useWalletStore } from '@/store/walletStore';
+import { logger } from '@/utils/logger';
 
 interface ChainAwareProps {
   children: (props: {
@@ -133,7 +134,7 @@ export const TransactionButton: React.FC<TransactionButtonProps> = ({
     try {
       await onTransaction();
     } catch (error) {
-      console.error('Transaction failed:', error);
+      logger.error('Transaction failed:', error);
     } finally {
       setIsPending(false);
     }

src/components/ClientProviders.tsx

@@ -3,15 +3,9 @@
 import { WagmiProvider } from "wagmi";
 import { config } from "@/config/wagmi";
 import { ChainAwareProvider } from "@/providers/ChainAwareProvider";
-import { TransactionMonitor } from "@/components/TransactionMonitor";
-import { NotificationSystem } from "@/components/NotificationSystem";
-import { Toaster } from "@/components/ui/sonner";
+import { PerformanceMonitor } from "@/components/PerformanceMonitor";
 import "@/lib/i18n";
 import dynamic from "next/dynamic";
-import { WagmiProvider } from 'wagmi';
-import { config } from '@/config/wagmi';
-import { ChainAwareProvider } from '@/providers/ChainAwareProvider';
-import { PerformanceMonitor } from "@/components/PerformanceMonitor";
 
 interface ClientProvidersProps {
   children: React.ReactNode;

src/components/ErrorBoundary.tsx

@@ -1,12 +1,16 @@
 "use client";
 
-import React, { Component, ReactNode } from "react";
+import React, { Component } from "react";
+import type { ReactNode, ErrorInfo } from "react";
 import {
   EnhancedErrorBoundary,
   ErrorBoundaryPresets,
 } from "./error/EnhancedErrorBoundary";
-import { AppError, ErrorCategory } from "@/types/errors";
+import type { AppError } from "@/types/errors";
+import { ErrorCategory } from "@/types/errors";
 import { getWalletErrorMessage } from "@/utils/errorHandling";
+import { logger } from "@/utils/logger";
+import { ErrorFactory } from "@/utils/errorFactory";
 
 interface Props {
   children: ReactNode;
@@ -33,11 +37,11 @@ export class ErrorBoundary extends Component<Props, State> {
   }
 
   static getDerivedStateFromError(error: Error): Partial<State> {
-    return { hasError: true, error };
+    return { hasError: true, error: ErrorFactory.fromError(error, ErrorCategory.UI) };
   }
 
-  componentDidCatch(error: Error, errorInfo: React.ComponentDidCatchInfo) {
-    console.error("ErrorBoundary caught an error:", error, errorInfo);
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    logger.error("ErrorBoundary caught an error:", { error, errorInfo });
   }
 
   render() {

src/components/PerformanceMonitor.tsx

@@ -18,7 +18,7 @@ function getRating(name: string, value: number): "good" | "needs-improvement" |
   return "needs-improvement";
 }
 
-export function PerformanceMonitor() {
+export function PerformanceMonitor(): React.ReactElement | null {
   const addMetric = usePerformanceStore((state) => state.addMetric);
 
   useReportWebVitals((metric) => {
@@ -78,6 +78,8 @@ export function PerformanceMonitor() {
         resourceObserver.disconnect();
       };
     }
+
+    return;
   }, [addMetric]);
 
   return null;

src/components/PropertySearch.tsx

@@ -4,6 +4,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import { useDebounce } from '@/hooks/useDebounce';
 import { propertyService } from '@/lib/propertyService';
 import type { AutocompleteResult } from '@/types/property';
+import { logger } from '@/utils/logger';
 
 interface PropertySearchProps {
   value: string;
@@ -57,7 +58,7 @@ export const PropertySearch: React.FC<PropertySearchProps> = ({
       const results = await propertyService.getAutocompleteSuggestions(query);
       setSuggestions(results);
     } catch (error) {
-      console.error('Failed to fetch suggestions:', error);
+      logger.error('Failed to fetch suggestions:', error);
       setSuggestions([]);
     } finally {
       setIsLoading(false);

src/components/WalletConnector.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react';
 import dynamic from "next/dynamic";
 import { useWalletStore } from '@/store/walletStore';
 import { useChain } from '@/providers/ChainAwareProvider';
+import { logger } from '@/utils/logger';
 
 const WalletModal = dynamic(
   () => import("./WalletModal").then((m) => m.WalletModal),
@@ -50,7 +51,7 @@ export const WalletConnector: React.FC = () => {
         setBalance(balanceInEth.toFixed(4));
       }
     } catch (error) {
-      console.error('Failed to fetch balance:', error);
+      logger.error('Failed to fetch balance:', error);
     }
   };
 

src/components/error/ARErrorBoundary.tsx

@@ -1,17 +1,16 @@
 "use client";
 
-import React, { Component, ReactNode } from "react";
+import React, { Component } from "react";
+import type { ReactNode } from "react";
 import { Camera, Smartphone, AlertTriangle, RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import {
-  AppError,
-  ErrorBoundaryState,
-  ErrorRecoveryAction,
-} from "@/types/errors";
+import type { AppError, ErrorBoundaryState } from "@/types/errors";
+import { ErrorRecoveryAction, ErrorCategory } from "@/types/errors";
 import { ErrorFactory } from "@/utils/errorFactory";
 import { errorReporting } from "@/utils/errorReporting";
 import { useTranslation } from "react-i18next";
+import { logger } from "@/utils/logger";
 
 interface Props {
   children: ReactNode;
@@ -53,17 +52,17 @@ export class ARErrorBoundary extends Component<Props, State> {
   }
 
   static getDerivedStateFromError(error: Error): Partial<State> {
-    const appError = ErrorFactory.fromError(error, "ar" as any);
+    const appError = ErrorFactory.fromError(error, ErrorCategory.AR);
     return {
       hasError: true,
       error: appError,
       errorId: appError.id,
     };
   }
 
-  componentDidCatch(error: Error, errorInfo: any) {
-    const appError = ErrorFactory.fromError(error, "ar" as any, {
-      componentStack: errorInfo.componentStack,
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    const appError = ErrorFactory.fromError(error, ErrorCategory.AR, {
+      componentStack: errorInfo.componentStack ?? undefined,
       context: {
         errorBoundary: "ARErrorBoundary",
         errorInfo,
@@ -154,7 +153,7 @@ export class ARErrorBoundary extends Component<Props, State> {
         }));
       }
     } catch (recoveryError) {
-      console.error("AR recovery failed:", recoveryError);
+      logger.error("AR recovery failed:", recoveryError);
       this.setState({ isRecovering: false });
     }
   };
@@ -169,7 +168,7 @@ export class ARErrorBoundary extends Component<Props, State> {
       // Retry AR initialization after permission granted
       this.handleRetry();
     } catch (error) {
-      console.error("Camera permission denied:", error);
+      logger.error("Camera permission denied:", error);
     }
   };
 
@@ -188,7 +187,7 @@ export class ARErrorBoundary extends Component<Props, State> {
     // Show AR support warning if AR is not supported
     if (!this.state.isARSupported && !this.state.hasError) {
       return (
-        <div className="min-h-[400px] flex items-center justify-center p-4">
+        <div className="min-h-100 flex items-center justify-center p-4">
           <div className="max-w-lg w-full bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-6">
             <div className="text-center">
               <div className="w-16 h-16 bg-yellow-100 dark:bg-yellow-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
@@ -243,7 +242,7 @@ export class ARErrorBoundary extends Component<Props, State> {
       }
 
       return (
-        <div className="min-h-[400px] flex items-center justify-center p-4">
+        <div className="min-h-100 flex items-center justify-center p-4">
           <div className="max-w-lg w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-purple-200 dark:border-purple-800">
             <div className="p-6">
               {/* Error Header */}

src/components/error/EnhancedErrorBoundary.tsx

@@ -1,7 +1,9 @@
 'use client';
 
-import React, { Component, ReactNode } from 'react';
-import { AppError, ErrorCategory, ErrorSeverity } from '@/types/errors';
+import React, { Component } from 'react';
+import type { ReactNode, ErrorInfo } from 'react';
+import { ErrorCategory } from '@/types/errors';
+import type { AppError } from '@/types/errors';
 import { Web3ErrorBoundary } from './Web3ErrorBoundary';
 import { NetworkErrorBoundary } from './NetworkErrorBoundary';
 import { ARErrorBoundary } from './ARErrorBoundary';
@@ -44,9 +46,9 @@ export class EnhancedErrorBoundary extends Component<Props, State> {
     };
   }
 
-  componentDidCatch(error: Error, errorInfo: React.ComponentDidCatchInfo) {
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     const appError = ErrorFactory.fromError(error, this.props.category, {
-      componentStack: errorInfo.componentStack,
+      componentStack: errorInfo.componentStack || undefined,
       context: {
         errorBoundary: 'EnhancedErrorBoundary',
         errorInfo,
@@ -62,7 +64,7 @@ export class EnhancedErrorBoundary extends Component<Props, State> {
     }
   }
 
-  private getErrorBoundary = () => {
+  private getErrorBoundary = (): ReactNode => {
     const { category, ...commonProps } = this.props;
 
     // If category is specified, use the specific boundary