CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-storybook--client-logger

Client-side logging functionality for Storybook applications with configurable log levels and styling capabilities

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

Storybook Client Logger

A client-side logging library for Storybook applications that provides configurable log levels, one-time logging, deprecation warnings, and styled console output. This package respects global LOGLEVEL settings and integrates seamlessly with browser console APIs.

Package Information

  • Package Name: @storybook/client-logger
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @storybook/client-logger

Core Imports

import { logger, once, deprecate, pretty } from "@storybook/client-logger";

For CommonJS:

const { logger, once, deprecate, pretty } = require("@storybook/client-logger");

Selective imports:

import { logger } from "@storybook/client-logger";
import { once } from "@storybook/client-logger";
import { pretty } from "@storybook/client-logger";
import { deprecate } from "@storybook/client-logger";

Basic Usage

import { logger, once, deprecate, pretty } from "@storybook/client-logger";

// Basic logging
logger.info("Application started");
logger.warn("This is a warning");
logger.error("Something went wrong");

// One-time logging (won't repeat the same message)
once.warn("This warning will only show once per session");
once.info("First time setup complete");

// Deprecation warnings
deprecate("This feature is deprecated, use newFeature() instead");

// Styled logging with HTML-like formatting
pretty.info('<span style="color: blue; font-weight: bold">Styled message</span>');

Configuration

The logger respects the global LOGLEVEL variable (accessed via @storybook/global) to control output. Log levels are numerical with lower numbers showing more messages:

  • trace (level 1) - Shows all messages including trace
  • debug (level 2) - Shows debug and above
  • info (level 3) - Default level when LOGLEVEL is invalid or unset, shows info and above
  • warn (level 4) - Shows warnings and errors only
  • error (level 5) - Shows errors only
  • silent (level 10) - Suppresses all output

Implementation Notes:

  • If LOGLEVEL is not set or invalid, defaults to info level (3)
  • Level filtering uses <= comparison (e.g., currentLogLevelNumber <= levels.debug)
  • The log method respects all levels except silent (uses < levels.silent comparison)

Capabilities

Standard Logging

Core logging functionality with level-based filtering using native browser console methods.

interface Logger {
  /** Trace level logging - lowest priority, includes stack trace */
  trace(message: any, ...rest: any[]): void;
  /** Debug level logging for development information */
  debug(message: any, ...rest: any[]): void;
  /** Info level logging for general information */
  info(message: any, ...rest: any[]): void;
  /** Warning level logging for non-critical issues */
  warn(message: any, ...rest: any[]): void;
  /** Error level logging for critical issues */
  error(message: any, ...rest: any[]): void;
  /** General logging that respects silent level */
  log(message: any, ...rest: any[]): void;
}

declare const logger: Logger;

Usage Examples:

import { logger } from "@storybook/client-logger";

// Different log levels
logger.trace("Detailed execution trace");
logger.debug("Debug information", { userId: 123 });
logger.info("User logged in successfully");
logger.warn("API rate limit approaching");
logger.error("Authentication failed", error);
logger.log("General message");

One-Time Logging

Prevents duplicate log messages by tracking previously logged content. Each message is only displayed once per session.

interface OnceLogger {
  /** Create a one-time logger for the specified level */
  (type: keyof Logger): (message: any, ...rest: any[]) => void | undefined;
  /** Clear the logged messages cache */
  clear(): void;
  /** One-time trace logging */
  trace(message: any, ...rest: any[]): void | undefined;
  /** One-time debug logging */
  debug(message: any, ...rest: any[]): void | undefined;
  /** One-time info logging */
  info(message: any, ...rest: any[]): void | undefined;
  /** One-time warning logging */
  warn(message: any, ...rest: any[]): void | undefined;
  /** One-time error logging */
  error(message: any, ...rest: any[]): void | undefined;
  /** One-time general logging */
  log(message: any, ...rest: any[]): void | undefined;
}

declare const once: OnceLogger;

Usage Examples:

import { once } from "@storybook/client-logger";

// These will only show once, even if called multiple times
once.warn("This feature will be removed in v9.0");
once.info("Welcome to the application");

// Dynamic one-time loggers
const onceError = once('error');
onceError("Critical system error occurred");

// Clear the cache to allow messages to show again
once.clear();

Deprecation Warnings

Specialized one-time warning function for deprecation notices.

/** 
 * Log a deprecation warning that will only appear once per session
 * Alias for once('warn')
 */
declare function deprecate(message: any, ...rest: any[]): void | undefined;

Usage Examples:

import { deprecate } from "@storybook/client-logger";

deprecate("myOldFunction() is deprecated, use myNewFunction() instead");
deprecate("Config option 'oldOption' is deprecated", { 
  suggestion: "Use 'newOption' instead" 
});

Styled Logging

Enhanced logging with HTML-style span formatting for colored and styled console output.

interface PrettyLogger {
  /** Create a pretty logger for the specified level */
  (type: keyof Logger): (...args: Parameters<LoggingFn>) => void;
  /** Pretty trace logging with styling support */
  trace(...args: Parameters<LoggingFn>): void;
  /** Pretty debug logging with styling support */
  debug(...args: Parameters<LoggingFn>): void;
  /** Pretty info logging with styling support */
  info(...args: Parameters<LoggingFn>): void;
  /** Pretty warning logging with styling support */
  warn(...args: Parameters<LoggingFn>): void;
  /** Pretty error logging with styling support */
  error(...args: Parameters<LoggingFn>): void;
}

declare const pretty: PrettyLogger;

Usage Examples:

import { pretty } from "@storybook/client-logger";

// Styled messages using HTML-like span tags
pretty.info('<span style="color: blue; font-weight: bold">Important:</span> System ready');
pretty.warn('<span style="color: orange">Warning:</span> <span style="font-style: italic">Check configuration</span>');
pretty.error('<span style="color: red; text-decoration: underline">Error:</span> Connection failed');

// Dynamic pretty loggers
const prettyDebug = pretty('debug');
prettyDebug('<span style="color: green">DEBUG:</span> User action completed');

The pretty logger converts HTML-style <span style="..."> tags into console formatting directives, enabling colored and styled output in browser developer tools.

Types

/** Log level configuration options */
type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent';

/** Standard logging function signature */
type LoggingFn = (message: any, ...args: any[]) => void;

Error Handling

The logger is designed to be robust and will gracefully handle:

  • Invalid log levels (defaults to 'info')
  • Missing global LOGLEVEL (defaults to 'info')
  • Console method unavailability (fails silently)
  • Malformed HTML in pretty logger (renders as plain text)

Browser Compatibility

This library is designed for browser environments and uses:

  • console.trace(), console.debug(), console.info(), console.warn(), console.error(), console.log()
  • Browser console styling capabilities for pretty logging
  • Global object access for configuration
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/client-logger@8.6.x
Publish Source
CLI
Badge
tessl/npm-storybook--client-logger badge