@mesalvo/logger

Centralized logging system with optional UI and React hooks for Mesalvo applications.

📦 Installation

pnpm add @mesalvo/logger

🚀 Basic Usage

Simple logging (without React)

import { log } from '@mesalvo/logger';

log.info('User authenticated');
log.error('Error loading data', { endpoint: '/api/users' });
log.warn('Validation warning');
log.debug('State updated', { newState });

With custom configuration

import { Logger } from '@mesalvo/logger';

const logger = Logger.getInstance({
  appId: 'my-app',
  appVersion: '1.0.0',
  minLevel: 'info',
  maxStoredLogs: 500,
  showToastOnError: true,
});

logger.info('App started');

With React Hooks

import { useLogger } from '@mesalvo/logger';

function DebugPage() {
  const { logs, stats, clearLogs, exportLogs, refresh } = useLogger();
  
  return (
    <div>
      <p>Total logs: {stats.total}</p>
      <p>Errors: {stats.byLevel.error}</p>
      <button onClick={clearLogs}>Clear</button>
      <button onClick={exportLogs}>Export</button>
    </div>
  );
}

With Full UI (requires @mesalvo/react-ui)

import { useLogger, LogViewer} from '@mesalvo/logger';

function DebugPanel() {
  const { logs, clearLogs, exportLogs } = useLogger();
  
  return (
    <LogViewer 
      logs={logs}
      onClear={clearLogs}
      onExport={exportLogs}
      maxHeight="600px"
    />
  );
}

Full panel with statistics

import { useLogger } from '@mesalvo/logger';
import { LogsDebugPanel } from '@mesalvo/logger';

function FullDebugPage() {
  const { logs, stats, clearLogs, exportLogs } = useLogger();
  
  return (
    <LogsDebugPanel 
      logs={logs}
      stats={stats}
      onClear={clearLogs}
      onExport={exportLogs}
    />
  );
}

Global initialization with error handlers

import { useLoggerInit } from '@mesalvo/logger';

function App() {
  useLoggerInit(); // Setup global error handlers
  return <YourApp />;
}

Toast integration (optional)

import { setToastHandler } from '@mesalvo/logger';
import { toast } from '@mesalvo/react-ui';

// In your app initialization
setToastHandler(toast);

🎯 Features

Core (always available)

• ✅ 4 log levels (debug, info, warn, error)
• ✅ localStorage persistence
• ✅ Stack trace capture
• ✅ Context enrichment (user, URL, session)
• ✅ JSON export
• ✅ Advanced filtering
• ✅ Log statistics
• ✅ Full TypeScript support

React (optional)

• ✅ useLogger hook to access logs
• ✅ useLoggerInit hook for global setup
• ✅ Auto-refresh logs

UI (optional - requires @mesalvo/react-ui)

• ✅ LogViewer component to display logs
• ✅ LogsDebugPanel component with statistics
• ✅ Filter by level
• ✅ Text search
• ✅ JSON export

📁 Export Structure

// Core
import { Logger, log, LogLevel, setToastHandler } from '@mesalvo/logger';

// React hooks
import { useLogger, useLoggerInit } from '@mesalvo/logger';

// UI Components (requires @mesalvo/react-ui)
import { LogViewer, LogsDebugPanel } from '@mesalvo/logger';

🔧 API

Logger

const logger = Logger.getInstance(config);

logger.debug(message, data?);
logger.info(message, data?);
logger.warn(message, data?);
logger.error(message, error?);

logger.getLogs(): LogEntry[];
logger.getFilteredLogs(filter): LogEntry[];
logger.getStats(): LogStats;
logger.clearLogs(): void;
logger.exportLogs(filter?): void;
logger.configure(config): void;

useLogger Hook

const {
  logs,        // LogEntry[]
  stats,       // LogStats
  clearLogs,   // () => void
  exportLogs,  // () => void
  refresh,     // () => void
} = useLogger(filter?);

📝 Types

enum LogLevel {
  DEBUG = "debug",
  INFO = "info",
  WARN = "warn",
  ERROR = "error",
}

interface LogEntry {
  id: string;
  timestamp: number;
  level: LogLevel;
  message: string;
  data?: Record<string, unknown>;
  context: LogContext;
  stackTrace?: string;
  source?: SourceLocation;
}

interface LoggerConfig {
  appId: string;
  appVersion: string;
  minLevel: LogLevel;
  maxStoredLogs: number;
  enableConsole: boolean;
  enableStorage: boolean;
  showToastOnError: boolean;
  showToastOnWarn: boolean;
  captureSourceLocation: boolean;
  environment: string;
}

🧪 Testing

The package includes utilities for testing:

import { createMockLogger, setupLoggerForTests, resetLoggerForTests } from '@mesalvo/logger';

beforeEach(() => {
  setupLoggerForTests();
});

afterEach(() => {
  resetLoggerForTests();
});

📦 Dependencies

Core

• No external dependencies

React

• react (peer dependency)

Components

• react (peer dependency)
• @mesalvo/react-ui (peer dependency, optional)

📄 License

ISC © Mesalvo GmbH