ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

lowcode-engine 日志 API 完全指南:Logger 双维度定制与 __logConf__ 动态开关

lowcode-engine 日志 API 完全指南:Logger 双维度定制与 __logConf__ 动态开关 lowcode-engine 日志 API 完全指南Logger 双维度定制与logConf动态开关【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine导读logger API 是 lowcode-engine 面向插件与业务方暴露的日志模块它允许开发者同时按照日志级别debug / log / info / warn / error与业务类型bizName两个维度定制日志输出并且可以在不修改代码的前提下通过 URL query 动态调整日志开关。阅读本文后你将掌握 Logger 的创建与调用方式、各日志级别的语义与数值映射、__logConf__参数的五种组合用法以及引擎内部各模块实际使用日志的方式从而在自己的插件开发与引擎二次开发中精准定位问题。模块简介双维度定制日志引擎日志模块的核心设计是按日志级别 业务类型两个维度来定制日志。日志级别维度决定这个日志该不该输出引擎将级别划分为debug、log、info、warn、error五档业务类型维度通过bizName标记日志来自哪个业务模块如designer、history、plugin:xxx便于在海量日志中按模块过滤。该模块参考了 zen-logger自 v1.0.0 起提供。日志级别Level定义在 packages/utils/src/logger.ts 中级别被定义为export type Level debug | log | info | warn | error;其内部通过数值映射来比较级别大小数值越小越细const levels: Recordstring, number { debug: -1, log: 0, info: 0, warn: 1, error: 2, };即debug(-1) log/info(0) warn(1) error(2)。日志是否输出取决于目标级别与当前日志级别的数值比较详见下文输出判定逻辑。方法五种日志记录 APILogger 对外提供五个方法签名均支持任意数量、任意类型的参数any | any[]/** * debug info */ debug(...args: any | any[]): void; /** * normal info output */ info(...args: any | any[]): void; /** * warning info output */ warn(...args: any | any[]): void; /** * error info output */ error(...args: any | any[]): void; /** * log info output */ log(...args: any | any[]): void;方法语义debug为调试信息、log/info为普通信息、warn为警告、error为错误。注意info与log在级别数值上同为 0见上文 levels 映射但二者的输出样式颜色不同见下文控制台样式。这些接口的 TypeScript 定义位于 IPublicApiLogger其 shell 层实现位于 packages/shell/src/api/logger.ts实现上通过内部Symbol(logger)包装底层alilc/lowcode-utils的getLogger实例逐方法透传调用。创建 Logger输出示例与参数说明基本用法import { Logger } from alilc/lowcode-utils; const logger new Logger({ level: warn, bizName: myPlugin:moduleA }); logger.log(Awesome Low-Code Engine);Options 参数详解创建 Logger 需要传入一个Options对象字段如下源码见 packages/utils/src/logger.ts参数类型默认值说明levelLevelwarn默认输出级别仅输出级别数值 该值的日志bizNamestring*业务类型名称用于标记与过滤日志来源level的合法取值为debug | log | info | warn | error之一。便捷工厂函数 getLogger除了new Logger()alilc/lowcode-utils还导出了等价的工厂函数export function getLogger(config: { level: Level; bizName: string }): Logger { return new Logger(config); }该函数与new Logger完全等价见 packages/utils/src/logger.ts在editor-core、designer、shell等包中大量使用。查看示例logConf动态日志开关开启日志查看有两种方式方式 1默认所有 logger 创建时会有默认输出的 level默认为warn即只展示warn、error级别的日志方式 2推荐在页面 URL 上追加__logConf__参数动态开启无需改动任何代码即可调整日志输出适合线上定位问题。logConf的语法格式__logConf__的格式为logLevel[:bizName]即日志级别[:业务名称]其中 bizName 的匹配语义为模糊包含匹配like %bizName%。该格式的解析与注释见 packages/utils/src/logger.ts// __logConf__ 格式为 logLevel[:bizName], bizName is used as: targetBizName like %bizName% // 1. __logConf__log or __logConf__warn, etc. // 2. __logConf__log:* or __logConf__warn:*, etc. // 2. __logConf__log:bizName or __logConf__warn:partOfBizName, etc. const logConf (((/__(?:logConf|logLevel)__([^#/]*)/.exec(_location.href)) || [])[1]);从正则可见引擎同时兼容__logConf__与__logLevel__两种参数名。五种典型示例以下示例均以引擎官方 demo 页面https://lowcode-engine.cn/demo/demo-general/index.html为基底演示https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__warn // 开启所有 bizName 的 warn 和 error https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__debug // 开启所有 bizName 的 debug, log, info, warn 和 error https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__log // 开启所有 bizName 的 log, info, warn 和 error https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__warn|* // 同 __logConf__warn https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__warn|bizName // 开启 bizName 的 debug, log, info, warn 和 error https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__warn|partOfBizName // 开启 bizName like %partOfBizName% 的 debug, log, info, warn 和 error对上述规则做如下归纳示例效果备注__logConf__warn所有 bizName 的 warn、error未带 bizName 时等价于warn:\*__logConf__debug所有 bizName 的全部 5 个级别级别最低输出最全__logConf__log所有 bizName 的 log、info、warn、error不含 debug__logConf__warn:\*同__logConf__warn*通配所有 bizName__logConf__warn:bizName精确指定 bizName 的全部级别级别由冒号左侧控制__logConf__warn:partOfBizName模糊匹配包含partOfBizName的 bizName使用 indexOf 做子串匹配底层解析逻辑 parseLogConf__logConf__的解析由 parseLogConf 完成若未传入logConf回退到构造时的options.level与options.bizName若logConf含冒号:按level:bizName拆分为二元组bizName缺省时取*否则将整个字符串当作 levelbizName取*。const parseLogConf (logConf: string, options: Options): { level: string; bizName: string} { if (!logConf) { return { level: options.level, bizName: options.bizName }; } if (logConf.indexOf(:) -1) { const pair logConf.split(:); return { level: pair[0], bizName: pair[1] || * }; } return { level: logConf, bizName: * }; };源码原理输出判定与控制台样式输出判定逻辑 shouldOutput日志最终是否打印由 shouldOutput 判定它同时校验两个维度const shouldOutput (logLevel, targetLevel warn, bizName, targetBizName): boolean { const isLevelFit levels[targetLevel] levels[logLevel]; const isBizNameFit targetBizName * || bizName.indexOf(targetBizName) -1; return isLevelFit isBizNameFit; };级别维度levels[targetLevel] levels[logLevel]即目标级别数值不超过当前日志级别数值才输出。例如目标为warn(1)时warn(1)与error(2)会输出debug(-1)、log/info(0)被过滤业务维度targetBizName *或bizName.indexOf(targetBizName) -1子串模糊匹配这也是partOfBizName能命中xxxpartOfBizNameyyy的原因。每个 Logger 实例在构造时读取 URL 得到targetLevel与targetBizName随后debug/log/info/warn/error五个方法在打印前都会先经过shouldOutput过滤见 packages/utils/src/logger.ts。控制台样式与颜色配置为便于在浏览器控制台快速区分日志Logger 输出时借助%c样式指令进行着色bizName 颜色按 bizName 从 34 色色板bizNameColors见 packages/utils/src/logger.ts中按注册顺序循环取色同一 bizName 全局复用同一颜色bizNameColorConfig缓存级别颜色不同级别映射不同颜色bodyColors见 packages/utils/src/logger.ts如debug: #fadb14黄、log: #8c8c8c灰、info: #52c41a绿、warn: #fa8c16橙、error: #ff4d4f红输出函数映射debug/log/info走console.logwarn走console.warnerror走console.error见 outputFunction保证错误信息进入 DevTools 的错误面板。最终输出格式为%c[bizName]%c[level]: ...args对象类型参数自动以%o展开打印见 getLogArgs。引擎内的实际应用bizName 约定在引擎各包源码中Logger 被广泛用于模块级与插件级日志bizName的命名约定基本遵循包名/模块名或插件名文件bizName典型用途packages/designer/src/designer/designer.tsdesigner设计器核心流程packages/designer/src/builtin-simulator/host.tsdesigner模拟器 host如 Rax 弃用告警见 host.tspackages/designer/src/document/history.tshistory历史记录packages/designer/src/plugin/plugin-manager.tsdesigner:pluginManager插件管理器packages/designer/src/plugin/plugin.tsplugin:${pluginName}每个插件独立命名空间packages/editor-core/src/event-bus.tsevent-bus/module-event-bus事件总线 on/off/emit 的 debug 日志packages/editor-core/src/config.tsconfig配置模块level 设为logpackages/editor-skeleton/src/skeleton.tsskeleton面板骨架packages/engine/src/engine-core.tscommon引擎公共上下文packages/shell/src/api/material.tsshell-materialshell 层物料 API 错误提示关键点插件上下文内置 logger。引擎在装配插件上下文时会为每个插件创建独立 loggerbizName自动取plugin:${pluginName}见 packages/engine/src/engine-core.ts同时context.logger被挂载为IPublicApiLogger见 插件上下文类型定义。因此插件内可直接通过ctx.logger.warn(...)记录日志配合__logConf__warn|plugin:你的插件名即可在线上只看到自己插件的日志。利用这一约定调试插件时可使用形如?__logConf__log|plugin:xxx的 URL即可在开启全部级别的同时按插件名过滤避免被其他模块日志刷屏。小结lowcode-engine 的日志模块以级别 bizName双维度为核心配合 URL 驱动的__logConf__/__logLevel__动态开关实现了零改动、可线上调节的日志观测能力。开发者既可以在代码中通过new Logger({ level, bizName })或getLogger精确控制输出也可以在浏览器地址栏临时追加参数过滤任意模块日志。其核心实现集中在 packages/utils/src/logger.ts类型契约见 packages/types/src/shell/api/logger.tsShell 层封装见 packages/shell/src/api/logger.ts可作为自研低代码平台日志体系的设计参考。【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表