🔔 Notification Logger Enhanced

Desktop notifications and smart toast management for your console logs - Never miss critical logs again, even in background tabs!

📑 Table of Contents

• ✨ Enhanced Features
• 🆕 New Improvements
• 🚦 Toast Notification Management
• 🧪 Try It Out Online
• 📦 Easy Integration
• 🚀 Quick Start
• 🧑‍💻 Usage
• ⚙️ API Reference
• 📂 File Structure
• 🙏 Acknowledgements

✨ Enhanced Features

🔔 Console Log Notifications

Automatically converts your console.log messages into desktop notifications and toast popups, ensuring you never miss important logs even when your browser tab is in the background.

🎯 Smart Toast Management (New Enhancement)

• Easy Toasts: Shows toasts when the window is open, else pushes notifications in the background
• Limited Display: Only 6 toasts visible at once
• Intelligent Queueing: Additional toasts wait in queue until space becomes available
• Clean UI: No more notification flooding - maintains clean, organized interface

🎨 Customizable Notifications

• Custom Messages: Pass body, title, and icon for better context
• Image Upload Support: Upload custom icons for personalized notifications
• Default Icons: Automatic happy/sad icons for regular/error logs

🖥️ Browser Integration

• Desktop Notifications: Native Notification API support
• Graceful Fallback: Toast notifications when desktop permissions denied
• Cross-Browser Compatible: Works across modern browsers

🎛️ Easy Control

• Toggle Switch: Enable/disable enhanced logging with simple UI control
• Plug-and-Play: No complex setup required - just include files and start logging

🆕 New Improvements

Enhancement	Description	Benefit
Added toast	Pops toasts when you are on the screen	No need to flood the notification tray
Queue Management	Smart waiting system for excess toasts	Prevents UI flooding and maintains order
Custom Icon	Users can add custom icons for their logs	More flexibility and easily distinguish bw logs, errors and warnings

🚦 Toast Notification Management

Limited Toasts

Only 5 notification toasts will appear on the screen at any time. If more logs are triggered, the extra notifications will wait in a queue and show up as soon as you close existing toasts. This prevents your page from being flooded and keeps the experience clean and manageable.

How it works:

• ✅ Maximum 5 toasts visible simultaneously
• 🔄 Automatic queue management for excess notifications
• 🧹 Clean dismissal system - close one, next appears
• 🎯 Prevents UI clutter and maintains focus

🧪 Try It Out Online!

You can try the original Notification Logger live on the published link:

Test Features:

• Desktop notifications
• Toast popups with custom icons
• Toggle between modes
• Upload custom notification icons

📦 Easy Integration

To start debugging with Notification Logger, simply include the notification-logger.js file in your project.

No dependencies or build steps required—just plug and play!

<script src="notification-logger.js"></script>

That's it! Start logging with enhanced notifications immediately:

// Your logs now become notifications
console.log("Hello World!"); // Shows as toast + desktop notification

// Or use the enhanced API
logger.log("Process completed", "Success", customIcon);

🚀 Quick Start

Clone & Setup

# Clone the enhanced version
git clone https://github.com/omsrivastava512/notification-logger.git
cd notification-logger

Run Demo

# Open in browser
open index.html

Basic Usage

// Simple log with toast notification
logger.log("Hello, World!");

// Enhanced log with title and custom icon
logger.log("Process completed successfully", "Success", myIconFile);

// Error notification with automatic sad icon
logger.err("Something went wrong!", "Error");

🧑‍💻 Usage

Initialization

logger.init();    // Enable enhanced notification logging
logger.destroy(); // Restore original console.log behavior

Logging Examples

// Basic message
logger.log("User logged in successfully");

// With custom title
logger.log("Database connection established", "System Status");

// With custom icon
logger.log("File uploaded", "Upload Complete", customIconFile);

// Error logging
logger.err("Network timeout", "Connection Error");

UI Controls

• Toggle Switch: Enable/disable enhanced logging mode
• Message Input: Type custom log messages
• Title Field: Add optional titles to notifications
• Icon Upload: Upload custom notification icons

⚙️ API Reference

Core Methods

logger.log(body, [title], [icon])

Log a message with optional title and icon.

• Parameters:
  • body (string): Main notification message
  • title (string, optional): Notification title
  • icon (File, optional): Custom icon file
• Behavior:
  • Desktop notification if page hidden
  • Toast notification always shown
  • Queued if 6+ toasts already visible

logger.err(body, [title])

Log an error message with automatic sad icon.

• Parameters:
  • body (string): Error message
  • title (string, optional): Error title
• Features:
  • Automatic error styling
  • Uses unhappy.png icon by default

logger.init()

Enable notification logger functionality.

• Replaces native console.log
• Activates toast and desktop notifications

logger.destroy()

Restore original console behavior.

• Returns console.log to default state
• Disables notification features

Key Features

• Intercepts Console: Routes console.log through notification system
• Page Visibility Detection: Shows desktop notifications when tab hidden
• Dynamic Styling: JavaScript-based styling for consistent appearance
• Resource Efficient: Queue system prevents memory bloat

📂 File Structure

notification-logger-enhanced/
├── notification-logger.js    # Enhanced core logic
├── index.html               # Demo page with improved UI
├── index.css               # Enhanced styles and positioning
├── happy.png               # Default success icon
├── unhappy.png            # Default error icon
└── README.md              # This documentation

🔧 Requirements

• Modern Browser: Notification API support
• No Dependencies: Pure vanilla JavaScript
• Permissions: Desktop notification permissions (optional)

🎯 Use Cases

• Development Debugging: Monitor logs without keeping console open
• Background Processing: Get notified of completed operations
• Error Monitoring: Immediate alerts for critical errors
• User Activity Tracking: Non-intrusive logging of user actions

🙏 Acknowledgements

• Original Creator & Project: Built and maintained by @hkirat
• Inspiration: @hkirat for inspiring innovative developer tools and better debugging experiences
• Enhanced Version: This fork includes improved toast management, strategic positioning, and optimized UI limits
• Community: All developers who provided feedback and ideas for better debugging workflows

---

💡 Perfect for developers who want clean, organized notifications without console clutter!