or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-storybook--client-logger

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/client-logger@8.6.x

To install, run

npx @tessl/cli install tessl/npm-storybook--client-logger@8.6.0

index.mddocs/

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