On This Page
Functions
Debug Utilities
The Debug utilities provide functions for logging, debugging, and enhanced error handling in JavaScript.
Functions
log
function log(message, level = 'log', { namespace = '', data = undefined, color = 'inherit', timestamp = false, format = 'standard', consoleMethod = null, silent = false, title = toTitleCase(namespace), showTitle = true, titleColor = null } = {})A flexible logging utility with formatting, namespacing, and multiple output options. Supports colored output, timestamps, structured JSON format, and configurable titles.
Parameters
| Name | Type | Description |
|---|---|---|
| message | string | The message to log |
| level | string | Log level (‘debug’, ‘log’, ‘info’, ‘warn’, ‘error’) |
| options | object | Optional configuration |
Options
| Name | Type | Default | Description |
|---|---|---|---|
| namespace | string | ” | Namespace for grouping related logs (used as default title) |
| data | any | undefined | Additional data to include with the log message. Accepts arrays and objects |
| color | string | ’inherit’ | Text color for the message |
| timestamp | boolean | false | Whether to include timestamp in the output |
| format | string | ’standard’ | Output format (‘standard’ or ‘json’) |
| consoleMethod | string | null | Override the console method used for output |
| silent | boolean | false | Suppress all output when true |
| title | string | toTitleCase(namespace) | Title/label to display before the message |
| showTitle | boolean | true | Whether to show the title/label |
| titleColor | string | null | Color for the title/label (defaults to level color) |
Returns
This function does not return a value.
Example
import { log } from '@semantic-ui/utils';
// Basic usagelog('Application started', 'info');log('Debug information', 'debug');
// With namespace and datalog('User login successful', 'info', { namespace: 'UserService', data: [{ userId: 123, timestamp: new Date() }]});
// JSON format for structured logginglog('API response received', 'info', { format: 'json', namespace: 'ApiClient', timestamp: true, data: [{ status: 200, endpoint: '/api/users' }]});
// Custom stylinglog('Important notice', 'warn', { title: 'NOTICE', titleColor: '#FF6B35', timestamp: true});fatal
function fatal(message, { errorType = Error, metadata = {}, onError = null, removeStackLines = 1 } = {})Throws an error with enhanced control over the error type, metadata, and stack trace.
Asynchronous Error Throwing This function uses
queueMicrotaskto throw the error asynchronously, allowing the current execution context to complete.
Parameters
| Name | Type | Description |
|---|---|---|
| message | string | The error message |
| options | object | Optional configuration |
Options
| Name | Type | Default | Description |
|---|---|---|---|
| errorType | function | Error | The type of error to throw |
| metadata | object | Additional data to attach to the error | |
| onError | function | null | Callback to intercept the error. When provided, the error is passed to this callback and the throw is prevented |
| removeStackLines | number | 1 | Number of stack trace lines to remove |
Example
import { fatal } from '@semantic-ui/utils';
// Throws asynchronously via queueMicrotaskfatal("Something went wrong", { errorType: TypeError, metadata: { code: "ERR_001" },});
// Using onError to intercept and prevent the throwfatal("Handled error", { onError: (err) => console.log("Intercepted:", err.message)});