SmartLogger DevTools

A reusable JavaScript/TypeScript package that intercepts console logs and provides a floating UI with a modal log viewer

Features

• Console Interception: Intercepts console.log, warn, error, info, and debug methods.
• Configurable Logging: Control log suppression, timestamp display, component name display, and active log levels.
• Log History: Stores a configurable number of recent log entries in memory.
• Floating UI: A discreet floating button to open the log viewer modal.
• Interactive Log Modal: Displays logs with filtering by level, search functionality, and the ability to clear logs.
• Production Suppression: Automatically suppresses logs in production environments by default.
• Type-safe: Written in TypeScript with comprehensive type definitions.
• Framework Compatible: Designed for seamless integration with React and Next.js projects.
• Clean Up: Provides a method to restore original console behavior.

Installation

npm install @amit_mandal/smart-logger-devtools
# or
yarn add @amit_mandal/smart-logger-devtools

Usage

1. Initialize SmartLogger

Initialize the SmartLogger early in your application, for example, in _app.tsx (Next.js) or main.tsx (React).

// src/main.tsx or pages/_app.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { SmartLogger } from '@amit_mandal/smart-logger-devtools';

// Initialize SmartLogger before your application renders
SmartLogger.init({
  enabled: true, // Set to false to suppress all logs
  showTimestamp: true, // Prepend timestamp to logs
  showComponentName: true, // Prepend component name if provided
  maxHistory: 100, // Store last 100 logs
  level: ['log', 'warn', 'error', 'info', 'debug'], // Only show these log levels
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

// Example logs after initialization
console.log('[App] Application started.');
console.warn('[Auth] User session expiring soon.');
console.error('[API] Failed to fetch data.', { status: 500 });
console.info('This is an info message.');
console.debug('This is a debug message.');

2. Add the DevTools Component to Your App

Place the SmartLoggerDevTools component at the root level of your React application. This component renders the floating button and the log modal.

// src/App.tsx
import React from 'react';
import { SmartLoggerDevTools } from '@amit_mandal/smart-logger-devtools';

function App() {
  return (
    <div>
      <h1>My Application</h1>
      {/* Your application content goes here */}

      {/* Add the DevTools component, ideally at the root of your app */}
      <SmartLoggerDevTools />
    </div>
  );
}

export default App;

Configuration Options

These options are passed to SmartLogger.init(config):

| Option | Type | Default | Description | | :---------------- | :----------- | :-------------------------------------------- | :------------------------------------------------------------------------ | | enabled | boolean | process.env.NODE_ENV !== 'production' | If false, all logs are suppressed and not stored. | | showTimestamp | boolean | true | Prepends an ISO-formatted timestamp to each log in the console. | | showComponentName | boolean | false | Prepends a component/module name (e.g., [ComponentName]) to logs in the console. | | maxHistory | number | 100 | The maximum number of log entries to store in memory and display in the modal. | | level | LogLevel[] | ['log', 'warn', 'error', 'info', 'debug'] | An array of log levels to enable. Other levels will be suppressed from history and console output. |

Utility Methods

SmartLogger.getHistory()

Retrieves the array of stored log entries.

import { SmartLogger, LogEntry } from '@amit_mandal/smart-logger-devtools';

const history: LogEntry[] = SmartLogger.getHistory();
console.log('Current log history:', history);

SmartLogger.clearHistory()

Clears all stored log entries from the history and the modal display.

import { SmartLogger } from '@amit_mandal/smart-logger-devtools';

SmartLogger.clearHistory();
console.log('History after clearing:', SmartLogger.getHistory());

SmartLogger.destroy()

Restores the original console methods and cleans up the logger's internal state. This is useful for testing or when you no longer need SmartLogger.

import { SmartLogger } from '@amit_mandal/smart-logger-devtools';

SmartLogger.destroy();
console.log('SmartLogger destroyed. Original console behavior restored.');

Log Entry Structure

Each log entry stored in the history has the following structure:

interface LogEntry {
  id: string;        // Unique ID for the log entry
  timestamp: string; // ISO-formatted timestamp
  level: 'log' | 'warn' | 'error' | 'info' | 'debug';
  message: string;   // The main log message
  args: any[];       // Additional arguments passed to the console method
}

Development vs. Production

By default, SmartLogger is enabled in development environments (process.env.NODE_ENV !== 'production') and disabled in production. When disabled, all console logs are suppressed from history and the modal, and only the original console methods are called (if enabled is explicitly false, even original calls might be suppressed depending on the level configuration). You can override this behavior with the enabled configuration option.

Contributing

Feel free to open issues or pull requests on the GitHub repository.

License

This project is licensed under the MIT License.