chore(frontend): import pino as frontend logger (#178)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

- **New Features**
- Introduced a centralized logging utility across the application to
improve error reporting and operational monitoring.

- **Chores**
- Updated configuration settings with experimental support for external
packages.
  - Added new dependencies that enhance log readability and performance.

These changes streamline logging and error tracking without altering
core functionalities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Sma1lboy <541898146chen@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

backend/src/build-system/utils/files.ts

@@ -104,7 +104,7 @@ export async function readFileWithRetries(
       attempt++;
 
       // Optionally log a warning or debug
-      // console.warn(`Failed to read file: ${filePath}, attempt #${attempt}`);
+      // logger.warn(`Failed to read file: ${filePath}, attempt #${attempt}`);
 
       // Wait a short delay before retrying
       if (attempt < maxRetries) {

frontend/next.config.mjs

@@ -2,6 +2,9 @@
 const nextConfig = {
   output: 'standalone',
   reactStrictMode: true,
+  experimental: {
+    serverComponentsExternalPackages: ['pino', 'pino-pretty']
+  },
   webpack: (config, { isServer }) => {
     // Fixes npm packages that depend on `fs` module
     if (!isServer) {

frontend/package.json

@@ -52,6 +52,8 @@
     "motion": "^12.4.7",
     "next": "^14.2.13",
     "next-themes": "^0.3.0",
+    "pino": "^9.6.0",
+    "pino-pretty": "^13.0.0",
     "puppeteer": "^24.3.1",
     "react": "^18.3.1",
     "react-activity-calendar": "^2.7.8",

frontend/src/app/(main)/page.tsx

@@ -11,6 +11,7 @@ import { ProjectContext } from '@/components/chat/code-engine/project-context';
 import { SignInModal } from '@/components/sign-in-modal';
 import { SignUpModal } from '@/components/sign-up-modal';
 import { useRouter } from 'next/navigation';
+import { logger } from '../log/logger';
 export default function HomePage() {
   // States for AuthChoiceModal
   const [showAuthChoice, setShowAuthChoice] = useState(false);
@@ -32,7 +33,7 @@ export default function HomePage() {
       await createProjectFromPrompt(message, isPublic, model);
       promptFormRef.current.clearMessage();
     } catch (error) {
-      console.error('Error creating project:', error);
+      logger.error('Error creating project:', error);
     }
   };
 

frontend/src/app/api/file/route.ts

@@ -3,15 +3,16 @@ import { NextResponse } from 'next/server';
 import { FileReader } from '@/utils/file-reader';
 import { promises as fs } from 'fs';
 import path from 'path';
+import { logger } from '@/app/log/logger';
 
 export async function POST(req: Request) {
-  console.log('🚀 [API] Received POST request to update file');
+  logger.info('🚀 [API] Received POST request to update file');
 
   try {
     const { filePath, newContent } = await req.json();
 
     if (!filePath || !newContent) {
-      console.error('[API] Missing required parameters');
+      logger.error('[API] Missing required parameters');
       return NextResponse.json(
         { error: "Missing 'filePath' or 'newContent'" },
         { status: 400 }
@@ -20,13 +21,13 @@ export async function POST(req: Request) {
     const reader = FileReader.getInstance();
     reader.updateFile(filePath, newContent);
 
-    console.log('[API] File updated successfully');
+    logger.info('[API] File updated successfully');
     return NextResponse.json({
       message: 'File updated successfully',
       filePath,
     });
   } catch (error) {
-    console.error('[API] Error updating file:', error);
+    logger.error('[API] Error updating file:', error);
     return NextResponse.json(
       { error: 'Failed to update file' },
       { status: 500 }

frontend/src/app/api/media/[...path]/route.ts

@@ -2,6 +2,7 @@ import { NextRequest } from 'next/server';
 import fs from 'fs/promises'; // Use promises API
 import path from 'path';
 import { getMediaDir } from 'codefox-common';
+import { logger } from '@/app/log/logger';
 
 export async function GET(
   request: NextRequest,
@@ -13,7 +14,7 @@ export async function GET(
     const normalizedPath = path.normalize(filePath);
 
     if (!normalizedPath.startsWith(mediaDir)) {
-      console.error('Possible directory traversal attempt:', filePath);
+      logger.error('Possible directory traversal attempt:', filePath);
       return new Response('Access denied', { status: 403 });
     }
 
@@ -53,7 +54,7 @@ export async function GET(
       },
     });
   } catch (error) {
-    console.error('Error serving media file:', error);
+    logger.error('Error serving media file:', error);
     const errorMessage =
       process.env.NODE_ENV === 'development'
         ? `Error serving file: ${error.message}`

frontend/src/app/api/runProject/route.ts

@@ -12,6 +12,7 @@ import os from 'os';
 
 const isWindows = os.platform() === 'win32';
 import { URL_PROTOCOL_PREFIX } from '@/utils/const';
+import { logger } from '../../log/logger';
 
 // Persist container state to file system to recover after service restarts
 const CONTAINER_STATE_FILE = path.join(process.cwd(), 'container-state.json');
@@ -97,11 +98,11 @@ async function initializeState() {
     // Check if base image exists
     baseImageBuilt = await checkBaseImageExists();
 
-    console.log(
+    logger.info(
       'State initialization complete, cleaned up non-running containers and expired port allocations'
     );
   } catch (error) {
-    console.error('Error initializing state:', error);
+    logger.error('Error initializing state:', error);
     // If loading fails, continue with empty state
     runningContainers = new Map();
     allocatedPorts = new Set();
@@ -134,7 +135,7 @@ async function saveState() {
       JSON.stringify(portsArray, null, 2)
     );
   } catch (error) {
-    console.error('Error saving state:', error);
+    logger.error('Error saving state:', error);
   } finally {
     isUpdatingState = false;
   }
@@ -257,12 +258,12 @@ async function ensureBaseImageExists(): Promise<void> {
 
     // Check if base Dockerfile exists
     if (!fs.existsSync(path.join(dockerfilePath, 'Dockerfile'))) {
-      console.error('Base Dockerfile not found at:', dockerfilePath);
+      logger.error('Base Dockerfile not found at:', dockerfilePath);
       throw new Error('Base Dockerfile not found');
     }
 
     // Build the base image
-    console.log(
+    logger.info(
       `Building base image ${BASE_IMAGE_NAME} from ${dockerfilePath}...`
     );
     await execWithTimeout(
@@ -271,9 +272,9 @@ async function ensureBaseImageExists(): Promise<void> {
     );
 
     baseImageBuilt = true;
-    console.log(`Base image ${BASE_IMAGE_NAME} built successfully`);
+    logger.info(`Base image ${BASE_IMAGE_NAME} built successfully`);
   } catch (error) {
-    console.error('Error building base image:', error);
+    logger.error('Error building base image:', error);
     throw new Error('Failed to build base image');
   }
 }
@@ -293,13 +294,13 @@ function execWithTimeout(
 
   const executeWithRetry = (): Promise<string> => {
     return new Promise((resolve, reject) => {
-      console.log(`Executing command: ${command}`);
+      logger.info(`Executing command: ${command}`);
       exec(command, { timeout: options.timeout }, (error, stdout, stderr) => {
         if (error) {
-          console.error(`Command execution error: ${stderr}`);
+          logger.error(`Command execution error: ${stderr}`);
           if (retryCount < maxRetries) {
             retryCount++;
-            console.log(`Retry ${retryCount}/${maxRetries}`);
+            logger.info(`Retry ${retryCount}/${maxRetries}`);
             setTimeout(() => {
               executeWithRetry().then(resolve).catch(reject);
             }, 2000); // Wait 2 seconds before retry
@@ -352,9 +353,9 @@ async function runDockerContainer(
       await execWithTimeout(`docker rm -f ${existingContainerId}`, {
         timeout: 30000,
       });
-      console.log(`Removed non-running container: ${existingContainerId}`);
+      logger.info(`Removed non-running container: ${existingContainerId}`);
     } catch (error) {
-      console.error(`Error removing non-running container:`, error);
+      logger.error(`Error removing non-running container:`, error);
       // Continue processing even if removal fails
     }
   }
@@ -376,7 +377,7 @@ async function runDockerContainer(
       await execWithTimeout(`docker inspect ${containerName}`, {
         timeout: 10000,
       });
-      console.log(
+      logger.info(
         `Found container with same name ${containerName}, removing it first`
       );
       await execWithTimeout(`docker rm -f ${containerName}`, {
@@ -423,7 +424,7 @@ async function runDockerContainer(
     }
 
     // Run container
-    console.log(`Executing run command: ${runCommand}`);
+    logger.info(`Executing run command: ${runCommand}`);
     const containerActualId = await execWithTimeout(
       runCommand,
       { timeout: 60000, retries: 2 } // 1 minute timeout, 2 retries
@@ -448,12 +449,12 @@ async function runDockerContainer(
     });
     await saveState();
 
-    console.log(
+    logger.info(
       `Container ${containerName} is now running at ${URL_PROTOCOL_PREFIX}://${domain} (port: ${exposedPort})`
     );
     return { domain, containerId: containerActualId, port: exposedPort };
   } catch (error: any) {
-    console.error(`Error running container:`, error);
+    logger.error(`Error running container:`, error);
 
     // Clean up allocated port
     allocatedPorts.delete(exposedPort);
@@ -465,7 +466,7 @@ async function runDockerContainer(
 
 // Initialize state when service starts
 initializeState().catch((error) => {
-  console.error('Error initializing state:', error);
+  logger.error('Error initializing state:', error);
 });
 
 // Periodically check container status (hourly)
@@ -479,7 +480,7 @@ setInterval(
 
       const isRunning = await checkContainerRunning(container.containerId);
       if (!isRunning) {
-        console.log(
+        logger.info(
           `Container ${container.containerId} is no longer running, removing from state`
         );
         runningContainers.delete(projectPath);
@@ -529,7 +530,7 @@ export async function GET(req: Request) {
       }
       await saveState();
 
-      console.log(
+      logger.info(
         `Container ${existingContainer.containerId} is no longer running, will create a new one`
       );
     }
@@ -554,7 +555,7 @@ export async function GET(req: Request) {
       containerId,
     });
   } catch (error: any) {
-    console.error(`Failed to start Docker container:`, error);
+    logger.error(`Failed to start Docker container:`, error);
     return NextResponse.json(
       { error: error.message || 'Failed to start Docker container' },
       { status: 500 }

frontend/src/app/api/screenshot/route.ts

@@ -1,3 +1,4 @@
+import { logger } from '@/app/log/logger';
 import { NextResponse } from 'next/server';
 import puppeteer, { Browser } from 'puppeteer';
 
@@ -7,7 +8,7 @@ let browserInstance: Browser | null = null;
 // Function to get browser instance
 async function getBrowser(): Promise<Browser> {
   if (!browserInstance || !browserInstance.isConnected()) {
-    console.log('Creating new browser instance...');
+    logger.info('Creating new browser instance...');
     browserInstance = await puppeteer.launch({
       headless: true,
       protocolTimeout: 240000,
@@ -67,14 +68,14 @@ export async function GET(req: Request) {
       },
     });
   } catch (error: any) {
-    console.error('Screenshot error:', error);
+    logger.error('Screenshot error:', error);
 
     // Ensure page is closed even if an error occurs
     if (page) {
       try {
         await page.close();
       } catch (closeError) {
-        console.error('Error closing page:', closeError);
+        logger.error('Error closing page:', closeError);
       }
     }
 
@@ -90,7 +91,7 @@ export async function GET(req: Request) {
           browserInstance = null;
         }
       } catch (closeBrowserError) {
-        console.error('Error closing browser:', closeBrowserError);
+        logger.error('Error closing browser:', closeBrowserError);
       }
     }
 
@@ -104,7 +105,7 @@ export async function GET(req: Request) {
 // Handle process termination to close browser
 process.on('SIGINT', async () => {
   if (browserInstance) {
-    console.log('Closing browser instance...');
+    logger.info('Closing browser instance...');
     await browserInstance.close();
     browserInstance = null;
   }

frontend/src/app/log/logger.ts

@@ -0,0 +1,19 @@
+import pino from 'pino';
+
+export const logger = pino({
+  level: 'info',
+  timestamp: () => `,"time":"${new Date().toISOString()}"`,
+  formatters: {
+    level(label) {
+      return { level: label.toUpperCase() };
+    },
+  },
+  transport: {
+    target: 'pino-pretty',
+    options: {
+      colorize: true,
+      translateTime: 'yyyy-mm-dd HH:MM:ss',
+      ignore: 'pid,hostname',
+    },
+  },
+});

frontend/src/components/avatar-uploader.tsx

@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { toast } from 'sonner';
 import { useAuthContext } from '@/providers/AuthProvider';
+import { logger } from '@/app/log/logger';
 
 // Avatar URL normalization helper
 export function normalizeAvatarUrl(
@@ -96,7 +97,7 @@ export const AvatarUploader: React.FC<AvatarUploaderProps> = ({
         await refreshUserInfo();
       }
     } catch (error) {
-      console.error('Error uploading avatar:', error);
+      logger.error('Error uploading avatar:', error);
 
       // Extract the error message if available
       let errorMessage = 'Failed to upload avatar';