@hkdigital/lib-core 0.3.14 → 0.4.3

package/dist/logging/internal/adapters/console.js

@@ -1,4 +1,12 @@
-import { LEVELS } from '../constants.js';
+import { dev } from '$app/environment';
+import { LEVELS } from '../../constants.js';
+import {
+  findRelevantFrameIndex,
+  detectErrorMeta,
+  formatErrorDisplay,
+  isMeaningfulFunctionName,
+  parseFunctionName
+} from './formatting.js';
 
 /**
  * (Browser) console adapter that uses native DevTools styling
@@ -32,20 +40,95 @@ export class ConsoleAdapter {
     }
 
     // Use browser console styling
-    const styles = this._getStyles(level);
+    const styles = this.#getStyles(level);
     const prefix = `%c[${source}]`;
 
-    // Merge context with details
-    const logData = details
-      ? { ...this.context, ...details }
-      : Object.keys(this.context).length > 0
-        ? this.context
-        : undefined;
+    // Process details for better error formatting
+    const logData = this.#processLogData(details);
 
     if (logData) {
-      console[this._getConsoleMethod(level)](prefix, styles, message, logData);
+      const consoleMethod = console[this.#getConsoleMethod(level)];
+
+      if (dev && (logData.error || logData.errors)) {
+        // In development mode, expand errors automatically - use black for main message
+        console.log(
+          `%c${message} %c[${source}]`,
+          'color: #d32f2f; font-weight: bold;',
+          'color: #000; font-weight: normal;'
+        );
+        if (logData.errors) {
+          logData.errors.forEach((error, index) => {
+            const appendix = error.errorType ? error.errorType : error.name;
+
+            console.group(
+              `%c${index + 1}. ${error.message} %c(${appendix})`,
+              'color: #d32f2f; font-weight: normal;',
+              'color: #000; font-weight: normal;'
+            );
+            if (error.stack) {
+              console.groupCollapsed(`Stack (${error.stack.length} frames)`);
+              error.stack.forEach((frame, index) => {
+                // Highlight the relevant frame in bold
+                const isRelevant = error.relevantFrameIndex === index;
+                console.log(
+                  `%c${index}: %c${frame}`,
+                  'color: #666;',
+                  isRelevant ? 'color: #000; font-weight: bold;' : 'color: #000;'
+                );
+              });
+              console.groupEnd();
+            }
+            if (error.details) {
+              console.log('Details:', error.details);
+            }
+            if (error.status) {
+              console.log('Status:', error.status);
+            }
+            console.groupEnd();
+          });
+        } else if (logData.error) {
+          const appendix = logData.error.errorType ? logData.error.errorType : logData.error.name;
+
+          console.group(
+            `%c${logData.error.name}: ${logData.error.message} (${appendix})`,
+            'color: #d32f2f; font-weight: bold;'
+          );
+          if (logData.error.stack) {
+            console.groupCollapsed(
+              `Stack (${logData.error.stack.length} frames)`
+            );
+            logData.error.stack.forEach((frame, index) => {
+              // Highlight the relevant frame in bold
+              const isRelevant = logData.error.relevantFrameIndex === index;
+              console.log(
+                `%c${index}: %c${frame}`,
+                'color: #666;',
+                isRelevant ? 'color: #000; font-weight: bold;' : 'color: #000;'
+              );
+            });
+            console.groupEnd();
+          }
+          if (logData.error.details) {
+            console.log('Details:', logData.error.details);
+          }
+          if (logData.error.status) {
+            console.log('Status:', logData.error.status);
+          }
+          console.groupEnd();
+        }
+
+        // Log any other properties
+        // eslint-disable-next-line no-unused-vars
+        const { error, errors, loggedAt } = logData;
+        if (loggedAt) {
+          console.log('Logged at:', loggedAt);
+        }
+      } else {
+        // Production mode or non-error data - use compact format
+        consoleMethod(prefix, styles, message, logData);
+      }
     } else {
-      console[this._getConsoleMethod(level)](prefix, styles, message);
+      console[this.#getConsoleMethod(level)](prefix, styles, message);
     }
   }
 
@@ -54,9 +137,8 @@ export class ConsoleAdapter {
    *
    * @param {string} level - Log level
    * @returns {string} CSS styles
-   * @private
    */
-  _getStyles(level) {
+  #getStyles(level) {
     const baseStyle =
       'padding: 2px 4px; border-radius: 2px; font-weight: bold;';
 
@@ -81,9 +163,8 @@ export class ConsoleAdapter {
    *
    * @param {string} level - Log level
    * @returns {string} Console method name
-   * @private
    */
-  _getConsoleMethod(level) {
+  #getConsoleMethod(level) {
     switch (level) {
       case 'debug':
         return 'debug';
@@ -99,6 +180,233 @@ export class ConsoleAdapter {
     }
   }
 
+  /**
+   * Process log data for better formatting, especially errors
+   *
+   * @param {*} details - Log details
+   * @returns {Object|undefined} Processed log data
+   */
+  #processLogData(details) {
+    // Merge context first
+    let logData =
+      Object.keys(this.context).length > 0 ? { ...this.context } : {};
+
+    if (!details) {
+      return Object.keys(logData).length > 0 ? logData : undefined;
+    }
+
+    // Check if details contains an error with causes - serialize to array
+    if (details instanceof Error) {
+      if (details.cause) {
+        // Error has a cause chain - serialize to array
+        const serialized = this.#serializeErrorChain(details);
+        if (serialized.loggedAt) {
+          logData.loggedAt = serialized.loggedAt;
+        }
+        logData.errors = serialized.chain;
+      } else {
+        // Single error - keep as simple object
+        const cleanedStack = this.#cleanStackTrace(details.stack);
+        const relevantFrameIndex = findRelevantFrameIndex(details, cleanedStack);
+        const errorMeta = detectErrorMeta(details, cleanedStack);
+        logData.error = {
+          name: details.name,
+          message: details.message,
+          stack: cleanedStack,
+          errorType: formatErrorDisplay(errorMeta),
+          ...(relevantFrameIndex >= 0 && { relevantFrameIndex })
+        };
+      }
+    } else if (details.error instanceof Error) {
+      if (details.error.cause) {
+        // Error has a cause chain - serialize to array
+        const serialized = this.#serializeErrorChain(details.error);
+        if (serialized.loggedAt) {
+          logData.loggedAt = serialized.loggedAt;
+        }
+        logData.errors = serialized.chain;
+      } else {
+        // Single error - keep as simple object
+        const cleanedStack = this.#cleanStackTrace(details.error.stack);
+        const relevantFrameIndex = findRelevantFrameIndex(details.error, cleanedStack);
+        const errorMeta = detectErrorMeta(details.error, cleanedStack);
+        logData.error = {
+          name: details.error.name,
+          message: details.error.message,
+          stack: cleanedStack,
+          errorType: formatErrorDisplay(errorMeta),
+          ...(relevantFrameIndex >= 0 && { relevantFrameIndex })
+        };
+      }
+      // Include other details except the error
+      // eslint-disable-next-line no-unused-vars
+      const { error, ...otherDetails } = details;
+      if (Object.keys(otherDetails).length > 0) {
+        Object.assign(logData, otherDetails);
+      }
+    } else {
+      Object.assign(logData, details);
+    }
+
+    return Object.keys(logData).length > 0 ? logData : undefined;
+  }
+
+  /**
+   * Serialize error chain into consumable log format
+   *
+   * @param {Error} err
+   * @returns {{chain: import('./typedef.js').ErrorSummary[], loggedAt: string|null}} Object with error chain and optional logging location
+   */
+  #serializeErrorChain(err) {
+    const chain = [];
+    let loggedAt = null;
+
+    let current = err;
+    let isFirst = true;
+
+    while (current) {
+      // Check if this is the first error and it's a LoggerError - extract logging context
+      if (isFirst && current.name === 'LoggerError') {
+        if (current.stack) {
+          const cleanedStack = this.#cleanStackTrace(current.stack);
+
+          // For LoggerError, we know it's a logger.error call, so find the relevant frame
+          const loggerErrorIndex = cleanedStack.findIndex(frame =>
+            (frame.includes('Logger.error') && frame.includes('logger/Logger.js')) ||
+            (frame.includes('error@') && frame.includes('logger/Logger.js'))
+          );
+
+          if (loggerErrorIndex >= 0 && loggerErrorIndex + 1 < cleanedStack.length) {
+            const relevantFrame = cleanedStack[loggerErrorIndex + 1];
+            // Remove the "at " prefix for cleaner output
+            loggedAt = relevantFrame.replace(/^\d+→?\s*/, '').replace(/^at\s+/, '');
+          }
+        }
+
+        // Skip the LoggerError and move to the actual error
+        current = /** @type {Error} */ (current.cause);
+        isFirst = false;
+        continue;
+      }
+      const errorObj = {
+        name: current.name || 'Unknown',
+        message: current.message || 'No message'
+      };
+
+      // Add stack to every error for more information
+      if (current.stack) {
+        errorObj.stack = this.#cleanStackTrace(current.stack);
+
+        // Find and mark the most relevant frame for highlighting
+        const relevantFrameIndex = findRelevantFrameIndex(current, errorObj.stack);
+        if (relevantFrameIndex >= 0) {
+          errorObj.relevantFrameIndex = relevantFrameIndex;
+        }
+
+        // Detect error metadata for display
+        const errorMeta = detectErrorMeta(current, errorObj.stack);
+        errorObj.errorType = formatErrorDisplay(errorMeta);
+      }
+
+      // Include additional properties like details, status
+      if ('details' in current) {
+        errorObj.details = current.details;
+      }
+      if ('status' in current) {
+        errorObj.status = current.status;
+      }
+
+      chain.push(errorObj);
+      current = /** @type {Error} */ (current.cause);
+      isFirst = false;
+    }
+
+    return { chain, loggedAt };
+  }
+
+
+  /**
+   * Clean stack trace for browser display and convert to array
+   *
+   * @param {string} stack - Original stack trace
+   * @returns {Array<string>} Cleaned stack trace as array of relevant frames
+   */
+  #cleanStackTrace(stack) {
+    if (!stack) {
+      return [];
+    }
+
+    const lines = stack.split('\n');
+    const relevantFrames = [];
+
+    // Debug: log the original stack to see what we're working with
+    // console.debug('Original stack lines:', lines);
+
+    for (const line of lines) {
+      const trimmed = line.trim();
+
+      // Skip empty lines
+      if (!trimmed) {
+        continue;
+      }
+
+      // Detect stack frame lines:
+      // Firefox/Safari: "functionName@url:line:col"
+      // Chrome: "at functionName (url:line:col)" or "at url:line:col"
+      const isFirefoxFormat = trimmed.includes('@');
+      const isChromeFormat = trimmed.startsWith('at ');
+
+      if (!isFirefoxFormat && !isChromeFormat) {
+        continue; // Skip error message line
+      }
+
+      let cleaned = trimmed;
+
+      // Convert Chrome format to Firefox format for consistency
+      if (isChromeFormat) {
+        // "at functionName (url:line:col)" -> "functionName@url:line:col"
+        cleaned = cleaned.replace(/^at\s+(.+?)\s+\((.+)\)$/, '$1@$2');
+        // "at url:line:col" -> "url:line:col" (anonymous function)
+        cleaned = cleaned.replace(/^at\s+([^(]+)$/, '$1');
+      }
+
+      // Remove localhost URLs and make them relative
+      cleaned = cleaned.replace(/http:\/\/localhost:\d+\//g, '');
+
+      // Simplify vite dev dependencies
+      cleaned = cleaned.replace(
+        /node_modules\/\.vite\/deps\/[^?]+\?v=[a-f0-9]+/g,
+        'node_modules/vite-deps'
+      );
+
+      // Clean up query parameters on source files
+      cleaned = cleaned.replace(/\?t=\d+/g, '');
+
+      // Skip vite-deps (Svelte framework internals) but keep other node_modules
+      if (cleaned.includes('node_modules/vite-deps')) {
+        continue;
+      }
+
+      // Skip .svelte-kit generated files (except first few)
+      if (
+        cleaned.includes('.svelte-kit/generated') &&
+        relevantFrames.length > 3
+      ) {
+        continue;
+      }
+
+      relevantFrames.push(cleaned);
+
+      // Limit to first 15 relevant frames to see more
+      if (relevantFrames.length >= 15) {
+        break;
+      }
+    }
+
+    // console.debug('Cleaned stack frames:', relevantFrames);
+    return relevantFrames;
+  }
+
   /**
    * Create a child logger with additional context
    *

package/dist/logging/internal/adapters/formatting.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Shared error formatting logic for logging adapters
+ *
+ * This module contains reusable functions for analyzing and formatting
+ * errors with enhanced stack trace detection and error type identification.
+ */
+/**
+ * Find the most relevant frame index for highlighting in stack traces
+ *
+ * @param {Error} error - The error object
+ * @param {string[]} cleanedStack - Array of cleaned stack trace frames
+ * @returns {number} Index of the most relevant frame to highlight
+ */
+export function findRelevantFrameIndex(error: Error, cleanedStack: string[]): number;
+/**
+ * Detect error metadata for structured logging and display
+ *
+ * @param {Error} error - The error object
+ * @param {string[]} cleanedStack - Array of cleaned stack trace frames
+ * @returns {import('./typedef.js').ErrorSummaryMeta} Error metadata
+ */
+export function detectErrorMeta(error: Error, cleanedStack: string[]): import("./typedef.js").ErrorSummaryMeta;
+/**
+ * Format error metadata for console display
+ *
+ * @param {{category: string, method: string, origin?: string|null}} errorMeta - Error metadata
+ * @returns {string} Formatted display string (e.g., "httpGet in myFunction")
+ */
+export function formatErrorDisplay(errorMeta: {
+    category: string;
+    method: string;
+    origin?: string | null;
+}): string;
+/**
+ * Get the specific HkPromise method that caused the error
+ *
+ * @param {string[]} cleanedStack - Array of cleaned stack trace frames
+ * @returns {string|null} HkPromise method name or null
+ */
+export function getHkPromiseMethod(cleanedStack: string[]): string | null;
+/**
+ * Get the specific HTTP method that caused the error
+ *
+ * @param {string[]} cleanedStack - Array of cleaned stack trace frames
+ * @returns {string|null} HTTP method name or null
+ */
+export function getHttpMethod(cleanedStack: string[]): string | null;
+/**
+ * Extract user function name from stack trace
+ *
+ * @param {Error} error - The error object
+ * @param {string[]} cleanedStack - Array of cleaned stack trace frames
+ * @returns {string|null} User function name or null
+ */
+export function extractUserFunctionName(error: Error, cleanedStack: string[]): string | null;
+/**
+ * Check if function name is meaningful (not anonymous or framework code)
+ *
+ * @param {string} functionName - Function name to check
+ * @returns {boolean} True if the function name is meaningful
+ */
+export function isMeaningfulFunctionName(functionName: string): boolean;
+/**
+ * Parse function name from stack frame
+ *
+ * @param {string} frame - Stack trace frame
+ * @returns {string|null} Function name or null
+ */
+export function parseFunctionName(frame: string): string | null;