Merge pull request #43 from estyemma/console

Updated: Improve Console Logging Strategy

Author: LaGodxy

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>

pnpm-lock.yaml

@@ -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/api/errors/route.ts

@@ -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/app/page.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/ChainAwareProps.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/ClientProviders.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/ErrorBoundary.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/PerformanceMonitor.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/PropertySearch.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);
     }
   };