← Back to Examples

🔍 Logging & Debugging

Explore the categorized logging system with runtime controls

🌐 client — runs in the browser (element JS API) 🖥️ server — LiveView round-trip

Note: Open your browser's Developer Console (F12) to see the log messages. By default, all logging is disabled in production.

LG01 · The registry entry

Global registry (no wrapper attribute): the bundled multiselect.js auto-installs window.components['web-multiselect'] via core's registerComponent()

Every KeenMate component publishes one entry via core's registerComponent(). Below is a live view of window.components['web-multiselect'], refreshed automatically as instances connect and disconnect.

window.components['web-multiselect']

LG02 · Logging controls (via the .logging object)

The .logging object is the flattened logger bundle: reg().logging.setCategoryLevel('DATA', 'debug')

The .logging object is the flattened logger bundle. These buttons call it directly (e.g. window.components['web-multiselect'].logging.setCategoryLevel('DATA','debug')). The active category level is reflected in the registry panel above. Interact with the pickers to produce logs.

LG03 · Live instances (.getInstances())

Global registry (no wrapper attribute): reg().getInstances() returns the connected <web-multiselect> elements

getInstances() returns the connected elements of this tag — maintained automatically (added on connect, removed on disconnect). Add and remove pickers below and watch the count in the registry panel change; then fan a call out across every live instance.

LG04 · Log categories

  • INIT - Component initialization, configuration parsing, RTL detection, destruction
  • DATA - Async data loading, option parsing, adding new options, errors
  • UI - Dropdown/popover/tooltip rendering, positioning, badges display
  • INTERACTION - Clicks, selections, keyboard events, closeOnSelect behavior

LG05 · Usage

Here's how to control logging programmatically:

// Import logging utilities
import { enableLogging, setLogLevel, setCategoryLevel, disableLogging }
    from '@keenmate/web-multiselect';

// Enable all logging at debug level
enableLogging();

// Set specific log level for all categories
setLogLevel('info');  // 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent'

// Enable/disable specific categories
disableLogging();  // First disable all
setCategoryLevel('UI', 'debug');  // Debug only UI operations
setCategoryLevel('DATA', 'info');  // Info level for data operations
setCategoryLevel('INTERACTION', 'silent');  // Disable interaction logs

// Disable all logging (default for production)
disableLogging();

🧩 Wrapper-specific extras (not in upstream)

Example 1: Basic Logging Control

JS import (no attribute): call enableLogging() · disableLogging() · setLogLevel("info") from @keenmate/web-multiselect

Enable and disable logging at runtime. Watch the console as you interact with the multiselect.

Example 2: Category-Specific Logging

JS import (no attribute): setCategoryLevel("DATA", "debug") per category · close_on_select={false} keeps the panel open while you watch logs

Enable logging for specific categories only. This example has async search enabled - type to see DATA logs. Try enabling different categories to see different types of logs.

Example 3: Hybrid Static + Dynamic Search

min_search_length={3} gates the search · JS callback (no attribute): el.beforeSearchCallback strips accents before the query

Show popular items initially, then switch to web service search. Demonstrates beforeSearchCallback for accent removal.

Opens with 5 popular fruits. Type 3+ characters to search "database". Try "açaí" or "acai" to see accent removal working.
🔌 Server round-trip
0
The LiveView server saw 0 event(s) from the wrapper. 
(pick an option anywhere on this page)