{"_id":"@amit_mandal/smart-logger-devtools","_rev":"2-4399dae6b53cc46a326e29734051355d","name":"@amit_mandal/smart-logger-devtools","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@amit_mandal/smart-logger-devtools","version":"1.0.0","keywords":["logger","console","intercept","history","typescript"],"author":{"name":"Amit Chand Mandal"},"license":"MIT","_id":"@amit_mandal/smart-logger-devtools@1.0.0","maintainers":[{"name":"amit_mandal","email":"mandalamitchand@gmail.com"}],"dist":{"shasum":"868551af983a90601573de10042e9deab75799e3","tarball":"https://registry.npmjs.org/@amit_mandal/smart-logger-devtools/-/smart-logger-devtools-1.0.0.tgz","fileCount":19,"integrity":"sha512-zPuzPsNWMNLqFHIEvhmhcoTL6/Z2VtZeUy1L+vWXXsRQpGKmsSTrqvlz73VaZ7Op3sx2ovzmgFPntv2TrkPHng==","signatures":[{"sig":"MEUCIBAmNpLpabjDXog2SUdkno1TW3MNVwTEvnkfYrl0URedAiEArjPOQhTbj/9oOXQ9wyOFOHmiluwX5CfNgDIf12g3Br4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":91181},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup src/index.ts --format cjs,esm --watch --dts --injectStyle","test":"vitest run","build":"tsup src/index.ts --format cjs,esm --dts --clean --injectStyle"},"_npmUser":{"name":"amit_mandal","email":"mandalamitchand@gmail.com"},"_npmVersion":"11.8.0","description":"A reusable console logger with history management and production suppression.","directories":{},"_nodeVersion":"25.6.0","dependencies":{"react":"^18.0.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","react":"^19.2.4","vitest":"^1.6.1","react-dom":"^19.2.4","typescript":"^5.9.3","@types/node":"^25.5.0","@types/react":"^19.2.14","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/smart-logger-devtools_1.0.0_1775109859058_0.14081939907519225","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@amit_mandal/smart-logger-devtools","version":"1.0.1","description":"A reusable console logger with history management and production suppression.","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"build":"tsup src/index.ts --format cjs,esm --dts --clean --injectStyle","dev":"tsup src/index.ts --format cjs,esm --watch --dts --injectStyle","test":"vitest run"},"keywords":["logger","console","intercept","history","typescript"],"author":{"name":"Amit Chand Mandal"},"license":"MIT","devDependencies":{"@types/node":"^25.5.0","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","react":"^19.2.4","react-dom":"^19.2.4","tsup":"^8.5.1","typescript":"^5.9.3","vitest":"^1.6.1"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"dependencies":{"react":"^18.0.0"},"_id":"@amit_mandal/smart-logger-devtools@1.0.1","_nodeVersion":"25.6.0","_npmVersion":"11.8.0","dist":{"integrity":"sha512-62+iCu77HdYQVup5Q7O0rwceweMo6nF3Gsgvap3SH45d6iaWO2f/cYpRQ/+2OwSn846N4EQCTZ4JysGtOeImcA==","shasum":"181651b4a20d0d1461610ac50ad0b16b070dd910","tarball":"https://registry.npmjs.org/@amit_mandal/smart-logger-devtools/-/smart-logger-devtools-1.0.1.tgz","fileCount":18,"unpackedSize":82765,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC5M+XwCC6kh0Hyg/qTjDQQoEK5Mf24znkczLapooFECgIhANabLNYtY8UQ/qze+fKYf8kBiyCkcYhXKvGXtytJpWaV"}]},"_npmUser":{"name":"amit_mandal","email":"mandalamitchand@gmail.com"},"directories":{},"maintainers":[{"name":"amit_mandal","email":"mandalamitchand@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/smart-logger-devtools_1.0.1_1775110193605_0.7127271110597817"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-02T06:04:18.954Z","modified":"2026-04-02T06:09:53.849Z","1.0.0":"2026-04-02T06:04:19.232Z","1.0.1":"2026-04-02T06:09:53.746Z"},"author":{"name":"Amit Chand Mandal"},"license":"MIT","keywords":["logger","console","intercept","history","typescript"],"description":"A reusable console logger with history management and production suppression.","maintainers":[{"name":"amit_mandal","email":"mandalamitchand@gmail.com"}],"readme":"# SmartLogger DevTools\n\nA reusable JavaScript/TypeScript package that intercepts console logs and provides a floating UI with a modal log viewer\n\n## Features\n\n- **Console Interception**: Intercepts `console.log`, `warn`, `error`, `info`, and `debug` methods.\n- **Configurable Logging**: Control log suppression, timestamp display, component name display, and active log levels.\n- **Log History**: Stores a configurable number of recent log entries in memory.\n- **Floating UI**: A discreet floating button to open the log viewer modal.\n- **Interactive Log Modal**: Displays logs with filtering by level, search functionality, and the ability to clear logs.\n- **Production Suppression**: Automatically suppresses logs in production environments by default.\n- **Type-safe**: Written in TypeScript with comprehensive type definitions.\n- **Framework Compatible**: Designed for seamless integration with React and Next.js projects.\n- **Clean Up**: Provides a method to restore original console behavior.\n\n## Installation\n\n```bash\nnpm install @amit_mandal/smart-logger-devtools\n# or\nyarn add @amit_mandal/smart-logger-devtools\n```\n\n## Usage\n\n### 1. Initialize SmartLogger\n\nInitialize the `SmartLogger` early in your application, for example, in `_app.tsx` (Next.js) or `main.tsx` (React).\n\n```typescript\n// src/main.tsx or pages/_app.tsx\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\nimport { SmartLogger } from '@amit_mandal/smart-logger-devtools';\n\n// Initialize SmartLogger before your application renders\nSmartLogger.init({\n  enabled: true, // Set to false to suppress all logs\n  showTimestamp: true, // Prepend timestamp to logs\n  showComponentName: true, // Prepend component name if provided\n  maxHistory: 100, // Store last 100 logs\n  level: ['log', 'warn', 'error', 'info', 'debug'], // Only show these log levels\n});\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n);\n\n// Example logs after initialization\nconsole.log('[App] Application started.');\nconsole.warn('[Auth] User session expiring soon.');\nconsole.error('[API] Failed to fetch data.', { status: 500 });\nconsole.info('This is an info message.');\nconsole.debug('This is a debug message.');\n```\n\n### 2. Add the DevTools Component to Your App\n\nPlace the `SmartLoggerDevTools` component at the root level of your React application. This component renders the floating button and the log modal.\n\n```typescript\n// src/App.tsx\nimport React from 'react';\nimport { SmartLoggerDevTools } from '@amit_mandal/smart-logger-devtools';\n\nfunction App() {\n  return (\n    <div>\n      <h1>My Application</h1>\n      {/* Your application content goes here */}\n\n      {/* Add the DevTools component, ideally at the root of your app */}\n      <SmartLoggerDevTools />\n    </div>\n  );\n}\n\nexport default App;\n```\n\n### Configuration Options\n\nThese options are passed to `SmartLogger.init(config)`:\n\n| Option            | Type         | Default                                       | Description                                                               |\n| :---------------- | :----------- | :-------------------------------------------- | :------------------------------------------------------------------------ |\n| `enabled`         | `boolean`    | `process.env.NODE_ENV !== 'production'`       | If `false`, all logs are suppressed and not stored.                       |\n| `showTimestamp`   | `boolean`    | `true`                                        | Prepends an ISO-formatted timestamp to each log in the console.           |\n| `showComponentName` | `boolean`    | `false`                                       | Prepends a component/module name (e.g., `[ComponentName]`) to logs in the console.       |\n| `maxHistory`      | `number`     | `100`                                         | The maximum number of log entries to store in memory and display in the modal. |\n| `level`           | `LogLevel[]` | `['log', 'warn', 'error', 'info', 'debug']` | An array of log levels to enable. Other levels will be suppressed from history and console output. |\n\n### Utility Methods\n\n#### `SmartLogger.getHistory()`\n\nRetrieves the array of stored log entries.\n\n```typescript\nimport { SmartLogger, LogEntry } from '@amit_mandal/smart-logger-devtools';\n\nconst history: LogEntry[] = SmartLogger.getHistory();\nconsole.log('Current log history:', history);\n```\n\n#### `SmartLogger.clearHistory()`\n\nClears all stored log entries from the history and the modal display.\n\n```typescript\nimport { SmartLogger } from '@amit_mandal/smart-logger-devtools';\n\nSmartLogger.clearHistory();\nconsole.log('History after clearing:', SmartLogger.getHistory());\n```\n\n#### `SmartLogger.destroy()`\n\nRestores the original `console` methods and cleans up the logger's internal state. This is useful for testing or when you no longer need `SmartLogger`.\n\n```typescript\nimport { SmartLogger } from '@amit_mandal/smart-logger-devtools';\n\nSmartLogger.destroy();\nconsole.log('SmartLogger destroyed. Original console behavior restored.');\n```\n\n## Log Entry Structure\n\nEach log entry stored in the history has the following structure:\n\n```typescript\ninterface LogEntry {\n  id: string;        // Unique ID for the log entry\n  timestamp: string; // ISO-formatted timestamp\n  level: 'log' | 'warn' | 'error' | 'info' | 'debug';\n  message: string;   // The main log message\n  args: any[];       // Additional arguments passed to the console method\n}\n```\n\n## Development vs. Production\n\nBy 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.\n\n## Contributing\n\nFeel free to open issues or pull requests on the GitHub repository.\n\n## License\n\nThis project is licensed under the MIT License.\n","readmeFilename":"README.md"}