@cmtlyt
介绍
百科
日常
介绍
百科
日常
工具包

@cmtlyt/logger

预计阅读时间: 小于 1 分钟
类型补充
1interface LogEvent<T extends string = ''> {
2  kind: Kind | T;
3  messages: unknown[];
4  logConf: LoggerConfig<T>;
5  preventDefault: () => void;
6}
7
8interface StyleConfig {
9  tagColor?: string;
10  tagBg?: string;
11  contentColor?: string;
12  contentBg?: string;
13  borderColor?: string;
14  style?: (config: LoggerConfig) => {
15    tagStyle: string;
16    contentStyle: string;
17  };
18}
19
20interface LoggerConfig<T extends string = ''> extends StyleConfig {
21  kind: Kind | T;
22  inherit?: Kind | T;
23  noOutput?: boolean;
24  needTrace?: boolean;
25}
26
27type LoggerConfigObj = Record<Kind, LoggerConfig>;
28
29type LoggerOptions<T extends string = '', E = unknown> = {
30  needTrace?: boolean;
31  noOutput?: boolean;
32  logConfig?: Partial<LoggerConfigObj> & { [key in T]: LoggerConfig<T> };
33  printFunc?: ((...args: unknown[]) => void) | null;
34  getPrintFunc?: (this: LoggerOptions<T, E>, kind: Kind | T) => ((...args: unknown[]) => void) | null;
35  onLogBefore?: (this: LoggerOptions<T, E>, event: LogEvent<T>) => void;
36} & E;
37
38export type Kind = 'info' | 'warn' | 'error' | 'debug' | 'success';
39
40export type Logger = Record<Kind, (...args: unknown[]) => void>;

logger

默认 logger 实例

只有日志输出的样式

1const logger: Logger & Record<string, (...args: unknown[]) => void>;

createLogger

创建一个 logger 实例

类型声明

1function createLogger<T extends string, E = unknown>(
2  options?: LoggerOptions<T, E>,
3): Logger & Record<T, (...args: unknown[]) => void>;

参数

必填参数说明类型默认值
optionslogger 配置LoggerOptions<T, E>-
options.needTrace是否需要打印调用栈booleanfalse
options.noOutput是否需要输出日志booleanfalse
options.logConfiglogger 配置Partial<LoggerConfigObj> & { [key in T]: LoggerConfig<T> }-
options.printFunc打印日志的函数((...args: unknown[]) => void)console.log
options.getPrintFunc获取打印日志的函数 (优先级低于 printFunc)(this: LoggerOptions<T, E>, kind: Kind | T) => ((...args: unknown[]) => void)-
options.onLogBefore日志打印前回调(this: LoggerOptions<T, E>, event: LogEvent<T>) => void-

返回值: Logger & Record<T, (...args: unknown[]) => void>

实例

1type ExtendKind = 'click' | 'appear' | 'todo' | 'event' | 'expose';
2type AllKind = Kind | ExtendKind;
3
4interface LoggerExtendOptions {
5  store: {
6    needExposeKind: AllKind[];
7  };
8}
9
10const isProd = process.env.NODE_ENV === 'production';
11
12const logger = createLogger<ExtendKind, LoggerExtendOptions>({
13  // 非生产环境下需要打印调用栈
14  needTrace: !isProd,
15  // 生产环境下不在控制台输出
16  noOutput: isProd,
17  // 自定义 logger 方法配置
18  logConfig: {
19    // logger.click 方法样式继承自 logger.info
20    click: { kind: 'click', inherit: 'info' },
21    appear: { kind: 'appear', inherit: 'info', needTrace: false },
22    error: { kind: 'error', needTrace: true },
23  },
24  // 通过 LoggerExtendsOptions 扩展的配置项
25  store: {
26    needExposeKind: ['click', 'appear', 'error'],
27  },
28  // 生产环境下不在控制台输出 (不推荐使用该方法阻止日志输出, 如果一定要的话可以使用 `noOutput`)
29  // 返回 null 的话则将输出方法转交 `getPrintFunc` 控制
30  printFunc: isProd ? () => {} : null,
31  // 获取打印日志的函数, 如果未配置则默认使用 console.log
32  getPrintFunc(kind) {
33    // 根据不同的 kind 选择不同的输出方法
34    if (kind === 'click' || kind === 'error') return console.log;
35    return console.debug;
36  },
37  // 输出到控制台之前进行一些处理
38  onLogBefore(e) {
39    const { needExposeKind } = this.store;
40    if (isProd && needExposeKind.includes(kind)) {
41      // 阻止日志输出
42      e.preventDefault();
43      // 日志上报逻辑
44      // ...
45    }
46  },
47});