Arthas Web Console 可视化界面指南基于 HTTP API 构建的 Web 版 Arthas 诊断台【免费下载链接】arthasAlibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas项目地址: https://gitcode.com/gh_mirrors/ar/arthasArthas Web Console 是 Arthas 官方仓库中一套基于 HTTP API 构建的可视化 Web 前端。它把dashboard、thread、tt、monitor、trace、stack、watch、profiler、options等 Arthas 命令封装成带图表、表格与交互式表单的图形界面让开发者不必记忆命令行参数即可在浏览器中完成线程分析、内存观测、方法追踪与配置修改。本文将以 web-ui/arthasWebConsole/README_ZH.md 为骨架结合仓库源码web-ui/arthasWebConsole目录下的 Vue3 TypeScript 工程深入讲解其功能模块、HTTP API 调用机制与开发构建方式读完可掌握 Arthas Web Console 的使用技巧与二次开发思路。一、项目定位从 CLI 到可视化 Web 终端的进化Arthas 原生提供 Telnet 与 WebSocket 两种交互终端对应入口/index.html即原版 Web terminal。Arthas Web Console 则提供了一条完全不同的路径——基于 HTTP API 的可视化界面其第二个入口为/ui/index.html新版可视化界面。两者的核心区别在于通信方式原版 Web terminal基于 WebSocket 长连接逐字符交互命令结果以文本流返回Web Console基于 HTTP API详见 site/docs/doc/http-api.md每次操作是一次 HTTP 请求响应是结构化 JSON前端据此渲染图表与表格。从路由配置 routes.ts 可以看出Web Console 将功能划分为四大区域路由前缀功能定位包含页面/dashboard实时总览大盘DashBoard/synchronize即时命令immediacythread、jad、mbean、classLoader、heapdump、vmtool、reset、ognl、classInfo/asynchronize异步命令real timett、stack、monitor、trace、watch、profiler/config配置类命令perCounter、sysenv、sysprop、jvm、vmoption、options/consoleHTTP API 调试终端Console每个功能页面都与 CLI 命令同名具体命令语义可通过点击页面右上角的 Arthas 图标跳转到官方命令文档查阅。二、快速使用指南1. SessionID 的管理HTTP API 的会话体系包含init_session、join_session、close_session、interrupt_job等动作。在 Web Console 中大多数场景下无需手动关心 sessionID点击右上角按钮即可快速获取init_session或销毁close_sessionsessionID。值得说明的是dashboard、monitor、tt等轮询类命令依赖 sessionID才能工作异步执行结果需要 session 承载而thread、jad、ognl等即时命令不需要 sessionID。在 fetch.ts 的实现中请求参数缺失时由 store 自动补齐请求对象中显式传入的值优先使用传入undefined时使用全局 store 中保存的默认值即已初始化的 sessionID属性完全不传时自动赋值为空字符串。也就是说前端在发起请求时通过getRequest()统一注入sessionId、consumerId、requestId三个字段用户层面几乎感知不到 session 的存在。2. 刷新页面与 interrupt 按钮遇到奇怪的问题刷新网页是首选排障手段——所有状态都保存在前端内存中刷新即可重置当界面上出现红色的interrupt按钮时说明当前已进入轮询状态dashboard与 real time 类页面最常见。点击该按钮会向前端发送interrupt_job动作中断当前任务停止轮询。从 fetch.ts 的interruptJob()可以看到它先置jobRunning false再以interrupt_job动作提交请求轮询循环在检测到jobRunning为 false 后自动close()从而优雅地停止pull_results循环。三、dashboard实时总览大盘dashboard 页面基于 Arthas 的dashboard命令实现展示形式如下结合 DashBoard.vue 的源码其数据流是挂载时先asyncInit()初始化 session随后以async_exec动作提交dashboard命令拿到返回的jobId用pullResultsLoop开启长轮询循环持续pull_results拉取命令结果每次拿到type dashboard的结果后分别喂给三个渲染器。页面包含三块核心可视化内存折线图从memoryInfo.heap、memoryInfo.nonheap、memoryInfo.buffer_pool中提取数据每块区域绘制max / total / used三条折线无 max 时退化为两条并叠加一条usage(%)使用率曲线纵轴左侧为 MB右侧为百分比GC 柱状图读取gcInfos以柱状图同时展示collectionCount左轴与collectionTime右轴单位 ms线程表格展示threads数组默认只显示前 3 个最忙的线程pri初始值 3可通过页面上的limit按钮配合-/调整数值越大展示的忙线程越多表格列包括id、name、cpu、daemon、deltaTime、group、interrupted、priority、state、time。此外页面顶部以 badge 形式展示runtimeInfo中的 JVM 运行时信息如 JVM 版本、运行时长、操作系统等排除timestamp与uptime两个字段。四、real time异步命令的可视化监控real time 区域/asynchronize承载tt、monitor、stack、trace、watch、profiler等需要持续监听的命令它们必须依赖 sessionID。与 dashboard 相同这些页面通过async_exec提交命令、以pull_results长轮询持续拉取增量结果并用折线图实时展示tt的 cost 与monitor的 RT 等耗时指标。tt方法调用追踪与回放tt页面Tt.vue是目前功能最完整的异步页面提供三类操作1. 追踪记录all records点击 “all records” 按钮前端执行tt -l一次性拉取全部已记录的时间片TimeFragment清空旧数据后填充表格。表格展示index、timestamp、className、methodName、cost、object、params、returnObj、throwExp等列其中params以“参数名:参数值”的形式逐行列出returnObj与throwExp以 pre/code 块展示原始内容。2. 触发回放invoke在表格中根据index找到目标记录后点击该行的invoke按钮前端执行tt -i ${index} -p重放那一次方法调用。回放结果replayResult与sizeLimit、replayNo一起展示在 “invoked result” 面板中并支持对同一 index 再次 invoke。3. 按条件搜索search records搜索框使用Advice 对象语法构造条件例如method.nameprint即可精确匹配方法名为print的记录。前端将输入包装为tt -s 条件执行若匹配不到任何记录timeFragmentList为空会弹出 “not found” 错误提示。cost 折线图页面顶部使用 ECharts 折线图以index为横轴、cost(ms)为纵轴展示每次调用的耗时走势并内置了dataZoom缩放起始 50%、结束 100%与 toolbox 数据视图功能便于观察耗时突变。五、immediacy即发即回的即时命令immediacy 区域/synchronize承载thread、jad、mbean、heapdump、vmtool、ognl、reset、retransform等一发送就有响应的命令不需要 sessionID。这类命令前端以exec动作一次性提交拿到结果即渲染部分功能提供refresh 手动刷新按钮。thread线程详情与过滤在 Thread.vue 中页面刻意没有做自动轮询thread 属于即时命令若反复自动执行会污染history并增加后端压力因此采用用户手动点击 “get threads”来获取当前线程快照。源码中实际拼接的命令为thread --all [-b --lockedMonitors --lockedSynchronizers] [-i sample interval] [-n top] [--state value]sample interval采样间隔默认 200ms对应-i参数top threads控制展示前几个最忙的线程对应-n参数0 代表不限制此时展示完整线程统计并按 CPU 使用率降序排序is blocking开启后追加-b --lockedMonitors --lockedSynchronizers用于排查死锁阻塞线程state通过下拉框按线程状态过滤WAITING / RUNNABLE / TIMED_WAITING / BLOCKED / all。页面顶部以计数徽章展示各线程状态的数量NEW、RUNNABLE、BLOCKED、WAITING、TIMED_WAITING、TERMINATED中部是线程表格底部为选中线程的stackTrace面板点击行内 “get stackTrace” 按钮执行thread ${threadId}获取单线程堆栈。filter 过滤功能支持按“列名:值”的语法对表格做客户端过滤例如id:-1 // 过滤出所有 id -1 的行允许多个列同时过滤目前仅支持精确比较语义name与group两列是包含匹配支持多个子串取交集可用[a,b]形式表达多值其余列如id、cpu、state为精确匹配。option配置查看与修改option 页面/config/options对应 Options.vue执行options命令将返回的全局配置level、name、type、value、summary、description渲染为可编辑表格点击某行的edit按钮弹出输入框修改后执行options key value提交提交成功后从返回结果的changeResult.afterValue同步前端值失败则自动回退为原值表格按level升序、name字母序排序。需要提醒该页面不保证修改安全——它允许修改osName这类敏感的全局选项仅适合有经验的排障场景误改可能导致目标 JVM 行为异常。六、console 与 terminalconsole/console一般不会用到它是调试 HTTP API 的裸终端可以直接输入exec、async_exec等 action 观察原始请求/响应方便排查 HTTP API 本身的问题。该页面已自动完成init_session进入即可联调terminal提供入口直接跳转到基于 WebSocket 的原版 Web 终端/index.html适合仍习惯 CLI 交互的用户。七、前端架构与 HTTP API 调用机制1. 请求对象与三类动作在 fetch.ts 中所有请求统一构造为对/api的 POST 请求body 形如{ action: exec, command: thread --all -i 200, sessionId: ..., consumerId: ..., requestId: ... }结合 perRequestMachine.ts 中的守卫逻辑请求动作被分为三类路由动作语义使用场景exec同步执行立即返回结果thread、jad、ognl、options 等即时命令async_exec异步执行返回 jobIddashboard、tt、monitor、trace 等轮询命令pull_results长轮询拉取异步结果轮询循环中重复调用init_session/join_session/close_session/interrupt_job会话生命周期管理登录会话、中断任务2. xstate 状态机驱动请求生命周期请求不是简单地fetch而是由 perRequestMachine.ts 这个xstate 状态机管理完整生命周期idle → ready → objVal → (common | session | asyncReq) → success / failure。状态机负责三件事请求构造根据输入字符串命令或对象判断应走同步、异步还是会话路径并由fetchStore.getRequest()生成 Request 对象结果校验cmdSucceeded守卫会检查响应state是否为SCHEDULED / SUCCEEDED、results中statusCode是否为 0、options修改结果的afterValue是否与命令一致因为 Arthas 本身对options不抛错前端需手动比对判错错误展示失败时通过publicStore弹出错误对话框isErr ErrMessage。3. 轮询循环与 session 保活fetch.ts 实现了三类轮询循环pullResultsLoop轮询pull_results默认间隔 1000ms可被 interrupt 按钮全局打断keepaliveSessionsession 初始化后每60 秒自动执行一次pull_results维持会话活性HTTP 消费者默认 5 分钟超时避免因超时导致 session 失效nullLoop空闲占位。轮询循环有严格的使用约束——当使用pull_results轮询时不要同时执行其他命令例如sc class否则可能污染轮询结果队列。这是 README 中明确标注的注意事项也是baseSubmit在jobRunning为 true 时直接拒绝新请求的原因。八、本地开发与构建1. 技术栈与开发建议前端技术栈TypeScript Vue 3 TailwindCSS daisyUI xstate详见 package.json图表基于 ECharts终端基于 xterm强烈推荐使用 VSCode 开发并安装xstate 插件可以图形化查看每个请求的状态机流转idle → ready → 请求 → success/failure排查请求生命周期问题非常直观状态管理使用 PiniafetchStore控制请求与轮询publicStore控制弹窗与全局提示。2. 构建与产物package.json 定义了三种构建模式对应 vite.config.ts 中的配置模式入口说明dev:ui/build:uiall/ui可视化 UIdashboard、synchronize、asynchronize、config、consoledev:tunnel/build:tunnelall/tunnelTunnel 连接管理界面dev:native-agent/build:native-agentall/native-agentNative Agent 管理界面开发时通过vite.config.ts将/api代理到VITE_ARTHAS_PROXY_IP:VITE_ARTHAS_PROXY_PORT环境变量配置实现本地开发时直连 Arthas HTTP API。构建产物先输出到dist目录再通过 ant 任务复制到../target/static随 Web 模块一起部署。3. 已知注意事项与演进方向pull_results使用期间避免并发执行其他命令旧的状态机consoleMachine.ts正逐步被perRequestMachine.ts完全取代路由与视图均已切换xstate/vue的旧用法与相关依赖后续也会清理README 中标注的下一步计划包括为无法量化的数据目前用表格展示设计更贴合的可视化方案以及重构当前较松散的前端代码组织。九、总结Arthas Web Console 将 Arthas 强大的命令诊断能力封装为一套可视化、可交互、可轮询的浏览器界面即时命令随发随回异步命令以长轮询驱动图表实时刷新session 生命周期由状态机与保活循环自动管理。对于希望以图形化方式使用 Arthas 的运维与开发者直接访问/ui/index.html即可上手对于希望二次开发的同学web-ui/arthasWebConsole下按「视图views— 状态机machines— 请求仓库stores」分层的代码结构配合 xstate 可视化调试是理解整个 HTTP API 交互机制的绝佳样本。【免费下载链接】arthasAlibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas项目地址: https://gitcode.com/gh_mirrors/ar/arthas创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考