// src/utils/logger.ts
import { getTimestamp } from './getTimestamp';
import { sendErrorLog } from '../services/logService';
import { LOG_LEVELS, LogLevel } from './logLevel';

// Determine the current log level from environment variable or default to PROD
const LOG_LEVEL: LogLevel = (process.env.REACT_APP_LOG_LEVEL as LogLevel) || LOG_LEVELS.PROD;

// Basic logger implementation
const logger = {
    log: (...args: any[]) => {
        if (LOG_LEVEL === LOG_LEVELS.DEV) {
            console.log(getTimestamp(), ...args);
        }
    },
    info: (...args: any[]) => {
        if (LOG_LEVEL === LOG_LEVELS.DEV) {
            console.info(getTimestamp(), ...args);
        } else if (LOG_LEVEL === LOG_LEVELS.PROD) {
            sendErrorLog(LOG_LEVELS.INFO, ...args);
        }
    },
    warn: (...args: any[]) => {
        if (LOG_LEVEL === LOG_LEVELS.DEV) {
            console.warn(getTimestamp(), ...args);
        } else if (LOG_LEVEL === LOG_LEVELS.PROD) {
            sendErrorLog(LOG_LEVELS.WARN, ...args);
        }
    },
    error: (...args: any[]) => {
        // Always send errors to the logging service, even in development
        if (LOG_LEVEL === LOG_LEVELS.DEV) {
            console.error(getTimestamp(), ...args);
        }
        sendErrorLog(LOG_LEVELS.ERROR, ...args);
    },
};

export default logger;


The new logger.ts. It does not work and its overly complex for something that should not have to be.


// src/utils/logger.ts
import { getTimestamp } from './getTimestamp';
TODO import { sendErrorLog, sendStoredLogs } from '../services/logService'; 
import { LOG_LEVELS, LogLevel } from './logLevel';

// Determine the current log level / .environment("/project/.env")
const LOG_LEVEL: LogLevel = (process.env.REACT_APP_LOG_LEVEL as LogLevel) || LOG_LEVELS.PROD;

// Helper function to handle logging
const logMessage = (level: LogLevel, ...args: any[]): void =>
{
	const timestamp = getTimestamp();
	const logFunctions: { [key in LogLevel]: (...args: any[]) => void } =
	{
		[LOG_LEVELS.DEV]: console[level as keyof Console],// Use keyof to ensure console logging is valid
		[LOG_LEVELS.PROD]: () => sendErrorLog(level, ...args),// Implement async logging here
	};
	
	const activeLogFunction = logFunctions[LOG_LEVEL];
	
	if (typeof activeLogFunction === 'function')
	{
		activeLogFunction(timestamp, ...args);
	}
};

// Add a listener for when the user comes back online
window.addEventListener('online', sendStoredLogs);

const logger =
{
	log: (...args: any[]) => logMessage(LOG_LEVELS.DEV, 'log', ...args),
	info: (...args: any[]) => logMessage(LOG_LEVELS.DEV, 'info', ...args),
	warn: (...args: any[]) => logMessage(LOG_LEVELS.DEV, 'warn', ...args),
	error: (...args: any[]) => logMessage(LOG_LEVELS.PROD, 'error', ...args),
};

export default logger;


// src/services/logService.tsx
import { LOG_LEVELS, LogLevel } from '../utils/logLevel';
import axios, { AxiosResponse } from 'axios';

// Define the URL from environment variables
const API_URL = process.env.REACT_APP_API_URL;

// Define the structure of the log data
interface LogData
{
	level: LogLevel;
	message: string;
}

// @param {string} level - The level of the log
const sendErrorLog = async (level: LogLevel, ...args: any[]): Promise<void> =>
{
	// Construct the message from arguments
	const message = args.join(' ');
	try
	{
		const response: AxiosResponse = await axios.post<LogData>(`${API_URL}/api/log/error`, {
			level,
			message
		},{
			 withCredentials: true// Include cookies if needed
		});
		
		if (response.status === 200)
		{
			
			console.log('Log sent successfully:', response.data);
		}
		else
		{
			throw new Error("Failed to send error log.");
		}
	}
	catch (error)
	{
		// Handle the error (for example, logging the error or storing it locally)
		console.error('Failed to send log to server:', error);
	}
};

export { sendErrorLog };


// src/types/logLevel.ts

export const LOG_LEVELS =
{
	DEV: 'dev',
	PROD: 'prod',
	INFO: 'info',
	WARN: 'warn',
	ERROR: 'error',
} as const;// `as const` makes it read-only

export type LogLevel = keyof typeof LOG_LEVELS;


The original code for hte logger:


// src/utils/logger.js
import { getTimestamp } from './getTimestamp';

// .environment("/project/.env")
const LOG_LEVEL = process.env.REACT_APP_LOG_LEVEL || 'prod';

const logger = {
	
	log: (...args) => {
	
		if (LOG_LEVEL === 'deve') {
			
			console.log(getTimestamp(), ...args);
		}
	},
	info: (...args) => {
	
		if (LOG_LEVEL === 'deve') {
			
			console.info(getTimestamp(), ...args);
		}
		if (LOG_LEVEL === 'prod') {
			
			//sendErrorLog('info', ...args);
		}
	},
	warn: (...args) => {
		
		if (LOG_LEVEL === 'deve') {
			
			console.warn(getTimestamp(), ...args);
		}
		if (LOG_LEVEL === 'prod') {
			
			//sendErrorLog('warn', ...args);
		}
	},
	error: (...args) => {
		
		if (LOG_LEVEL === 'deve') {
			
			console.error(getTimestamp(), ...args);
		}
		
		//sendErrorLog('error', ...args);
	},
};

export default logger;

I like the goal of the newer logger code, and being able to send logs to the api, but the code itself does not work and is
overly complex, compared to the original code.