@elementor/angie-logger (英语)
安吉AI助理的共享日志工具.
这个包提供了一个灵活,有上下文感的日志器,并带有颗粒式日志级别控制.
特征
- 外观对数水平: 控制5级伐木:
debug, (中文(简体) ),info, (中文(简体) ),warn, (中文(简体) ),error, (中文(简体) ),none - 了解背景: 支持可以嵌入的字符串和基于对象的背景
- 动态控制: 运行时更改日志级别
setLogLevel() - 类型安全: 在 TypeScript 中以完整类型定义写入
- 零依赖关系: 没有运行时间依赖, 轻量级捆绑
- 环境不可知性: 没有内置环境检测 - 您决定日志级别
安装
npm install @elementor/angie-logger
快速启动
基本用途
import { createLogger } from '@elementor/angie-logger';
const logger = createLogger('MyApp');
logger.debug('Detailed debug information');
logger.log('General log message');
logger.info('Informational message');
logger.warn('Warning message');
logger.error('Error message');
设置日志级别
import { createLogger } from '@elementor/angie-logger';
const logger = createLogger('MyApp');
// Set to only show warnings and errors
logger.setLogLevel('warn');
logger.debug('Not logged');
logger.info('Not logged');
logger.warn('This WILL be logged');
logger.error('This WILL be logged');
有上下文对象
const logger = createLogger({ app: 'MyApp', version: '1.0.0' });
logger.info('Application initialized');
// Output: [{"app":"MyApp","version":"1.0.0"}] Application initialized
正在扩展 Loggers
const baseLogger = createLogger('MyApp');
const moduleLogger = baseLogger.extend('UserModule');
const componentLogger = moduleLogger.extend('LoginForm');
componentLogger.log('Form rendered');
// Output: [MyApp > UserModule > LoginForm] Form rendered
混合上下文类型
const appLogger = createLogger('MyApp');
const featureLogger = appLogger.extend({ feature: 'Authentication', userId: 123 });
featureLogger.info('User authenticated');
// Output: [MyApp > {"feature":"Authentication","userId":123}] User authenticated
基于环境的日志级别
import { createLogger } from '@elementor/angie-logger';
const logger = createLogger('MyApp');
// Set log level based on environment
if (process.env.NODE_ENV === 'production') {
logger.setLogLevel('warn'); // Only warnings and errors in production
} else if (process.env.NODE_ENV === 'test') {
logger.setLogLevel('none'); // Silent during tests
}
// Development: default 'debug' level shows everything
URL 参数调试模式
const logger = createLogger('MyApp', { logLevel: 'warn' });
const params = new URLSearchParams(window.location.search);
if (params.has('debug')) {
logger.setLogLevel('debug');
}
配置选项
您可以通过一个配置对象自定义日志行为 :
import { createLogger, LoggerConfig, LogLevel } from '@elementor/angie-logger';
const config: LoggerConfig = {
logLevel: 'info', // Set initial log level
color: '#ff6b6b', // Custom color for context labels
};
const logger = createLogger('MyApp', config);
可用的配置选项
-
logLevel(单位:千美元)LogLevel,默认值 :'debug': 初始日志级别const logger = createLogger('MyApp', { logLevel: 'warn' }); logger.info('This will NOT be logged'); logger.warn('This WILL be logged'); -
color(字符串,默认值 :'#00bcd4': 浏览器控制台上下文标签的颜色const logger = createLogger('MyApp', { color: '#ff6b6b' });
说明: 扩展日志时保存配置 :
const baseLogger = createLogger('App', { logLevel: 'warn', color: '#00ff00' });
const childLogger = baseLogger.extend('Module'); // Keeps the log level and color
行为
日志级别
Logger 支持 5 个日志水平, 其动词减少 :
debug(默认):所有信件都已登录(调试、日志、信息、警告、错误)info: 信息信息及以上(日志、信息、警告、错误)warn: 仅警告和错误(警告、错误)error: 只出错( 错误)none: 无记录( 完全沉默 )
日志级别优先级
每个级别包括来自更高优先级别的所有信息:
const logger = createLogger('MyApp');
// debug level (default) - logs everything
logger.setLogLevel('debug');
logger.debug('✓ Logged');
logger.log('✓ Logged');
logger.info('✓ Logged');
logger.warn('✓ Logged');
logger.error('✓ Logged');
// info level - logs info, log, warn, error
logger.setLogLevel('info');
logger.debug('✗ Not logged');
logger.log('✓ Logged');
logger.info('✓ Logged');
logger.warn('✓ Logged');
logger.error('✓ Logged');
// warn level - logs warn, error
logger.setLogLevel('warn');
logger.debug('✗ Not logged');
logger.log('✗ Not logged');
logger.info('✗ Not logged');
logger.warn('✓ Logged');
logger.error('✓ Logged');
// error level - logs error only
logger.setLogLevel('error');
logger.debug('✗ Not logged');
logger.log('✗ Not logged');
logger.info('✗ Not logged');
logger.warn('✗ Not logged');
logger.error('✓ Logged');
// none level - logs nothing
logger.setLogLevel('none');
logger.error('✗ Not logged');
水平绘图方法
debug()− 调试级别log()• 信息级别info()• 信息级别warn()- 警告级别error()• 错误水平
API 参考
createLogger(context, config?)
创建新的日志实例.
参数:
context数字 :string | Record<string, unknown>- 日志初始上下文config?数字 :LoggerConfig(可选) - 配置选项logLevel?数字 :LogLevel- 初始日志级别( 默认值 :'debug'(中文(简体) )color?数字 :string- 上下文标签的颜色( 默认 ):'#00bcd4'(中文(简体) )
回返情况: Logger 实例
伐木方法
log(...args): 通用记录(信息级别)info(...args): 信息信息(信息级别)warn(...args): 警告消息( 警告级别)error(...args): 错误消息( 错误级别)debug(...args): 调试消息( 调试级别)extend(subContext): 创建一个附加上下文的儿童日志setLogLevel(level): 动态更改日志级别
日志级别类型
type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'none';
实例
反应组件
import { createLogger } from '@elementor/angie-logger';
const logger = createLogger('ImageGallery');
if (process.env.NODE_ENV === 'production') {
logger.setLogLevel('error');
}
function ImageGallery() {
logger.debug('Component mounting');
const handleImageLoad = (imageId: string) => {
logger.info('Image loaded', { imageId });
};
const handleError = (error: Error) => {
logger.error('Failed to load image', error);
};
return (
// component JSX
);
}
服务层
import { createLogger } from '@elementor/angie-logger';
const logger = createLogger({ service: 'ApiClient' });
class ApiClient {
private logger = logger.extend({ method: 'fetch' });
async fetch(endpoint: string) {
this.logger.debug('Fetching data', { endpoint });
try {
const response = await fetch(endpoint);
this.logger.info('Data fetched successfully', { endpoint });
return response.json();
} catch (error) {
this.logger.error('Failed to fetch data', { endpoint, error });
throw error;
}
}
}
动态日志控制
import { createLogger } from '@elementor/angie-logger';
const logger = createLogger('App');
// Expose methods globally for debugging
if (typeof window !== 'undefined') {
window.setLogLevel = (level) => logger.setLogLevel(level);
}
// Then in browser console:
// window.setLogLevel('debug') // Show all logs
// window.setLogLevel('warn') // Only warnings and errors
// window.setLogLevel('none') // Silence all logs
测试
import { createLogger } from '@elementor/angie-logger';
describe('MyComponent', () => {
beforeAll(() => {
// Silence logs during tests
const logger = createLogger('MyComponent');
logger.setLogLevel('none');
});
// your tests
});
每个模块的日志级别不同
import { createLogger } from '@elementor/angie-logger';
const apiLogger = createLogger('API', { logLevel: 'warn' });
const uiLogger = createLogger('UI', { logLevel: 'debug' });
apiLogger.info('Not logged - API is warn level');
apiLogger.error('Logged - error is >= warn');
uiLogger.info('Logged - UI is debug level');
uiLogger.debug('Logged - UI is debug level');