Replace console.error with structured logging

.eslintrc.js

@@ -32,6 +32,14 @@ module.exports = {
     'react/jsx-filename-extension': ['error', { extensions: ['.jsx', '.tsx', '.mdx'] }],
     'react/react-in-jsx-scope': 'off',
 
+    // Disallow console statements except in specific files
+    'no-console': [
+      'error',
+      {
+        allow: ['warn', 'info'],
+      },
+    ],
+
     // We utilize prop spreading
     'react/jsx-props-no-spreading': 'off',
 

apps/web/app/(base-org)/jobs/page.tsx

@@ -6,6 +6,7 @@
 import { Hero } from 'apps/web/src/components/Jobs/Redesign/Hero';
 import { WebGLCanvas } from 'apps/web/src/components/WebGL/WebGLCanvas';
 import { greenhouseApiUrl } from 'apps/web/src/constants';
+import { logger } from 'apps/web/src/utils/logger';
 import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -25,7 +26,7 @@
     const { jobs } = (await res.json()) as { jobs: JobType[] };
     return jobs;
   } catch (_error) {
-    console.error(_error);
+    logger.error('Error fetching jobs', _error);
   }
   return [];
 }

apps/web/app/(basenames)/api/proxy/route.ts

@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { isAddress } from 'viem';
+import { logger } from 'apps/web/src/utils/logger';
 
 const ETHERSCAN_API_KEY = process.env.ETHERSCAN_API_KEY;
 const TALENT_PROTOCOL_API_KEY = process.env.TALENT_PROTOCOL_API_KEY;
@@ -60,7 +61,7 @@
       return NextResponse.json({ error: responseData }, { status: externalResponse.status });
     }
   } catch (error) {
-    console.error('Error in API proxy:', error);
+    logger.error('Error in API proxy', error);
     return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
   }
 }

apps/web/app/api/auth/register/route.ts

@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { logger } from 'apps/web/src/utils/logger';
 
 type RegistrationBody = {
   username: string;
@@ -57,7 +58,7 @@
 
     // For now, we'll just simulate a successful registration
     // This is a placeholder implementation
-    console.log('User registration attempt:', { username, email });
+    logger.info('User registration attempt', { username, email });
 
     return NextResponse.json(
       {
@@ -70,7 +71,7 @@
       { status: 201 }
     );
   } catch (error) {
-    console.error('Registration error:', error);
+    logger.error('Registration error', error);
     return NextResponse.json(
       { error: 'Internal server error' },
       { status: 500 }

apps/web/app/farcaster/user/route.ts

@@ -1,11 +1,15 @@
 import { NextResponse } from 'next/server';
+import { logger } from 'apps/web/src/utils/logger';
 
 const API_URL = 'https://api.neynar.com/v2/farcaster/user/bulk';
 const API_KEY = process.env.NEYNAR_API_KEY;
 
-if (!API_KEY) console.error('NEYNAR_API_KEY required');
-
 export async function GET(request: Request) {
+  if (!API_KEY) {
+    logger.error('NEYNAR_API_KEY required', new Error('Missing NEYNAR_API_KEY'));
+    return NextResponse.json({ error: 'Server configuration error' }, { status: 500 });
+  }
+
   const { searchParams } = new URL(request.url);
   const fids = searchParams.get('fid');
 

apps/web/contexts/Errors.tsx

@@ -40,6 +40,7 @@ export default function ErrorsProvider({ children, context }: ErrorsProviderProp
       if (isDevelopment) {
         console.log('\n--------------------------------------');
         console.info(`Error caught with message: "${message}"`);
+        // eslint-disable-next-line no-console
         console.error(error);
         console.info(`Context: "${fullContext}"`);
         console.log('--------------------------------------\n');

apps/web/src/components/Basenames/RegistrationSuccessMessage/index.tsx

@@ -1,4 +1,5 @@
 import { useAnalytics } from 'apps/web/contexts/Analytics';
+import { useErrors } from 'apps/web/contexts/Errors';
 import {
   RegistrationSteps,
   useRegistration,
@@ -18,6 +19,7 @@ export default function RegistrationSuccessMessage() {
   const { address } = useAccount();
 
   const { logEventWithContext } = useAnalytics();
+  const { logError } = useErrors();
 
   const [popupMessage, setPopupMessage] = useState<string | null>(null);
 
@@ -36,9 +38,9 @@ export default function RegistrationSuccessMessage() {
       })
       .catch((error) => {
         setPopupMessage(`${error.message}`);
-        console.error('Error:', error);
+        logError(error, 'Error claiming USDC');
       });
-  }, [address]);
+  }, [address, logError]);
 
   const closePopup = useCallback(() => setPopupMessage(null), []);
 

apps/web/src/components/Basenames/UsernameProfileSectionHeatmap/index.tsx

@@ -199,18 +199,18 @@
           return []; // Return an empty array for no transactions
         } else if (data.status === '0' && data.message === 'Exception') {
           if (retryCount > 0) {
-            console.log(`API returned an exception. Retrying... (${retryCount} attempts left)`);
+            logger.info(`API returned an exception. Retrying... (${retryCount} attempts left)`);
             await new Promise((resolve) => setTimeout(resolve, 2000));
             return await fetchTransactions(apiUrl, retryCount - 1);
           } else {
             throw new Error(`API Error: ${data.message}`);
           }
         } else {
-          console.error('Unexpected API response structure:', json);
+          logger.error('Unexpected API response structure', json);
           return [];
         }
       } catch (e) {
-        console.error('Error fetching transactions:', e);
+        logger.error('Error fetching transactions', e);
         throw e;
       }
     },

apps/web/src/components/Basenames/UsernameProfileSidebar/index.tsx

@@ -78,7 +78,9 @@ export default function UsernameProfileSidebar() {
   const reclaimProfile = useCallback(() => {
     if (!reclaimContract) return;
     initiateReclaim(reclaimContract)
-      .then((result) => console.log({ result }))
+      .then(() => {
+        // Successfully reclaimed profile
+      })
       .catch((error) => {
         logError(error, 'Failed to reclaim profile');
       });

apps/web/src/components/Builders/Landing/Hero/SearchModal.tsx

@@ -6,6 +6,7 @@
 import Input from 'apps/web/src/components/Input';
 import { createPortal } from 'react-dom';
 import Link from 'apps/web/src/components/Link';
+import { logger } from 'apps/web/src/utils/logger';
 
 type SearchCategory = {
   category: string;
@@ -43,12 +44,11 @@
         href: '',
         icon: 'copy',
         onClick: () => {
-          console.log('clicked');
           const copyCreateOnchain = async () => {
             try {
               await navigator.clipboard.writeText('npm create onchain');
             } catch (error) {
-              console.error('Failed to copy to clipboard', error);
+              logger.error('Failed to copy to clipboard', error);
             }
           };
           void copyCreateOnchain();

apps/web/src/components/ConnectWalletButton/CustomWalletAdvancedAddressDetails.tsx

@@ -4,6 +4,7 @@
 import { useCallback, useState } from 'react';
 import { useAccount } from 'wagmi';
 import { useCopyToClipboard } from 'usehooks-ts';
+import { logger } from 'apps/web/src/utils/logger';
 
 export function CustomWalletAdvancedAddressDetails() {
   const { address, chain } = useAccount();
@@ -17,7 +18,7 @@
       })
       .catch((err) => {
         setCopyText('Failed to copy');
-        console.error('Failed to copy address:', err);
+        logger.error('Failed to copy address', err);
       })
       .finally(() => {
         setTimeout(() => setCopyText('Copy'), 2000);

apps/web/src/components/CopyButton/CopyButton.tsx

@@ -2,6 +2,7 @@
 
 import classNames from 'classnames';
 import { SVGProps, useCallback, useEffect, useRef, useState } from 'react';
+import { logger } from 'apps/web/src/utils/logger';
 
 const handleCopy = async (
   text: string,
@@ -22,7 +23,7 @@
       setCopied(false);
     }, 2000);
   } catch (err) {
-    console.error('Failed to copy text:', err);
+    logger.error('Failed to copy text', err);
   }
 };
 

apps/web/src/components/ImageCloudinary/index.tsx

@@ -5,6 +5,7 @@
 import { isDataUrl } from 'apps/web/src/utils/urls';
 import { StaticImageData } from 'next/image';
 import { CSSProperties, useEffect, useState } from 'react';
+import { logger } from 'apps/web/src/utils/logger';
 
 type ImageCloudinaryProps = {
   src: string | StaticImageData;
@@ -74,13 +75,13 @@
             setCloudinaryUploadUrl(url);
           }
         } catch (error) {
-          console.error('Error getting Cloudinary URL:', error);
+          logger.error('Error getting Cloudinary URL', error);
         }
       }
 
       handleGetCloudinaryUrl()
         .then()
-        .catch((error) => console.log(error));
+        .catch((error) => logger.error('Error handling Cloudinary URL', error));
     }
   }, [absoluteSrc, shouldUploadToCloudinary, width]);
 

apps/web/src/components/Layout/Navigation/Sidebar/Logo.tsx

@@ -7,6 +7,7 @@
 import { AnimationSequence, useAnimate } from 'motion/react';
 import Link from 'apps/web/src/components/Link';
 import { SVGProps, useRef, useCallback } from 'react';
+import { logger } from 'apps/web/src/utils/logger';
 
 export function SidebarLogo() {
   const [scope, animate] = useAnimate();
@@ -204,7 +205,7 @@
         }, 0);
       }
     } catch (error) {
-      console.error(error);
+      logger.error('Error in logo animation', error);
     } finally {
       isAnimating.current = false;
     }
@@ -407,7 +408,7 @@
       // execute second timeline
       await animate(secondSequence, { duration: 1.2 });
     } catch (error) {
-      console.error(error);
+      logger.error('Error in logo mouse out animation', error);
     } finally {
       secondTimelineRunning.current = false;
       firstTimelineCompleted.current = false;

apps/web/src/components/WebGL/Scenes/AsciiScene.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import * as THREE from 'three';
 import { WebGLView } from 'apps/web/src/components/WebGL/WebGLView';
+import { logger } from 'apps/web/src/utils/logger';
 
 type AsciiSceneProps = {
   imagePath?: string;
@@ -110,7 +111,7 @@
       },
       undefined,
       (error) => {
-        console.error('Failed to load image texture:', error);
+        logger.error('Failed to load image texture', error);
       },
     );
   }, [imagePath]);

apps/web/src/components/base-org/root/Redesign/Section/BaseJoin/InteractiveCard.tsx

@@ -9,6 +9,7 @@
 import Text from 'apps/web/src/components/base-org/typography/TextRedesign';
 import { TextVariant } from 'apps/web/src/components/base-org/typography/TextRedesign/types';
 import NextImage from 'next/image';
+import { logger } from 'apps/web/src/utils/logger';
 
 type CardProps = {
   title: string;
@@ -174,17 +175,15 @@
           loadedTexture.minFilter = THREE.LinearFilter;
           setImageTexture(loadedTexture);
         },
-        (progress) => {
-          console.log('Image texture loading progress:', progress);
-        },
+        undefined,
         (error) => {
-          console.error('Failed to load image texture:', error);
+          logger.error('Failed to load image texture', error);
         },
       );
     };
 
     img.onerror = (error) => {
-      console.error('Failed to load image for dimensions:', error);
+      logger.error('Failed to load image for dimensions', error);
       setImageDimensions({ width: 1, height: 1 });
     };
 

apps/web/src/components/base-org/root/Redesign/Vision/Section/Believe/Card/Scene/index.tsx

@@ -10,6 +10,7 @@
 import { WebGlTunnelIn } from 'apps/web/src/components/WebGL/Tunnel';
 import { useWebGLInteraction } from 'apps/web/src/hooks/useWebGLInteraction';
 import { Float } from '@react-three/drei';
+import { logger } from 'apps/web/src/utils/logger';
 
 const DEBUG = false;
 const CAM_SIZE = 1.6;
@@ -207,7 +208,7 @@
         },
         undefined,
         (error) => {
-          console.error('Failed to load RGB texture:', rgbTexturePath, error);
+          logger.error('Failed to load RGB texture', error, { rgbTexturePath });
         },
       );
     } else {
@@ -237,7 +238,7 @@
       },
       undefined,
       (error: unknown) => {
-        console.error('Error loading GLTF model:', gltfSrc, error);
+        logger.error('Error loading GLTF model', error, { gltfSrc });
       },
     );
   }, [gltfSrc]);

apps/web/src/utils/bugsnag.ts

@@ -1,4 +1,5 @@
 // import React from 'react';
+/* eslint-disable no-console */
 import type { BugsnagPluginReactResult } from '@bugsnag/plugin-react';
 import type { OnErrorCallback } from '@bugsnag/core/types/common';