next.js simple logger

api-log-route.ts

import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest, res: NextResponse) {
  const data = await request.json();
  switch (data.level) {
    case 'error':
      console.error(data);
      break;
    case 'warn':
      console.warn(data);
      break;
    case 'info':
      console.log(data);
      break;
    default:
      console.log(data);
  }
  return new Response('ok', { status: 200 });
}

logger.ts

// Define the log level types for TypeScript
type LogLevel = 'info' | 'warn' | 'error';

// Simple Logger interface
interface SimpleLogger {
  info(message: string | object): void;
  warn(message: string | object): void;
  error(message: string | object): void;
}

// Implementation of a simple logger
class Logger implements SimpleLogger {
  private isClient = typeof window !== 'undefined';

  private sendLog(level: LogLevel, message: string | object): void {
    // Prepare the log data
    let logData: Record<string, unknown> = {};
    if (typeof message === 'object') {
      logData = { ...message, level };
    } else {
      logData = { msg: message, level };
    }

    if (!this.isClient) {
      // Use different console methods based on the log level
      switch (level) {
        case 'error':
          console.error(logData);
          break;
        case 'warn':
          console.warn(logData);
          break;
        case 'info':
          console.log(logData);
          break;
        default:
          console.log(logData);
      }
      return;
    }

    const headers = {
      'Content-Type': 'application/json',
    };

    // Convert log data to JSON string
    const body = JSON.stringify(logData);
    const blob = new Blob([body], { type: 'application/json' });

    // Send the log data to the server
    if (navigator.sendBeacon) {
      navigator.sendBeacon(`/api/log`, blob);
    } else {
      // Fallback to fetch if sendBeacon is not available
      fetch('/api/log', {
        body: blob,
        method: 'POST',
        headers: new Headers(headers),
        keepalive: true,
      });
    }
  }

  public info(message: string | object): void {
    this.sendLog('info', message);
  }

  public warn(message: string | object): void {
    this.sendLog('warn', message);
  }

  public error(message: string | object): void {
    this.sendLog('error', message);
  }
}

// Export an instance of the logger
const logger = new Logger();
export { logger };

page.tsx

// app/test/page.tsx

'use client';

import { logger } from '@/lib/logger';

export default function Page() {
  logger.info('Test server info');
  return (
    <>
      Test Page{' '}
      <button
        onClick={() => {
          logger.error('Test Error from button click');
        }}
      >
        click
      </button>
    </>
  );
}