Candy Logger v2.1.0 is a lightweight, zero-runtime-dependency logging library for JavaScript and TypeScript that brings a structured, interactive logging experience directly into the browser.

Instead of relying entirely on an increasingly crowded console output, Candy Logger provides a dedicated developer panel with log levels, tags, search, filtering, object inspection, bookmarks, actions, themes, and JSON export.

The project is open source and built with a simple goal:

Make browser logging easier to read, inspect, and debug.

🔗 GitHub: https://github.com/shehari007/candy-logger 🌐 Live Demo: https://candy-logger.msyb.dev 📦 npm: https://www.npmjs.com/package/candy-logger

---

#🚀 Why Candy Logger?

The browser console is an essential development tool, but debugging large applications can quickly turn into a search through hundreds of unrelated messages.

A typical debugging session might contain:

• API responses
• Authentication events
• warnings
• errors
• database-related information
• application state
• performance measurements
• large JavaScript objects

Candy Logger adds structure to that information without requiring developers to completely change the way they log.

You can continue using familiar JavaScript logging patterns while getting a dedicated UI for inspecting the output.

---

✨ Features

Candy Logger provides a complete set of tools for browser-side debugging:

• 📋 Structured logging interface
• 🎯 Six log levels
• 🏷️ Custom tags
• 🔍 Real-time search
• 🎚️ Log-level filtering
• 📊 Log statistics
• 🔖 Bookmarks
• 📋 Copy log entries
• 🗑️ Delete individual logs
• 🔎 Expandable object inspection
• 📦 JSON inspection
• 📤 JSON export
• 🌙 Dark and light themes
• 📌 Pinned logger panel
• ↔️ Resizable interface
• 🖱️ Draggable panel
• ⚙️ Configurable behavior
• 🔄 Console interception
• 🪶 Zero runtime dependencies
• 💪 TypeScript support

---

🧩 Six Logging Levels

Candy Logger provides six dedicated logging levels:

LOG
INFO
DEBUG
SUCCESS
WARN
ERROR

For example:

candy.log('Application started');

candy.info('User signed in');

candy.debug('Cache lookup completed');

candy.success('Payment processed successfully');

candy.warn('API rate limit is approaching');

candy.error('Payment failed');

Each level is visually distinguished inside the logger UI, making large collections of logs easier to scan.

---

🏷️ Tagged Logging

Log levels alone aren't always enough.

In a large application, you may want to identify where a message originated.

Candy Logger supports custom tags such as:

AUTH
API
DATABASE
PAYMENT
WEBSOCKET
PERFORMANCE
UI

Example:

candy.tagged(
  {
    label: 'AUTH',
    bg: 'rgba(139,92,246,.2)',
    color: '#a78bfa'
  },
  'info',
  'Token refreshed',
  {
    expiresIn: '1h'
  }
);

Multiple tags can also be attached to the same entry:

candy.tagged(
  [
    {
      label: 'API',
      bg: 'rgba(59,130,246,.18)',
      color: '#60a5fa'
    },
    {
      label: 'SLOW',
      bg: 'rgba(239,68,68,.18)',
      color: '#f87171'
    }
  ],
  'warn',
  'Request took longer than expected'
);

This makes it possible to organize logs by both severity and context.

---

🔄 Console Override

One of the most useful features is the ability to intercept the existing browser console.

You don't have to rewrite an entire application from:

console.log(...)

to:

candy.log(...)

Instead, Candy Logger can take over the console:

import { overrideConsole } from 'candy-logger';

overrideConsole({
  forceUI: true
});

Existing calls continue to work:

console.log('Application started');

console.info('User authenticated');

console.warn('Cache is almost full');

console.error('Request failed');

Candy Logger captures those messages and displays them inside its interface.

---

🧠 Improved Object & Error Handling in v2.1.0

Version 2.1.0 focuses heavily on correctness when dealing with real-world JavaScript values.

One important improvement is handling circular objects safely.

Previously, logging an object containing a circular reference could cause serialization problems and potentially throw a TypeError back into the calling code.

In v2.1.0, Candy Logger handles these objects without breaking the caller.

For example:

const user = {
  name: 'John'
};

user.self = user;

console.log(user);

Candy Logger can inspect the object without allowing the circular reference to crash the logging call.

---

❌ Better Error Object Rendering

JavaScript Error objects can contain much more useful information than their enumerable properties suggest.

A naive object serializer can turn an error into:

{}

Candy Logger v2.1.0 improves this behavior.

Errors can now expose useful information such as:

• message
• stack
• cause
• custom properties

For example:

const error = new Error('Database connection failed');

error.code = 'DB_CONNECTION_ERROR';

console.error(error);

Instead of losing the important information, Candy Logger preserves the useful error context for inspection.

This is particularly important when debugging production-like application failures locally.

---

🔎 Search & Filtering

Large applications can generate hundreds or thousands of log entries.

Candy Logger provides real-time filtering so developers can quickly find what they're looking for.

You can filter by:

• log level
• search text
• tags
• bookmarked entries

For example, you can quickly isolate:

ERROR

or search for:

authentication

without manually scanning the entire console output.

---

🔍 Structured Object Inspection

JavaScript applications frequently produce complex objects.

For example:

console.log('API Response', {
  user: {
    id: 42,
    name: 'John',
    roles: ['admin', 'editor']
  },
  request: {
    status: 200,
    duration: 143
  }
});

Candy Logger provides structured inspection instead of reducing everything to an unreadable string.

Nested objects can be explored directly through the logger interface.

This becomes especially useful when debugging:

• API responses
• application state
• configuration objects
• request payloads
• error metadata

---

🔖 Bookmarks

During debugging, some logs are more important than others.

Candy Logger allows individual entries to be bookmarked so they can be identified quickly during a long debugging session.

This is useful when investigating a sequence such as:

Request started
↓
Authentication checked
↓
Database queried
↓
Validation failed
↓
Error generated

Instead of losing important entries in the middle of hundreds of logs, they can be bookmarked for later inspection.

---

📋 Copy & Export

Candy Logger makes it easy to move debugging information outside the browser.

Individual logs can be copied directly.

The complete log collection can also be exported as JSON.

This makes the logger useful for:

• bug reports
• QA testing
• debugging sessions
• issue reproduction
• sharing logs with another developer
• offline analysis

---

🎨 Dark & Light Themes

Candy Logger supports both dark and light interfaces.

The theme can be configured during initialization:

overrideConsole({
  forceUI: true,
  theme: 'dark'
});

This allows the logger to fit naturally into different development environments.

---

🖱️ Developer-Friendly Interface

The logger isn't just a static list of messages.

The panel can be:

• moved
• resized
• collapsed
• pinned
• searched
• filtered
• interacted with directly

The result is closer to a small developer dashboard than a traditional console output window.

---

⚙️ Configuration

Candy Logger can be configured according to the needs of the application.

Example:

overrideConsole({
  forceUI: true,
  theme: 'dark',
  position: 'bottom-right',
  maxLogs: 500,
  collapsed: false,
  badgeText: 'DEV'
});

This makes it possible to integrate Candy Logger into both small projects and larger applications without forcing a particular workflow.

---

📦 Installation

Candy Logger can be installed directly from npm:

npm install candy-logger

Then initialize it:

import { overrideConsole } from 'candy-logger';

overrideConsole({
  forceUI: true
});

That's enough to start capturing browser console output.

---

💻 TypeScript Support

Candy Logger is written with TypeScript and provides typed APIs.

Types can be imported when building TypeScript applications:

import type {
  LogLevel,
  LogEntry,
  LogTag,
  LogAction,
  CandyLoggerOptions
} from 'candy-logger';

This provides better autocomplete and type safety when integrating the library into larger projects.

---

🪶 Zero Runtime Dependencies

One of the project's core design decisions is keeping the runtime dependency footprint at zero.

Candy Logger doesn't require a separate UI framework, logging framework, or serialization library just to operate.

The result is a package that can be added to a browser project without introducing a large dependency tree.

---

🛠️ Built for Modern JavaScript Applications

Candy Logger is designed to work alongside modern browser applications and frameworks.

It can be integrated into projects using technologies such as:

• React
• Next.js
• Vue
• Angular
• Svelte
• Vite
• Vanilla JavaScript
• TypeScript

Because the logger operates on the browser console and provides its own UI, it doesn't require a framework-specific logging implementation.

---

🧪 A Real Debugging Example

Consider an API request:

try {
  const response = await fetch('/api/users');

  if (!response.ok) {
    throw new Error(`Request failed: ${response.status}`);
  }

  const data = await response.json();

  candy.success('Users loaded', data);
} catch (error) {
  candy.error('Failed to load users', error);
}

With Candy Logger, the debugging session can contain:

SUCCESS   Users loaded
ERROR     Failed to load users

while preserving the associated objects for inspection.

This makes the log output much easier to understand than a long stream of unstructured console messages.

---

🔄 What Changed in v2.1.0?

Version 2.1.0 is primarily a correctness-focused release.

#Fixed

• Circular objects no longer throw a TypeError into the calling code.
• Error objects are rendered with useful information instead of appearing as {}.
• Error messages and stack traces are preserved.
• Error.cause and custom error properties are handled.
• Object inspection is more reliable for complex JavaScript values.

These changes may not look as flashy as a new UI feature, but they are important for a logging library.

A logger should never become the source of the error it's supposed to help you diagnose.

---

📊 Project Overview

Property	Details
Project	Candy Logger
Current Version	2.1.0
Language	TypeScript
Runtime	Browser
Runtime Dependencies	0
Package	candy-logger
License	MIT
Log Levels	6
Object Inspection	Yes
JSON Export	Yes
Console Override	Yes
TypeScript	Yes
Open Source	Yes

---

🎯 Why This Project Matters

Candy Logger started with a relatively simple problem:

How can browser logging become more useful without becoming complicated?

The project has evolved into a structured browser debugging tool while maintaining the simplicity of the original JavaScript console API.

The v2 architecture introduced the interactive browser interface.

The v2.1.0 release then focused on making the underlying logging behavior more reliable when dealing with difficult JavaScript values such as circular objects and Error instances.

That combination is what makes Candy Logger useful:

Simple API + structured UI + reliable object handling + zero runtime dependencies.

---

🔮 What's Next?

Candy Logger is still an actively evolving open-source project.

Potential future improvements include:

• Advanced log grouping
• Persistent log storage
• Custom transports
• Remote logging
• Plugin support
• More filtering capabilities
• Performance monitoring
• Additional export formats
• Developer tooling integrations

The goal is to keep the core package lightweight while continuing to make the debugging experience better.

---

🔗 Project Links

#GitHub

https://github.com/shehari007/candy-logger

#Live Demo

https://candy-logger.msyb.dev

#npm

https://www.npmjs.com/package/candy-logger

---

⭐ Final Thoughts

Candy Logger v2.1.0 is more than another wrapper around console.log().

It provides a structured environment for understanding what is happening inside a browser application while keeping the developer experience familiar.

The project is intentionally lightweight, has zero runtime dependencies, supports TypeScript, and works with the existing console API.

Most importantly, v2.1.0 improves correctness where a logging library needs it most: handling real JavaScript data without interfering with the application being debugged.

If you're building a JavaScript or TypeScript application and want a cleaner browser debugging experience, give Candy Logger a try.

⭐ Star the repository, try the demo, and contributions are welcome.

---

Candy Logger v2.1.0 Built with TypeScript · Open Source · MIT Licensed