@crimsonsunset/jsg-logger 1.7.13 → 1.7.15

package/docs/roadmap.md

@@ -435,6 +435,11 @@ Console filtering updates
 
 ### **🔮 Future Enhancements**
 
+#### **Component Management** (Future)
+- [ ] **Component removal notification** - Subscribe to component removal events (currently only addition events are supported)
+- [ ] **Component lifecycle tracking** - Track when components are created and removed
+- **Note:** Component addition notifications are implemented. Removal notifications are deferred for future enhancement (see TODO in `index.js:817`)
+
 #### **Advanced Filtering** (Phase 6.5)
 - [ ] **File-level controls** - Panel interface for file overrides
 - [ ] **Search filtering** - Filter logs by message content

package/examples/advanced-config.json

@@ -16,6 +16,10 @@
     "jsonPayload": true,
     "stackTrace": true
   },
+  "redact": {
+    "paths": ["password", "token", "*key", "*secret", "*apiKey", "*api_key"],
+    "censor": "[REDACTED]"
+  },
   "components": {
     "core": { 
       "emoji": "🎯", 
@@ -116,6 +120,10 @@
       "display": {
         "jsonPayload": true,
         "stackTrace": true
+      },
+      "redact": {
+        "paths": ["password", "token", "*key", "*secret"],
+        "censor": "***"
       }
     },
     "src/database/*.js": {

package/formatters/browser-formatter.js

@@ -5,6 +5,7 @@
  */
 
 import {configManager} from '../config/config-manager.js';
+import {redactValue} from '../utils/redaction.js';
 
 /**
  * Create browser console formatter for a specific component
@@ -28,6 +29,7 @@ export const createBrowserFormatter = (componentName, logStore = null) => {
                 const component = configManager.getComponentConfig(componentName, filePath);
                 const level = configManager.getLevelConfig(logData.level);
                 const displayConfig = configManager.getDisplayConfig(filePath);
+                const redactConfig = configManager.getRedactConfig(filePath);
 
                 // Check if this log should be displayed based on effective level
                 const effectiveLevel = configManager.getEffectiveLevel(componentName, filePath);
@@ -84,7 +86,8 @@ export const createBrowserFormatter = (componentName, logStore = null) => {
                 if (displayConfig.jsonPayload) {
                     const contextData = extractContextData(logData);
                     if (Object.keys(contextData).length > 0) {
-                        displayContextData(contextData);
+                        const redactedData = redactValue(contextData, redactConfig);
+                        displayContextData(redactedData);
                     }
                 }
 
@@ -158,6 +161,7 @@ function extractContextData(logData) {
     return contextData;
 }
 
+
 /**
  * Display context data with tree-like structure
  * @param {Object} contextData - Context data to display

package/formatters/cli-formatter.js

@@ -5,6 +5,7 @@
 
 import { LEVEL_SCHEME } from '../config/component-schemes.js';
 import { configManager } from '../config/config-manager.js';
+import { redactValue } from '../utils/redaction.js';
 
 /**
  * Format a value for display in context tree
@@ -27,6 +28,7 @@ const formatValue = (value) => {
   return String(value);
 };
 
+
 /**
  * Create CLI formatter with context data support
  * @returns {Object} Stream-like object for Pino
@@ -62,10 +64,14 @@ export const createCLIFormatter = () => {
         const contextKeys = Object.keys(log).filter(key => !internalFields.includes(key));
         
         if (contextKeys.length > 0) {
+          // Get redact config and apply redaction
+          const redactConfig = configManager.getRedactConfig();
+          const redactedLog = redactValue(log, redactConfig);
+          
           contextKeys.forEach((key, index) => {
             const isLast = index === contextKeys.length - 1;
             const prefix = isLast ? '   └─' : '   ├─';
-            const value = formatValue(log[key]);
+            const value = formatValue(redactedLog[key]);
             console.log(`${prefix} ${key}: ${value}`);
           });
         }

package/formatters/server-formatter.js

@@ -3,6 +3,8 @@
  * Structured JSON output for production logging and log aggregation
  */
 
+import {configManager} from '../config/config-manager.js';
+
 /**
  * Create server formatter (structured JSON)
  * @returns {null} No custom formatter - uses Pino's default JSON output
@@ -18,6 +20,8 @@ export const createServerFormatter = () => {
  * @returns {Object} Pino configuration for server environments
  */
 export const getServerConfig = () => {
+  const redactConfig = configManager.getRedactConfig();
+  
   return {
     level: 'info', // More conservative logging in production
     formatters: {
@@ -33,10 +37,10 @@ export const getServerConfig = () => {
         };
       }
     },
-    // Redact sensitive information in production
+    // Redact sensitive information in production (configurable)
     redact: {
-      paths: ['password', 'token', 'key', 'secret'],
-      censor: '[REDACTED]'
+      paths: redactConfig.paths.length > 0 ? redactConfig.paths : ['password', 'token', 'key', 'secret'],
+      censor: redactConfig.censor || '[REDACTED]'
     }
   };
 };

package/index.js

@@ -57,6 +57,7 @@ class JSGLogger {
         this.environment = null; // Will be set after config loads
         this.initialized = false;
         this.components = {}; // Auto-discovery getters
+        this.componentSubscribers = []; // Subscribers for component change events
     }
 
     /**
@@ -75,6 +76,7 @@ class JSGLogger {
             // Make runtime controls available globally in browser for debugging
             if (isBrowser() && typeof window !== 'undefined' && JSGLogger._enhancedLoggers?.controls) {
                 window.JSG_Logger = JSGLogger._enhancedLoggers.controls;
+                window.__JSG_Logger_Enhanced__ = JSGLogger._enhancedLoggers;
             }
         } else if (hasOptions) {
             // Instance exists but new options provided - reinitialize
@@ -84,6 +86,7 @@ class JSGLogger {
             // (same as getInstanceSync behavior)
             if (isBrowser() && typeof window !== 'undefined' && JSGLogger._enhancedLoggers?.controls) {
                 window.JSG_Logger = JSGLogger._enhancedLoggers.controls;
+                window.__JSG_Logger_Enhanced__ = JSGLogger._enhancedLoggers;
             }
         }
 
@@ -92,21 +95,62 @@ class JSGLogger {
 
     /**
      * Get singleton instance synchronously (for environments without async support)
+     * Checks window.JSG_Logger first to ensure singleton works across separate bundles
      * @param {Object} options - Initialization options (only used on first call)
      * @returns {Object} Enhanced logger exports with controls API
      */
     static getInstanceSync(options = {}) {
         const hasOptions = options && Object.keys(options).length > 0;
+        
+        // If options are provided, we need to reinitialize even if global instance exists
+        // This ensures config changes (like devtools.enabled) are applied
+        if (hasOptions) {
+            // Reinitialize with new options - this will update the global references
+            if (!JSGLogger._instance) {
+                JSGLogger._instance = new JSGLogger();
+            }
+            JSGLogger._enhancedLoggers = JSGLogger._instance.initSync(options);
+            
+            // Update global references after reinitialization
+            if (isBrowser() && typeof window !== 'undefined' && JSGLogger._enhancedLoggers?.controls) {
+                window.JSG_Logger = JSGLogger._enhancedLoggers.controls;
+                window.__JSG_Logger_Enhanced__ = JSGLogger._enhancedLoggers;
+            }
+            
+            return JSGLogger._enhancedLoggers;
+        }
+        
+        // No options provided - check window.JSG_Logger first to ensure singleton works across bundles
+        // This is critical when devtools bundle loads separately from main app
+        if (isBrowser() && typeof window !== 'undefined' && window.JSG_Logger) {
+            // If enhanced loggers reference exists, use it (preferred)
+            if (window.__JSG_Logger_Enhanced__) {
+                return window.__JSG_Logger_Enhanced__;
+            }
+            // Fallback: reconstruct enhanced loggers from controls object
+            // This handles cases where __JSG_Logger_Enhanced__ wasn't set
+            const globalControls = window.JSG_Logger;
+            return {
+                ...globalControls,
+                controls: globalControls,
+                getComponent: globalControls.getComponent,
+                getInstanceSync: JSGLogger.getInstanceSync.bind(JSGLogger),
+                getInstance: JSGLogger.getInstance.bind(JSGLogger),
+                logPerformance: JSGLogger.logPerformance.bind(JSGLogger),
+                JSGLogger: JSGLogger
+            };
+        }
 
+        // No options and no global instance - first time initialization
         if (!JSGLogger._instance) {
-            // First time initialization
             JSGLogger._instance = new JSGLogger();
             JSGLogger._enhancedLoggers = JSGLogger._instance.initSync(options);
-        } else if (hasOptions) {
-            // Instance exists but new options provided - reinitialize
-            // Only reinit if flag is not set (first init hasn't completed yet)
-            // or if we need to apply new config
-            JSGLogger._enhancedLoggers = JSGLogger._instance.initSync(options);
+            
+            // Make runtime controls available globally in browser for debugging
+            if (isBrowser() && typeof window !== 'undefined' && JSGLogger._enhancedLoggers?.controls) {
+                window.JSG_Logger = JSGLogger._enhancedLoggers.controls;
+                window.__JSG_Logger_Enhanced__ = JSGLogger._enhancedLoggers;
+            }
         }
 
         return JSGLogger._enhancedLoggers;
@@ -282,6 +326,19 @@ class JSGLogger {
 
             // Create auto-discovery getters (eager)
             this._createAutoDiscoveryGetters();
+            
+            // Notify component subscribers after reinitialization (if components changed)
+            // This ensures panel sees components created during reinit, not just via getComponent()
+            if (this.componentSubscribers.length > 0) {
+                const currentComponents = Object.keys(this.loggers);
+                this.componentSubscribers.forEach(callback => {
+                    try {
+                        callback(currentComponents);
+                    } catch (error) {
+                        metaError('Component subscriber error:', error);
+                    }
+                });
+            }
 
             this.initialized = true;
 
@@ -494,7 +551,25 @@ class JSGLogger {
                 },
 
                 // Component controls
-                listComponents: () => configManager.getAvailableComponents(),
+                listComponents: () => Object.keys(this.loggers),
+                subscribeToComponents: (callback) => {
+                    this.componentSubscribers.push(callback);
+                    // Immediately call callback with current component list (don't wait for changes)
+                    // This ensures panel sees components created during reinitialization
+                    const currentComponents = Object.keys(this.loggers);
+                    try {
+                        callback(currentComponents);
+                    } catch (error) {
+                        this.loggers.core?.error('Component subscriber error (initial call):', error);
+                    }
+                    // Return unsubscribe function
+                    return () => {
+                        const index = this.componentSubscribers.indexOf(callback);
+                        if (index > -1) {
+                            this.componentSubscribers.splice(index, 1);
+                        }
+                    };
+                },
                 enableDebugMode: () => {
                     Object.keys(this.loggers).forEach(component => {
                         if (this.loggers[component]) {
@@ -801,6 +876,26 @@ class JSGLogger {
             if (camelName !== componentName) {
                 this.components[camelName] = () => this.getComponent(componentName);
             }
+
+            // Notify component subscribers of the change (emit on every add, not deduplicated)
+            // TODO: Add component removal notification support (future enhancement)
+            const currentComponents = Object.keys(this.loggers);
+            if (this.componentSubscribers.length > 0) {
+                if (this.loggers.core) {
+                    this.loggers.core.debug(`Notifying ${this.componentSubscribers.length} subscribers of component change`, { 
+                        component: componentName, 
+                        totalComponents: currentComponents.length,
+                        components: currentComponents 
+                    });
+                }
+            }
+            this.componentSubscribers.forEach(callback => {
+                try {
+                    callback(currentComponents);
+                } catch (error) {
+                    this.loggers.core?.error('Component subscriber error:', error);
+                }
+            });
         }
 
         return this.loggers[componentName];
@@ -858,10 +953,18 @@ class JSGLogger {
 
     /**
      * Get singleton controls without triggering initialization
+     * Checks window.JSG_Logger first to ensure singleton works across separate bundles
      * Returns the controls object from the current singleton instance if it exists
      * @returns {Object|null} Controls object or null if singleton not initialized
      */
     static getControls() {
+        // Check window.JSG_Logger first to ensure singleton works across bundles
+        // This is critical when devtools bundle loads separately from main app
+        if (isBrowser() && typeof window !== 'undefined' && window.JSG_Logger) {
+            return window.JSG_Logger;
+        }
+        
+        // Fall back to local instance if global doesn't exist
         return JSGLogger._enhancedLoggers?.controls || null;
     }
 }
@@ -871,8 +974,10 @@ class JSGLogger {
 const enhancedLoggers = JSGLogger.getInstanceSync();
 
 // Make runtime controls available globally in browser for debugging
+// Also store enhanced loggers reference so getInstanceSync() can access it across bundles
 if (isBrowser() && typeof window !== 'undefined') {
     window.JSG_Logger = enhancedLoggers.controls;
+    window.__JSG_Logger_Enhanced__ = enhancedLoggers;
 }
 
 // Add static methods to the enhanced loggers for convenience

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crimsonsunset/jsg-logger",
-  "version": "1.7.13",
+  "version": "1.7.15",
   "type": "module",
   "description": "Multi-environment logger with smart detection, file-level overrides, and beautiful console formatting. Test it live: https://logger.joesangiorgio.com/",
   "main": "index.js",

package/utils/redaction.js

@@ -0,0 +1,51 @@
+/**
+ * Redaction utility functions for sensitive data protection
+ * Used by browser, CLI, and server formatters
+ */
+
+/**
+ * Check if a key should be redacted based on patterns
+ * @param {string} key - Key to check
+ * @param {string[]} paths - Array of patterns (exact match or wildcard like *key)
+ * @returns {boolean} Whether key should be redacted
+ */
+export function shouldRedactKey(key, paths) {
+  return paths.some(pattern => {
+    if (pattern.startsWith('*')) {
+      const suffix = pattern.slice(1).toLowerCase();
+      return key.toLowerCase().endsWith(suffix);
+    }
+    return key.toLowerCase() === pattern.toLowerCase();
+  });
+}
+
+/**
+ * Redact sensitive values from an object based on key patterns
+ * @param {*} value - Value to redact (object, array, or primitive)
+ * @param {Object} redactConfig - Redaction configuration with paths and censor
+ * @returns {*} Redacted value
+ */
+export function redactValue(value, redactConfig) {
+  if (!redactConfig || !redactConfig.paths || redactConfig.paths.length === 0) {
+    return value;
+  }
+
+  if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+    const redacted = {};
+    for (const [key, val] of Object.entries(value)) {
+      if (shouldRedactKey(key, redactConfig.paths)) {
+        redacted[key] = redactConfig.censor || '[REDACTED]';
+      } else {
+        redacted[key] = redactValue(val, redactConfig);
+      }
+    }
+    return redacted;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(item => redactValue(item, redactConfig));
+  }
+
+  return value;
+}
+