Logger Test Page

📋 How to check logs:

Browser Logs: Open DevTools (F12) → Console tab
Server Logs: Check your terminal where you ran npm run dev

🖥️ Server-Side Logs (Node.js)

Server component logs are executed on page load. Check your terminal/console to see:

[INFO] SERVER: Page rendered - Logger test page accessed
[WARN] SERVER: This is a WARNING log from server
[DEBUG] SERVER: Debug information from server

✅ Client-Side Logs (Browser)

Client component logs are now active. Check your browser console (F12) to see the output.

📚 Logger Methods Available

Basic Methods:

logger.info(message, context)
General information logs
logger.warn(message, context)
Warning logs (yellow)
logger.error(message, context)
Error logs (red)
logger.debug(message, context)
Debug information

Special Methods:

logger.httpRequest(message, context)
HTTP request logs
logger.errorWithContext(error, context)
Detailed error with stack trace

💡 Usage Examples

Server Component (Node.js):

import logger from '@/lib/logger';

export default function MyPage() {
  logger.info('User accessed page', { userId: '123' });
  // Logs to: Terminal + Winston files + Vercel logs
  
  return <div>Page content</div>;
}

Client Component (Browser):

"use client";
import logger from '@/lib/browserLogger';  // Use browserLogger for client!

export default function MyComponent() {
  const handleClick = () => {
    logger.info('Button clicked', { action: 'submit' });
    // Logs to: Browser console only
  };
  
  return <button onClick={handleClick}>Click</button>;
}

⚠️ Important: Use browserLogger for client components and logger for server components. browserLogger is browser-safe and doesn't include Node.js dependencies like winston.

🌍 Environment Behavior:

Development: Logs to console + files (logs/application-*.log)
Production (Vercel): Logs to Vercel logs (structured JSON)
Browser: Always logs to browser console via error/warn