Files
authentik/web/logger/browser.js
Teffen Ellis 2c813cbe03 web: Merge branch -- Stale notifications, synchronized context objects, rendering fixes (#19141)
* web: Fix stale notifications.

* Fix overlap of API and notifications drawers.

* Fix issues surrounding duplicate context controller values.

* Clean up drawer events, alignment.

* Export parts. Fix z-index, colors.

* Fix formatting, alignment. repeated renders.

* Fix indent.

* Fix progress bar fade out, positioning, labels.

* Fix clickable area.

* Ignore clickable icons.

* Clean up logging.

* Fix width.

* Move event listeners into decorator.

* Fix double counting of notifications.

* Fix ARIA lables.

* Fix empty state ARIA.

* Fix order of locale updating.

* Fix rebase.

* web: fix notification count update

* Update selector.

* web: Fix CAPTCHA locale.

* Clean up logging.

---------

Co-authored-by: macmoritz <tratarmoritz@gmail.com>
2026-01-05 15:54:50 -05:00

140 lines
3.2 KiB
JavaScript

/**
* @file Console logger for browser environments.
*
* @remarks
* The repetition of log levels, typedefs, and method signatures is intentional
* to give IDEs and type checkers a mapping of log methods to the TypeScript
* provided JSDoc comments.
*
* Additionally, no wrapper functions are used to avoid the browser's console
* reported call site being the wrapper instead of the actual caller.
*/
/* eslint-disable no-console */
//#region Functions
/**
* @typedef {object} Logger
* @property {typeof console.info} info;
* @property {typeof console.warn} warn;
* @property {typeof console.error} error;
* @property {typeof console.debug} debug;
* @property {typeof console.trace} trace;
*/
/**
* Labels log levels in the browser console.
*/
const LogLevelLabel = /** @type {const} */ ({
info: "[INFO]",
warn: "[WARN]",
error: "[ERROR]",
debug: "[DEBUG]",
trace: "[TRACE]",
});
/**
* @typedef {keyof typeof LogLevelLabel} LogLevel
*/
/**
* Predefined log levels.
*/
const LogLevels = /** @type {LogLevel[]} */ (Object.keys(LogLevelLabel));
/**
* Colors for log levels in the browser console.
*
* @remarks
*
* The colors are derived from Carbon Design System's palette to ensure
* sufficient contrast and accessibility across light and dark themes.
*/
const LogLevelColors = /** @type {const} */ ({
info: `light-dark(#0043CE, #4589FF)`,
warn: `light-dark(#F1C21B, #F1C21B)`,
error: `light-dark(#DA1E28, #FA4D56)`,
debug: `light-dark(#8A3FFC, #A56EFF)`,
trace: `light-dark(#8A3FFC, #A56EFF)`,
});
/**
* Creates a logger with the given prefix.
*
* @param {string} [prefix]
* @param {...string} args
* @returns {Logger}
*
*/
export function createLogger(prefix, ...args) {
const suffix = prefix ? `(${prefix}):` : ":";
/**
* @type {Partial<Logger>}
*/
const logger = {};
for (const level of LogLevels) {
const label = LogLevelLabel[level];
const color = LogLevelColors[level];
logger[level] = console[level].bind(
console,
`%c${label}%c ${suffix}%c`,
`font-weight: 700; color: ${color};`,
`font-weight: 600; color: CanvasText;`,
"",
...args,
);
}
return /** @type {Logger} */ (logger);
}
//#endregion
//#region Console Logger
/**
* @typedef {Logger & {prefix: (logPrefix: string) => Logger}} IConsoleLogger
*/
/**
* A singleton logger instance for the browser.
*
* ```js
* import { ConsoleLogger } from "#logger/browser";
*
* ConsoleLogger.info("Hello, world!");
* ```
*
* @implements {IConsoleLogger}
* @runtime browser
*/
// @ts-expect-error Logging properties are dynamically assigned.
export class ConsoleLogger {
/** @type {typeof console.info} */
static info;
/** @type {typeof console.warn} */
static warn;
/** @type {typeof console.error} */
static error;
/** @type {typeof console.debug} */
static debug;
/** @type {typeof console.trace} */
static trace;
/**
* Creates a logger with the given prefix.
* @param {string} logPrefix
*/
static prefix(logPrefix) {
return createLogger(logPrefix);
}
}
Object.assign(ConsoleLogger, createLogger());
//#endregion