如何读懂 LogViewer 前端日志行渲染、异常堆栈折叠与字段高亮的完整实现指南【免费下载链接】log-viewerWeb UI for viewing logs项目地址: https://gitcode.com/gh_mirrors/log/log-viewerLogViewer 是一款在浏览器中实时查看服务器日志的 Web 日志查看器Web UI for viewing logs支持过滤、搜索、高亮与多日志合并。本文带你剖析它的前端实现三大核心机制 日志行如何渲染成结构化 HTML、 Java 异常堆栈如何智能折叠、 字段与搜索命中又如何被精准高亮。 先看效果LogViewer 日志查看界面从截图可以看到左侧是日志文件导航树主区域中每一行日志都被拆分渲染——时间、级别、线程、类名等字段颜色各异长异常堆栈被折叠成少量关键行搜索命中处有醒目的高亮块。这些效果全部由前端渲染器体系完成。 渲染体系全景两类渲染器 一个注册中心前端基于 AngularTypeScript开发核心代码位于 log-viewer-frontend/src/app/log-view/ 目录。整个渲染体系只依赖两个接口定义在 renderer.ts接口职责典型实现FieldRenderer渲染日志中某个字段如日期、级别日期渲染器、固定文本渲染器TextRenderer对纯文本做增强渲染返回高亮区间异常堆栈、括号、正则高亮所有渲染器实例由 ObjectFactory 统一创建再由 ViewConfigService 根据后端下发的配置装配分为两条线字段渲染器按字段类型查找支持date→date/millisecond这类父类型继承匹配见 createFieldRenderer文本高亮器来自配置text-highlighters按priority排序后依次执行这种配置驱动 工厂注册的设计意味着扩展新的高亮能力无需改动核心逻辑只需实现接口并注册即可。 日志行渲染一条 Record 如何变成 HTML每行日志在后端解析为一条Record原始文本s 各字段的位置区间。前端 RecordRendererService.render() 负责把它变成 DOM流程分三种情况不可解析的记录没有任何字段信息时整行按纯文本走文本高亮管线保证再奇怪的日志也显示得出来正常记录字段按start位置排序后逐个渲染字段之间的间隙补入原始文本形成字段与原文无缝拼接的效果超大记录若一行日志过大只显示开头并追加[load more]链接见 appendLoadMoreIfNeeded点击后仅追加增量文本避免一次性渲染撑爆浏览器还有一个精巧的细节渲染完成后会通过 setStrLenAttribute 给每个 DOM 元素打上strLen标记——记录它对应原始文本的长度。纯装饰元素图标、展开按钮被标记为lv-virtual、长度记为 0。这就为下一节搜索高亮建立了一套可定位的坐标系统。 异常堆栈折叠原理JavaExceptionRenderer这是 LogViewer 前端最出彩的部分。JavaExceptionRenderer 用四组正则把一段原始堆栈拆解成结构化数据rgxHeader匹配异常头com.foo.BarException: messagergxCausedBy匹配Caused by:把多层原因拆成多个段落rgxItem匹配每个\tat ...帧拆出包名、类名、方法名、源码位置甚至 jar 名rgxEnd匹配... 83 common frames omitted省略提示拆解之后appendCollapsableStackTrace 执行折叠策略连续的非业务代码帧框架、JDK 帧超过阈值时只保留首尾 1~2 行中间生成一个coll-wrapper collapsed折叠容器容器内含一个Expand N hidden elements展开按钮 隐藏的堆栈内容 可点击的收起手柄命中homePackages配置的业务包会被打上ex-stacktrace-package-home样式高亮你自己的代码帧——排查时一眼看到哪一帧是你的代码展开/收起没有用任何状态管理而是 handleClick 里简单地切换collapsed/expanded两个 CSS 类靠 CSS 控制显隐——轻量且可组合。更妙的是当搜索命中落在被折叠的区域时expand() 会沿 DOM 树递归找到包含命中位置的折叠容器并自动展开用户不会被藏起来的答案挡住。 字段高亮与搜索命中标记普通文本消息体、不可解析行的高亮由 textRenderer 管线 完成核心是迭代式文本切分原始字符串 → 高亮器1.tryRender() → [文本段, 高亮DOM, 文本段...] → 高亮器2.tryRender() → ...每个TextRenderer返回一组Highlight{start, end, e}区间管线把字符串按区间切成纯文本 DOM 元素的数组交给下一个高亮器继续处理直到所有高亮器跑完才一次性挂到页面上。内置的高亮器包括括号高亮BracketsHighlighter 用栈算法配对() {} []鼠标悬停任一侧括号时两侧联动亮起方便定位超长参数列表正则高亮RegexHighlighter 完全由配置驱动正则 样式用户可在配置里自定义把 IP 地址标成绿色之类的规则毫秒数/日期高亮让时间戳中的毫秒部分单独着色而搜索命中的高亮则依赖前面提到的strLen坐标系highlight() 从根节点遍历跳过lv-virtual装饰元素按字符偏移把目标区间精准套上search-result类——必要时会拆分文本节点和已有的高亮 span保证不破坏原有样式。由于坐标基于原始文本长度而非渲染后 DOM任何嵌套的高亮器组合都不会让搜索标记错位。⚙️ 配置驱动让高亮与折叠可定制这些渲染能力都由服务端配置HOCON 格式下发到前端开箱即用的默认配置见 assets/config.conf详细说明见 configuration.md。其中两个关键配置段text-highlighters开关、优先级、参数如异常渲染器的homePackagesfield-types字段类型 → 渲染器的映射如果你想在 LogViewer 中增加自定义高亮比如URL 着色器只需① 实现TextRenderer接口② 在 ObjectFactory 注册类名③ 在配置中声明——核心渲染管线一行代码都不用改。 相关源码与文档导航内容路径前端渲染核心目录log-viewer-frontend/src/app/log-view/渲染器实现log-viewer-frontend/src/app/log-view/renderers/后端日志格式解析log-viewer/src/main/java/com/logviewer/formats/配置文档configuration.md过滤器文档filters.md前端 Web 集成测试log-viewer-cli/src/test/java/com/logviewer/tests/web/ExceptionRendererTest.java、BracketHighlighterTest.java总结LogViewer 前端的精髓在于接口抽象 配置驱动 坐标系统——FieldRenderer/TextRenderer两个接口把渲染拆得足够细strLen坐标系让搜索、折叠、高亮三种能力在同一行日志上互不干扰地叠加这正是它能流畅呈现超大日志文件的关键。【免费下载链接】log-viewerWeb UI for viewing logs项目地址: https://gitcode.com/gh_mirrors/log/log-viewer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何读懂 LogViewer 前端：日志行渲染、异常堆栈折叠与字段高亮的完整实现指南
如何读懂 LogViewer 前端日志行渲染、异常堆栈折叠与字段高亮的完整实现指南【免费下载链接】log-viewerWeb UI for viewing logs项目地址: https://gitcode.com/gh_mirrors/log/log-viewerLogViewer 是一款在浏览器中实时查看服务器日志的 Web 日志查看器Web UI for viewing logs支持过滤、搜索、高亮与多日志合并。本文带你剖析它的前端实现三大核心机制 日志行如何渲染成结构化 HTML、 Java 异常堆栈如何智能折叠、 字段与搜索命中又如何被精准高亮。 先看效果LogViewer 日志查看界面从截图可以看到左侧是日志文件导航树主区域中每一行日志都被拆分渲染——时间、级别、线程、类名等字段颜色各异长异常堆栈被折叠成少量关键行搜索命中处有醒目的高亮块。这些效果全部由前端渲染器体系完成。 渲染体系全景两类渲染器 一个注册中心前端基于 AngularTypeScript开发核心代码位于 log-viewer-frontend/src/app/log-view/ 目录。整个渲染体系只依赖两个接口定义在 renderer.ts接口职责典型实现FieldRenderer渲染日志中某个字段如日期、级别日期渲染器、固定文本渲染器TextRenderer对纯文本做增强渲染返回高亮区间异常堆栈、括号、正则高亮所有渲染器实例由 ObjectFactory 统一创建再由 ViewConfigService 根据后端下发的配置装配分为两条线字段渲染器按字段类型查找支持date→date/millisecond这类父类型继承匹配见 createFieldRenderer文本高亮器来自配置text-highlighters按priority排序后依次执行这种配置驱动 工厂注册的设计意味着扩展新的高亮能力无需改动核心逻辑只需实现接口并注册即可。 日志行渲染一条 Record 如何变成 HTML每行日志在后端解析为一条Record原始文本s 各字段的位置区间。前端 RecordRendererService.render() 负责把它变成 DOM流程分三种情况不可解析的记录没有任何字段信息时整行按纯文本走文本高亮管线保证再奇怪的日志也显示得出来正常记录字段按start位置排序后逐个渲染字段之间的间隙补入原始文本形成字段与原文无缝拼接的效果超大记录若一行日志过大只显示开头并追加[load more]链接见 appendLoadMoreIfNeeded点击后仅追加增量文本避免一次性渲染撑爆浏览器还有一个精巧的细节渲染完成后会通过 setStrLenAttribute 给每个 DOM 元素打上strLen标记——记录它对应原始文本的长度。纯装饰元素图标、展开按钮被标记为lv-virtual、长度记为 0。这就为下一节搜索高亮建立了一套可定位的坐标系统。 异常堆栈折叠原理JavaExceptionRenderer这是 LogViewer 前端最出彩的部分。JavaExceptionRenderer 用四组正则把一段原始堆栈拆解成结构化数据rgxHeader匹配异常头com.foo.BarException: messagergxCausedBy匹配Caused by:把多层原因拆成多个段落rgxItem匹配每个\tat ...帧拆出包名、类名、方法名、源码位置甚至 jar 名rgxEnd匹配... 83 common frames omitted省略提示拆解之后appendCollapsableStackTrace 执行折叠策略连续的非业务代码帧框架、JDK 帧超过阈值时只保留首尾 1~2 行中间生成一个coll-wrapper collapsed折叠容器容器内含一个Expand N hidden elements展开按钮 隐藏的堆栈内容 可点击的收起手柄命中homePackages配置的业务包会被打上ex-stacktrace-package-home样式高亮你自己的代码帧——排查时一眼看到哪一帧是你的代码展开/收起没有用任何状态管理而是 handleClick 里简单地切换collapsed/expanded两个 CSS 类靠 CSS 控制显隐——轻量且可组合。更妙的是当搜索命中落在被折叠的区域时expand() 会沿 DOM 树递归找到包含命中位置的折叠容器并自动展开用户不会被藏起来的答案挡住。 字段高亮与搜索命中标记普通文本消息体、不可解析行的高亮由 textRenderer 管线 完成核心是迭代式文本切分原始字符串 → 高亮器1.tryRender() → [文本段, 高亮DOM, 文本段...] → 高亮器2.tryRender() → ...每个TextRenderer返回一组Highlight{start, end, e}区间管线把字符串按区间切成纯文本 DOM 元素的数组交给下一个高亮器继续处理直到所有高亮器跑完才一次性挂到页面上。内置的高亮器包括括号高亮BracketsHighlighter 用栈算法配对() {} []鼠标悬停任一侧括号时两侧联动亮起方便定位超长参数列表正则高亮RegexHighlighter 完全由配置驱动正则 样式用户可在配置里自定义把 IP 地址标成绿色之类的规则毫秒数/日期高亮让时间戳中的毫秒部分单独着色而搜索命中的高亮则依赖前面提到的strLen坐标系highlight() 从根节点遍历跳过lv-virtual装饰元素按字符偏移把目标区间精准套上search-result类——必要时会拆分文本节点和已有的高亮 span保证不破坏原有样式。由于坐标基于原始文本长度而非渲染后 DOM任何嵌套的高亮器组合都不会让搜索标记错位。⚙️ 配置驱动让高亮与折叠可定制这些渲染能力都由服务端配置HOCON 格式下发到前端开箱即用的默认配置见 assets/config.conf详细说明见 configuration.md。其中两个关键配置段text-highlighters开关、优先级、参数如异常渲染器的homePackagesfield-types字段类型 → 渲染器的映射如果你想在 LogViewer 中增加自定义高亮比如URL 着色器只需① 实现TextRenderer接口② 在 ObjectFactory 注册类名③ 在配置中声明——核心渲染管线一行代码都不用改。 相关源码与文档导航内容路径前端渲染核心目录log-viewer-frontend/src/app/log-view/渲染器实现log-viewer-frontend/src/app/log-view/renderers/后端日志格式解析log-viewer/src/main/java/com/logviewer/formats/配置文档configuration.md过滤器文档filters.md前端 Web 集成测试log-viewer-cli/src/test/java/com/logviewer/tests/web/ExceptionRendererTest.java、BracketHighlighterTest.java总结LogViewer 前端的精髓在于接口抽象 配置驱动 坐标系统——FieldRenderer/TextRenderer两个接口把渲染拆得足够细strLen坐标系让搜索、折叠、高亮三种能力在同一行日志上互不干扰地叠加这正是它能流畅呈现超大日志文件的关键。【免费下载链接】log-viewerWeb UI for viewing logs项目地址: https://gitcode.com/gh_mirrors/log/log-viewer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考