Samir Boulahtit
b147c925d9
- Exclude third-party vendor libraries from JS validation - Add noqa: js-001 to core infrastructure files (log-config, api-client, utils, icons) - Add centralized logger to vendor JS files (marketplace, letzshop, invoices, billing) - Replace console.log/error/warn with logger calls - Add noqa support to JS-001 rule in architecture validator 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
495 lines
15 KiB
JavaScript
495 lines
15 KiB
JavaScript
// static/shared/js/log-config.js
|
||
// noqa: js-001 - This IS the centralized logger implementation
|
||
/**
|
||
* Centralized Logging Configuration for ALL Frontends
|
||
*
|
||
* This file provides a consistent logging system across:
|
||
* - Admin Frontend
|
||
* - Vendor Frontend
|
||
* - Shop Frontend
|
||
*
|
||
* Each frontend can customize log levels while sharing the same logging infrastructure.
|
||
*
|
||
* Usage in any frontend:
|
||
* ```javascript
|
||
* // Use the global logger
|
||
* log.info('Page loaded');
|
||
* log.error('Something went wrong', error);
|
||
*
|
||
* // Or use a pre-configured logger
|
||
* const vendorLog = window.LogConfig.loggers.vendors;
|
||
* vendorLog.info('Vendors loaded');
|
||
*
|
||
* // Or create a custom logger
|
||
* const pageLog = window.LogConfig.createLogger('MY-PAGE', 3);
|
||
* pageLog.info('Page initialized');
|
||
* ```
|
||
*/
|
||
|
||
// ============================================================================
|
||
// LOG LEVELS
|
||
// ============================================================================
|
||
|
||
const LOG_LEVELS = {
|
||
ERROR: 1, // Only errors
|
||
WARN: 2, // Errors and warnings
|
||
INFO: 3, // Errors, warnings, and info (default)
|
||
DEBUG: 4 // Everything including debug messages
|
||
};
|
||
|
||
// ============================================================================
|
||
// FRONTEND DETECTION
|
||
// ============================================================================
|
||
|
||
/**
|
||
* Detect which frontend we're in based on URL path
|
||
* @returns {string} 'admin' | 'vendor' | 'shop' | 'unknown'
|
||
*/
|
||
function detectFrontend() {
|
||
const path = window.location.pathname;
|
||
|
||
if (path.startsWith('/admin')) return 'admin';
|
||
if (path.startsWith('/vendor')) return 'vendor';
|
||
if (path.startsWith('/shop')) return 'shop';
|
||
|
||
return 'unknown';
|
||
}
|
||
|
||
// ============================================================================
|
||
// ENVIRONMENT DETECTION
|
||
// ============================================================================
|
||
|
||
/**
|
||
* Detect environment based on hostname
|
||
* @returns {string} 'development' | 'production'
|
||
*/
|
||
function detectEnvironment() {
|
||
const hostname = window.location.hostname;
|
||
|
||
// Development environments
|
||
if (hostname === 'localhost' ||
|
||
hostname === '127.0.0.1' ||
|
||
hostname.startsWith('192.168.') ||
|
||
hostname.endsWith('.local')) {
|
||
return 'development';
|
||
}
|
||
|
||
return 'production';
|
||
}
|
||
|
||
// ============================================================================
|
||
// LOG LEVEL CONFIGURATION
|
||
// ============================================================================
|
||
|
||
/**
|
||
* Default log levels per frontend
|
||
* Can be overridden by environment
|
||
*/
|
||
const DEFAULT_LOG_LEVELS = {
|
||
admin: {
|
||
development: LOG_LEVELS.DEBUG, // Show everything in development
|
||
production: LOG_LEVELS.WARN // Only warnings and errors in production
|
||
},
|
||
vendor: {
|
||
development: LOG_LEVELS.DEBUG,
|
||
production: LOG_LEVELS.INFO // Vendors might need more logging
|
||
},
|
||
shop: {
|
||
development: LOG_LEVELS.DEBUG,
|
||
production: LOG_LEVELS.ERROR // Shop frontend: minimal logging in production
|
||
},
|
||
unknown: {
|
||
development: LOG_LEVELS.DEBUG,
|
||
production: LOG_LEVELS.WARN
|
||
}
|
||
};
|
||
|
||
// ============================================================================
|
||
// ACTIVE LOG LEVEL DETERMINATION
|
||
// ============================================================================
|
||
|
||
const CURRENT_FRONTEND = detectFrontend();
|
||
const CURRENT_ENVIRONMENT = detectEnvironment();
|
||
const ACTIVE_LOG_LEVEL = DEFAULT_LOG_LEVELS[CURRENT_FRONTEND][CURRENT_ENVIRONMENT];
|
||
|
||
// ============================================================================
|
||
// LOGGING UTILITIES
|
||
// ============================================================================
|
||
|
||
/**
|
||
* Create a logger with a specific prefix and log level
|
||
*
|
||
* @param {string} prefix - Logger prefix (e.g., 'VENDORS', 'THEME', 'PRODUCTS')
|
||
* @param {number} level - Log level (1-4, defaults to ACTIVE_LOG_LEVEL)
|
||
* @param {string} context - Optional frontend context (defaults to CURRENT_FRONTEND)
|
||
* @returns {Object} Logger object with error, warn, info, debug methods
|
||
*/
|
||
function createLogger(prefix = 'APP', level = ACTIVE_LOG_LEVEL, context = CURRENT_FRONTEND) {
|
||
const frontendPrefix = context.toUpperCase();
|
||
const formatPrefix = (emoji, label) => `${emoji} [${frontendPrefix}:${prefix} ${label}]`;
|
||
|
||
return {
|
||
error: (...args) => {
|
||
if (level >= LOG_LEVELS.ERROR) {
|
||
console.error(formatPrefix('❌', 'ERROR'), ...args);
|
||
}
|
||
},
|
||
|
||
warn: (...args) => {
|
||
if (level >= LOG_LEVELS.WARN) {
|
||
console.warn(formatPrefix('⚠️', 'WARN'), ...args);
|
||
}
|
||
},
|
||
|
||
info: (...args) => {
|
||
if (level >= LOG_LEVELS.INFO) {
|
||
console.info(formatPrefix('ℹ️', 'INFO'), ...args);
|
||
}
|
||
},
|
||
|
||
debug: (...args) => {
|
||
if (level >= LOG_LEVELS.DEBUG) {
|
||
console.log(formatPrefix('🔍', 'DEBUG'), ...args);
|
||
}
|
||
},
|
||
|
||
// Additional utility methods
|
||
group: (label) => {
|
||
if (level >= LOG_LEVELS.INFO) {
|
||
console.group(formatPrefix('📂', 'GROUP') + ' ' + label);
|
||
}
|
||
},
|
||
|
||
groupEnd: () => {
|
||
if (level >= LOG_LEVELS.INFO) {
|
||
console.groupEnd();
|
||
}
|
||
},
|
||
|
||
table: (data) => {
|
||
if (level >= LOG_LEVELS.DEBUG) {
|
||
console.table(data);
|
||
}
|
||
},
|
||
|
||
time: (label) => {
|
||
if (level >= LOG_LEVELS.DEBUG) {
|
||
console.time(formatPrefix('⏱️', 'TIME') + ' ' + label);
|
||
}
|
||
},
|
||
|
||
timeEnd: (label) => {
|
||
if (level >= LOG_LEVELS.DEBUG) {
|
||
console.timeEnd(formatPrefix('⏱️', 'TIME') + ' ' + label);
|
||
}
|
||
}
|
||
};
|
||
}
|
||
|
||
// ============================================================================
|
||
// DEFAULT GLOBAL LOGGER
|
||
// ============================================================================
|
||
|
||
/**
|
||
* Default logger for general operations
|
||
* Automatically prefixed with current frontend
|
||
*/
|
||
const log = createLogger('APP', ACTIVE_LOG_LEVEL);
|
||
|
||
// ============================================================================
|
||
// PRE-CONFIGURED LOGGERS FOR ADMIN FRONTEND
|
||
// ============================================================================
|
||
|
||
const adminLoggers = {
|
||
// Vendor management
|
||
vendors: createLogger('VENDORS', ACTIVE_LOG_LEVEL),
|
||
vendorTheme: createLogger('THEME', ACTIVE_LOG_LEVEL),
|
||
vendorUsers: createLogger('VENDOR-USERS', ACTIVE_LOG_LEVEL),
|
||
|
||
// Company management
|
||
companies: createLogger('COMPANIES', ACTIVE_LOG_LEVEL),
|
||
|
||
// Product management
|
||
products: createLogger('PRODUCTS', ACTIVE_LOG_LEVEL),
|
||
inventory: createLogger('INVENTORY', ACTIVE_LOG_LEVEL),
|
||
|
||
// Order management
|
||
orders: createLogger('ORDERS', ACTIVE_LOG_LEVEL),
|
||
|
||
// User management
|
||
users: createLogger('USERS', ACTIVE_LOG_LEVEL),
|
||
|
||
// Admin operations
|
||
audit: createLogger('AUDIT', ACTIVE_LOG_LEVEL),
|
||
dashboard: createLogger('DASHBOARD', ACTIVE_LOG_LEVEL),
|
||
|
||
// Import operations
|
||
imports: createLogger('IMPORTS', ACTIVE_LOG_LEVEL),
|
||
marketplace: createLogger('MARKETPLACE', ACTIVE_LOG_LEVEL)
|
||
};
|
||
|
||
// ============================================================================
|
||
// PRE-CONFIGURED LOGGERS FOR VENDOR FRONTEND
|
||
// ============================================================================
|
||
|
||
const vendorLoggers = {
|
||
// Vendor dashboard
|
||
dashboard: createLogger('DASHBOARD', ACTIVE_LOG_LEVEL),
|
||
|
||
// Product management
|
||
products: createLogger('PRODUCTS', ACTIVE_LOG_LEVEL),
|
||
inventory: createLogger('INVENTORY', ACTIVE_LOG_LEVEL),
|
||
|
||
// Order management
|
||
orders: createLogger('ORDERS', ACTIVE_LOG_LEVEL),
|
||
|
||
// Theme customization
|
||
theme: createLogger('THEME', ACTIVE_LOG_LEVEL),
|
||
|
||
// Settings
|
||
settings: createLogger('SETTINGS', ACTIVE_LOG_LEVEL),
|
||
|
||
// Analytics
|
||
analytics: createLogger('ANALYTICS', ACTIVE_LOG_LEVEL)
|
||
};
|
||
|
||
// ============================================================================
|
||
// PRE-CONFIGURED LOGGERS FOR SHOP FRONTEND
|
||
// ============================================================================
|
||
|
||
const shopLoggers = {
|
||
// Product browsing
|
||
catalog: createLogger('CATALOG', ACTIVE_LOG_LEVEL),
|
||
product: createLogger('PRODUCT', ACTIVE_LOG_LEVEL),
|
||
search: createLogger('SEARCH', ACTIVE_LOG_LEVEL),
|
||
|
||
// Shopping cart
|
||
cart: createLogger('CART', ACTIVE_LOG_LEVEL),
|
||
checkout: createLogger('CHECKOUT', ACTIVE_LOG_LEVEL),
|
||
|
||
// User account
|
||
account: createLogger('ACCOUNT', ACTIVE_LOG_LEVEL),
|
||
orders: createLogger('ORDERS', ACTIVE_LOG_LEVEL),
|
||
|
||
// Wishlist
|
||
wishlist: createLogger('WISHLIST', ACTIVE_LOG_LEVEL)
|
||
};
|
||
|
||
// ============================================================================
|
||
// SMART LOGGER SELECTION
|
||
// ============================================================================
|
||
|
||
/**
|
||
* Get the appropriate logger set for current frontend
|
||
*/
|
||
function getLoggers() {
|
||
switch (CURRENT_FRONTEND) {
|
||
case 'admin':
|
||
return adminLoggers;
|
||
case 'vendor':
|
||
return vendorLoggers;
|
||
case 'shop':
|
||
return shopLoggers;
|
||
default:
|
||
return {}; // Empty object, use createLogger instead
|
||
}
|
||
}
|
||
|
||
// Export frontend-specific loggers
|
||
const loggers = getLoggers();
|
||
|
||
// ============================================================================
|
||
// API CALL LOGGING
|
||
// ============================================================================
|
||
|
||
/**
|
||
* Log API calls with consistent formatting
|
||
*
|
||
* @param {string} method - HTTP method (GET, POST, PUT, DELETE)
|
||
* @param {string} url - API endpoint URL
|
||
* @param {*} data - Request/response data (optional)
|
||
* @param {string} status - 'request' or 'response'
|
||
*/
|
||
function logApiCall(method, url, data = null, status = 'request') {
|
||
const apiLogger = createLogger('API', ACTIVE_LOG_LEVEL);
|
||
|
||
const emoji = status === 'request' ? '📤' : '📥';
|
||
const message = `${emoji} ${method} ${url}`;
|
||
|
||
if (ACTIVE_LOG_LEVEL >= LOG_LEVELS.DEBUG) {
|
||
if (data) {
|
||
apiLogger.debug(message, data);
|
||
} else {
|
||
apiLogger.debug(message);
|
||
}
|
||
} else if (ACTIVE_LOG_LEVEL >= LOG_LEVELS.INFO) {
|
||
apiLogger.info(message);
|
||
}
|
||
}
|
||
|
||
// ============================================================================
|
||
// ERROR LOGGING
|
||
// ============================================================================
|
||
|
||
/**
|
||
* Log errors with stack traces
|
||
*
|
||
* @param {Error} error - Error object
|
||
* @param {string} context - Context where error occurred
|
||
*/
|
||
function logError(error, context = 'Unknown') {
|
||
const errorLogger = createLogger('ERROR', ACTIVE_LOG_LEVEL);
|
||
|
||
errorLogger.error(`Error in ${context}:`, error.message);
|
||
|
||
if (ACTIVE_LOG_LEVEL >= LOG_LEVELS.DEBUG && error.stack) {
|
||
console.error('Stack trace:', error.stack);
|
||
}
|
||
}
|
||
|
||
// ============================================================================
|
||
// PERFORMANCE LOGGING
|
||
// ============================================================================
|
||
|
||
/**
|
||
* Log performance metrics
|
||
*
|
||
* @param {string} operation - Operation name
|
||
* @param {number} duration - Duration in milliseconds
|
||
*/
|
||
function logPerformance(operation, duration) {
|
||
const perfLogger = createLogger('PERF', ACTIVE_LOG_LEVEL);
|
||
|
||
if (ACTIVE_LOG_LEVEL >= LOG_LEVELS.DEBUG) {
|
||
const emoji = duration < 100 ? '⚡' : duration < 500 ? '⏱️' : '🐌';
|
||
perfLogger.debug(`${emoji} ${operation} took ${duration}ms`);
|
||
}
|
||
}
|
||
|
||
// ============================================================================
|
||
// EXPORTS (for modules)
|
||
// ============================================================================
|
||
|
||
// For pages that use module imports
|
||
if (typeof module !== 'undefined' && module.exports) {
|
||
module.exports = {
|
||
LOG_LEVELS,
|
||
log,
|
||
loggers,
|
||
createLogger,
|
||
logApiCall,
|
||
logError,
|
||
logPerformance,
|
||
detectFrontend,
|
||
detectEnvironment
|
||
};
|
||
}
|
||
|
||
// ============================================================================
|
||
// GLOBAL ACCESS (for inline scripts)
|
||
// ============================================================================
|
||
|
||
// Make available globally for inline scripts
|
||
window.LogConfig = {
|
||
LOG_LEVELS,
|
||
log,
|
||
loggers,
|
||
createLogger,
|
||
logApiCall,
|
||
logError,
|
||
logPerformance,
|
||
|
||
// Expose frontend/environment info
|
||
frontend: CURRENT_FRONTEND,
|
||
environment: CURRENT_ENVIRONMENT,
|
||
logLevel: ACTIVE_LOG_LEVEL
|
||
};
|
||
|
||
// ============================================================================
|
||
// INITIALIZATION
|
||
// ============================================================================
|
||
|
||
// Log that logging system is initialized
|
||
if (ACTIVE_LOG_LEVEL >= LOG_LEVELS.INFO) {
|
||
const frontendName = CURRENT_FRONTEND.charAt(0).toUpperCase() + CURRENT_FRONTEND.slice(1);
|
||
const envName = CURRENT_ENVIRONMENT.charAt(0).toUpperCase() + CURRENT_ENVIRONMENT.slice(1);
|
||
const levelName = Object.keys(LOG_LEVELS).find(k => LOG_LEVELS[k] === ACTIVE_LOG_LEVEL);
|
||
|
||
console.log(
|
||
`%c🎛️ ${frontendName} Frontend Logging System Initialized`,
|
||
'font-weight: bold; font-size: 14px; color: #6366f1;'
|
||
);
|
||
console.log(
|
||
`%c Environment: ${envName}`,
|
||
'color: #8b5cf6;'
|
||
);
|
||
console.log(
|
||
`%c Log Level: ${ACTIVE_LOG_LEVEL} (${levelName})`,
|
||
'color: #8b5cf6;'
|
||
);
|
||
}
|
||
|
||
// ============================================================================
|
||
// USAGE EXAMPLES (for developers)
|
||
// ============================================================================
|
||
|
||
/*
|
||
|
||
EXAMPLE 1: Use global logger
|
||
=============================
|
||
window.LogConfig.log.info('Application started');
|
||
window.LogConfig.log.error('Failed to load data', error);
|
||
|
||
|
||
EXAMPLE 2: Use pre-configured logger (RECOMMENDED)
|
||
===================================================
|
||
// In admin frontend
|
||
const themeLog = window.LogConfig.loggers.vendorTheme;
|
||
themeLog.info('Theme editor loaded');
|
||
|
||
// In vendor frontend
|
||
const dashLog = window.LogConfig.loggers.dashboard;
|
||
dashLog.info('Dashboard initialized');
|
||
|
||
// In shop frontend
|
||
const cartLog = window.LogConfig.loggers.cart;
|
||
cartLog.info('Cart updated');
|
||
|
||
|
||
EXAMPLE 3: Create custom logger
|
||
================================
|
||
const myLog = window.LogConfig.createLogger('MY-FEATURE', 4);
|
||
myLog.info('Feature initialized');
|
||
|
||
|
||
EXAMPLE 4: Check current frontend
|
||
==================================
|
||
if (window.LogConfig.frontend === 'admin') {
|
||
// Admin-specific code
|
||
}
|
||
|
||
|
||
EXAMPLE 5: API call logging
|
||
============================
|
||
window.LogConfig.logApiCall('GET', '/api/vendors', null, 'request');
|
||
const data = await apiClient.get('/api/vendors');
|
||
window.LogConfig.logApiCall('GET', '/api/vendors', data, 'response');
|
||
|
||
|
||
EXAMPLE 6: Performance logging
|
||
===============================
|
||
const start = performance.now();
|
||
await loadData();
|
||
const duration = performance.now() - start;
|
||
window.LogConfig.logPerformance('Load Data', duration);
|
||
|
||
|
||
EXAMPLE 7: Error logging
|
||
=========================
|
||
try {
|
||
await saveData();
|
||
} catch (error) {
|
||
window.LogConfig.logError(error, 'Save Operation');
|
||
}
|
||
|
||
*/ |