Arthas Web Console 前端工程解析基于 HTTP API 的浏览器可视化诊断界面【免费下载链接】arthasAlibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas项目地址: https://gitcode.com/gh_mirrors/ar/arthasArthas Web Console 是 Arthas 官方前端工程位于仓库web-ui/arthasWebConsole目录它以浏览器页面形态封装了 Arthas 的 HTTP API把dashboard、thread、tt、monitor、options等诊断命令转化为可视化图表、表格与表单交互并可通过 HTTP API 调试、与经典 Web 终端互通。读完本文你将掌握该界面的功能模块划分、与 CLI 命令的对应关系、基于 xstate 的状态机请求模型以及本地开发与构建打包方法。项目定位与技术栈Web Console 本身是一个基于 HTTP API 的可视化页面基于 http api 的 可视化 arthas 页面它与 Arthas 主仓库中的 web-console 文档 所描述的 WebSocket 终端是两个互补入口终端是命令行形态而本工程是可视化表单/图表形态。从 package.json 可以确认其技术选型技术用途TypeScript全量类型声明构建时执行vue-tsc --noEmit类型检查Vue 3script setup组合式 APIUI 框架Tailwindcss daisyui原子化样式与组件主题xstatexstate/vue用状态机建模 HTTP 请求全流程可视化请求过程pinia全局状态sessionId、轮询循环、公共提示echarts折线图、柱状图等图表渲染xterm内嵌终端相关支持vite开发服务器与多模式构建开发中还可借助 VSCode 的 xstate 插件直接查看请求数据的状态图这也是 README 中强烈推荐用 VSCode 开发的原因。注意当前版本是TS Vue3 Tailwindcss daisyui xstate属于 0.1.x 阶段的早期形态。访问入口与核心使用方式页面提供两个访问路径/index.html原版 Web 终端基于 WebSocket 的终端形态可直接跳转/ui/index.html新版可视化界面本文主体使用要点sessionId 的获取与销毁点击右上角按钮可快速获取或销毁 sessionId。当前版本中大部分命令在使用时不需要手动控制 sessionId框架会自动初始化并维持仅在必要时手动操作。刷新即重启遇到异常表现时刷新页面是最简单有效的恢复手段——因为页面状态请求状态机、轮询循环、图表缓存全部在前端刷新即重置。interrupt 红色按钮当页面出现红色 interrupt 按钮时说明当前进入了轮询polling状态这在 dashboard 与 real time实时模块中经常出现点击它即可停止当前轮询。每个功能与 CLI 命令同名功能模块直接对应dashboard、thread、tt、monitor等命令点击页面右上角的 arthas 图标可跳转官方文档查看命令细节。从 router/routes.ts 可以看到完整路由结构它把功能划分为四大分组与 README 的模块介绍一一对应路由前缀分组包含功能/dashboarddashboard监控概览/synchronizeimmediacy即时命令thread、jad、mbean、classLoader、heapdump、vmtool、reset、ognl、classInfo/asynchronizereal time异步/轮询命令tt、stack、monitor、trace、watch、profiler/configoption配置类perCounter、sysenv、sysprop、jvm、vmoption、options/consoleconsoleHTTP API 调试控制台这一分组方式正好对应 README 中有些命令需要 sessionID有些不需要的说明即时命令synchronize发出即得响应异步命令asynchronize如 dashboard、tt、monitor需要长轮询pull_results拉取结果因此需要 sessionId 支撑。模块详解dashboard实时监控概览dashboard 模块基于 Arthas 的dashboard命令实现页面截图如下折线图展示 memoryheap 堆内存、非堆内存、buffer_pool 缓冲区的 max/total/used 与使用率随时间的变化柱状图展示 GC 数据collectionCount与collectionTime表格展示 threads 信息通过 limit页面上的limit: n控件控制展示前 n 个最忙的线程。从源码 DashBoard.vue 可以印证其实现细节页面通过fetchS.pullResultsLoop(dashboadResM)建立轮询循环配合async_exec dashboard得到的jobId去拉取结果transformMemory/transformThread/transformGc/transformRuntimeInfo四个函数分别把dashboard命令返回的memoryInfo、threads、gcInfos、runtimeInfo映射为 echarts 配置与表格数据线程表格按id/name/cpu/daemon/deltaTime/group/interrupted/priority/state/time列渲染只保留前prilimit个忙碌线程顶部以 badge 形式展示 JavaHome、Java 版本、OS、processors、systemLoadAverage 等运行时信息。real time实时/异步监控需要 sessionIdreal time 是监控用的功能必须依赖 sessionId。tt、monitor等命令使用折线图展示 cost/RT耗时随时间的变化。tt方法调用记录与回放ttTime Tunnel模块的运行截图all records翻出该目标方法的所有调用记录在表格中根据 index 找到所需记录点击invoke即可触发一次该记录的调用重放search records用 Advice 对象进行条件筛选例如method.nameprint即可从全部记录中检索出符合条件的调用。从路由配置看/asynchronize/tt对应 Tt.vue这类异步命令的典型流程是async_exec提交作业 → 拿到jobId→pull_results轮询拉取结果 → 渲染图表。这正是 README 注意事项中使用 pull_results 时不能同时使用其他命令如sc class的根源——同一时刻前端只维护一条轮询通道。immediacy即时命令不需要 sessionIdimmediacy 是一发送就有响应的命令exec直接返回不需要 sessionId。部分功能提供 refresh 按钮用于手动刷新数据。thread线程详情thread 本可以做成实时刷新但为了不污染 history 且减少后端压力设计为用户手动点击 get threads获取当前线程状况。filter过滤按列名:值格式过滤例如id:-1表示过滤出所有 id -1 的行允许多列同时过滤目前仅支持运算符top thread控制展示前 n 个最忙的线程输入 0 表示不限制。option配置查看与修改简单展示 Arthas 的各类配置unsafe、batch-retransform、dump、strict、job-timeout等含 LEVEL / NAME / TYPE / VALUE / SUMMARY / DESCRIPTION 字段提供部分配置的修改能力点击 EDIT但 README 明确警告不保证安全允许类似修改 osName 这种操作即这是一把双刃剑仅建议在明确后果时使用。从代码看配置修改走exec vmoption ...命令且 consoleMachine.ts 与 perRequestMachine.ts 的cmdSucceeded守卫中专门处理了options类型结果因为Arthas 本身不会对 options 修改失败抛错前端必须比对changeResult.afterValue与目标值是否一致不一致则手动判定失败并提示。consoleHTTP API 调试控制台一般不会使用是调试 HTTP API用的工具已自动初始化 sessionId可以直接在页面上输入 JSON 请求体观察 HTTP API 的原始返回它的存在说明 Web Console 本质上就是 HTTP API 的一个客户端封装任何界面功能都可回溯为对/api端点的请求。terminalWeb 终端跳转直接跳转到基于 WebSocket 的原版 Web 终端即/index.html路径与可视化界面互补使用。请求模型xstate 状态机驱动Web Console 的请求处理不是简单的 axios 调用而是用xstate 状态机建模的这也是它能用状态图查看请求过程的原因。核心有两个状态机文件consoleMachine.ts早期版本全局单一请求状态机README 中提到的consoleMachine.tsperRequestMachine.ts新版本每个请求一个独立实例README 说明consoleMachine.ts 以后会被 perRequestMachine.ts 完全取代xstate/vue这个依赖后续也会删除。状态流转两个状态机都遵循同一核心流转以 perRequestMachine 为例idle --INIT-- ready.stringVal --SUBMIT-- ready.objVal │按 action 类型分流 ├─ isAsync → asyncReqasync_exec异步作业提交 ├─ isCommon → common exec / pull_results同步命令与结果拉取 ├─ isSession→ sessioninit_session / join_session / close_session / interrupt_job └─ 其他 → failure 各请求状态 → success / failurefinal 状态带 result 标签stringVal → objVal之间通过 transformConfigMachine.ts 把字符串形式的 JSON 请求体解析为对象失败则进入 failureobjVal的 always 分支按isAsync/isCommon/isSession三个守卫自动分发请求类型common/session/asyncReq三个状态各自invoke一个名为requestData的 service即执行fetch(context.request)并解析 JSONcmdSucceeded守卫负责判断业务层成功state为SCHEDULED/SUCCEEDED时逐条检查resultsstatus类型结果要求statusCode 0并特殊识别all consumers are unhealthy中断信息与 options 未生效的情况异步结果则要求jobStatus为READY/TERMINATED对interrupt_job打断轮询的响应永不拦截错误保证打断操作一定生效。轮询与 session 维持请求的真正执行者位于 stores/fetch.ts这是一个 pinia storegetRequest把ArthasReq组装为 POST/api的 Request——请求对象中若显式给出 sessionId/requestId/consumerId 则用给定值若为undefined则回退到全局 state否则置空串从而统一了session 相关字段的传递策略getPollingLoop返回一个PollingLoop对象open/close/isOn/invoke支持配置轮询间隔step默认 1000ms与是否启用全局 interrupt 按钮同一时刻只会有一个轮询循环挂载在curPolling上新的轮询会先 close 旧的pullResultsLoop以固定间隔发送pull_results请求拉取异步作业结果keepaliveSession每 60 秒向 session 发起一次pull_results维持 session 活性会话过期风险在非在线或出错时自动停止initSession/closeSession通过init_session/close_session动作创建、销毁会话init_session成功后自动开启 keepalivebaseSubmit提交请求并等待状态机进入带result标签的终态期间若已有轮询作业在运行jobRunning会直接拒绝防止并发污染interruptJob发送interrupt_job终止当前轮询作业。这个一个时间点只允许一个轮询/作业的约束就是 README 注意事项的根本实现pull_results 期间不能执行其他命令否则会破坏正在拉取的结果流。开发与构建环境准备强烈推荐使用VSCode开发并安装 xstate 插件以可视化查看请求状态图需要 Node.js 环境依赖清单见 package.json该前端是 Arthas 多模块工程的一部分最终构建产物会被放置到../target/static相对 Web Console 目录即仓库web-ui/target/static由后端集成提供静态资源服务。常用命令命令作用npm run dev:ui启动可视化界面开发服务器vite端口 8000modeuinpm run dev:tunnel启动 tunnel 模式开发服务器端口 8000npm run dev:native-agent启动 native-agent 模式开发服务器端口 3939npm run build类型检查并构建 tunnel 与 ui 两种模式产物npm run build:ui/build:tunnel/build:native-agent构建指定模式产物npm run preview:ui/preview:tunnel本地预览构建产物工程存在多种 build modeui / tunnel / native-agent分别对应集群管理、tunnel 连接等不同部署场景开发时通过vite --mode xxx切换各模式拥有独立入口all/ui、all/tunnel、all/native-agent。注意事项README 原话使用pull_results时不能使用其他命令如sc class原因见上文轮询与 session 维持一节的单轮询约束consoleMachine.ts即将被perRequestMachine.ts完全取代xstate/vue依赖后续也会移除工程属于早期版本README 还列出了两个后续目标一是无法量化的数据暂时用表格展示还需结合用户经验设计可视化方案二是代码的组织还是比较糟糕在 README_ZH.md 的接下来的目标一节可推断项目仍处于持续演进阶段。小结Arthas Web Console 用 Vue 3 TypeScript Tailwindcss xstate pinia 实现了一个完整的 HTTP API 可视化客户端dashboard/real time/immediacy/option/console/terminal 六大模块覆盖了 Arthas 主要的诊断场景xstate 状态机与轮询循环把async_exec → pull_results的异步链路建模得清晰可控。如果你需要在浏览器里以图表方式使用 Arthas 诊断能力或想参考状态机驱动的前端请求模型这一设计思路本工程的 全部前端源码 与 README_ZH.md 都是很好的起点经典 WebSocket 终端的对应文档可参见 web-console.md。【免费下载链接】arthasAlibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas项目地址: https://gitcode.com/gh_mirrors/ar/arthas创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Arthas Web Console 前端工程解析：基于 HTTP API 的浏览器可视化诊断界面
Arthas Web Console 前端工程解析基于 HTTP API 的浏览器可视化诊断界面【免费下载链接】arthasAlibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas项目地址: https://gitcode.com/gh_mirrors/ar/arthasArthas Web Console 是 Arthas 官方前端工程位于仓库web-ui/arthasWebConsole目录它以浏览器页面形态封装了 Arthas 的 HTTP API把dashboard、thread、tt、monitor、options等诊断命令转化为可视化图表、表格与表单交互并可通过 HTTP API 调试、与经典 Web 终端互通。读完本文你将掌握该界面的功能模块划分、与 CLI 命令的对应关系、基于 xstate 的状态机请求模型以及本地开发与构建打包方法。项目定位与技术栈Web Console 本身是一个基于 HTTP API 的可视化页面基于 http api 的 可视化 arthas 页面它与 Arthas 主仓库中的 web-console 文档 所描述的 WebSocket 终端是两个互补入口终端是命令行形态而本工程是可视化表单/图表形态。从 package.json 可以确认其技术选型技术用途TypeScript全量类型声明构建时执行vue-tsc --noEmit类型检查Vue 3script setup组合式 APIUI 框架Tailwindcss daisyui原子化样式与组件主题xstatexstate/vue用状态机建模 HTTP 请求全流程可视化请求过程pinia全局状态sessionId、轮询循环、公共提示echarts折线图、柱状图等图表渲染xterm内嵌终端相关支持vite开发服务器与多模式构建开发中还可借助 VSCode 的 xstate 插件直接查看请求数据的状态图这也是 README 中强烈推荐用 VSCode 开发的原因。注意当前版本是TS Vue3 Tailwindcss daisyui xstate属于 0.1.x 阶段的早期形态。访问入口与核心使用方式页面提供两个访问路径/index.html原版 Web 终端基于 WebSocket 的终端形态可直接跳转/ui/index.html新版可视化界面本文主体使用要点sessionId 的获取与销毁点击右上角按钮可快速获取或销毁 sessionId。当前版本中大部分命令在使用时不需要手动控制 sessionId框架会自动初始化并维持仅在必要时手动操作。刷新即重启遇到异常表现时刷新页面是最简单有效的恢复手段——因为页面状态请求状态机、轮询循环、图表缓存全部在前端刷新即重置。interrupt 红色按钮当页面出现红色 interrupt 按钮时说明当前进入了轮询polling状态这在 dashboard 与 real time实时模块中经常出现点击它即可停止当前轮询。每个功能与 CLI 命令同名功能模块直接对应dashboard、thread、tt、monitor等命令点击页面右上角的 arthas 图标可跳转官方文档查看命令细节。从 router/routes.ts 可以看到完整路由结构它把功能划分为四大分组与 README 的模块介绍一一对应路由前缀分组包含功能/dashboarddashboard监控概览/synchronizeimmediacy即时命令thread、jad、mbean、classLoader、heapdump、vmtool、reset、ognl、classInfo/asynchronizereal time异步/轮询命令tt、stack、monitor、trace、watch、profiler/configoption配置类perCounter、sysenv、sysprop、jvm、vmoption、options/consoleconsoleHTTP API 调试控制台这一分组方式正好对应 README 中有些命令需要 sessionID有些不需要的说明即时命令synchronize发出即得响应异步命令asynchronize如 dashboard、tt、monitor需要长轮询pull_results拉取结果因此需要 sessionId 支撑。模块详解dashboard实时监控概览dashboard 模块基于 Arthas 的dashboard命令实现页面截图如下折线图展示 memoryheap 堆内存、非堆内存、buffer_pool 缓冲区的 max/total/used 与使用率随时间的变化柱状图展示 GC 数据collectionCount与collectionTime表格展示 threads 信息通过 limit页面上的limit: n控件控制展示前 n 个最忙的线程。从源码 DashBoard.vue 可以印证其实现细节页面通过fetchS.pullResultsLoop(dashboadResM)建立轮询循环配合async_exec dashboard得到的jobId去拉取结果transformMemory/transformThread/transformGc/transformRuntimeInfo四个函数分别把dashboard命令返回的memoryInfo、threads、gcInfos、runtimeInfo映射为 echarts 配置与表格数据线程表格按id/name/cpu/daemon/deltaTime/group/interrupted/priority/state/time列渲染只保留前prilimit个忙碌线程顶部以 badge 形式展示 JavaHome、Java 版本、OS、processors、systemLoadAverage 等运行时信息。real time实时/异步监控需要 sessionIdreal time 是监控用的功能必须依赖 sessionId。tt、monitor等命令使用折线图展示 cost/RT耗时随时间的变化。tt方法调用记录与回放ttTime Tunnel模块的运行截图all records翻出该目标方法的所有调用记录在表格中根据 index 找到所需记录点击invoke即可触发一次该记录的调用重放search records用 Advice 对象进行条件筛选例如method.nameprint即可从全部记录中检索出符合条件的调用。从路由配置看/asynchronize/tt对应 Tt.vue这类异步命令的典型流程是async_exec提交作业 → 拿到jobId→pull_results轮询拉取结果 → 渲染图表。这正是 README 注意事项中使用 pull_results 时不能同时使用其他命令如sc class的根源——同一时刻前端只维护一条轮询通道。immediacy即时命令不需要 sessionIdimmediacy 是一发送就有响应的命令exec直接返回不需要 sessionId。部分功能提供 refresh 按钮用于手动刷新数据。thread线程详情thread 本可以做成实时刷新但为了不污染 history 且减少后端压力设计为用户手动点击 get threads获取当前线程状况。filter过滤按列名:值格式过滤例如id:-1表示过滤出所有 id -1 的行允许多列同时过滤目前仅支持运算符top thread控制展示前 n 个最忙的线程输入 0 表示不限制。option配置查看与修改简单展示 Arthas 的各类配置unsafe、batch-retransform、dump、strict、job-timeout等含 LEVEL / NAME / TYPE / VALUE / SUMMARY / DESCRIPTION 字段提供部分配置的修改能力点击 EDIT但 README 明确警告不保证安全允许类似修改 osName 这种操作即这是一把双刃剑仅建议在明确后果时使用。从代码看配置修改走exec vmoption ...命令且 consoleMachine.ts 与 perRequestMachine.ts 的cmdSucceeded守卫中专门处理了options类型结果因为Arthas 本身不会对 options 修改失败抛错前端必须比对changeResult.afterValue与目标值是否一致不一致则手动判定失败并提示。consoleHTTP API 调试控制台一般不会使用是调试 HTTP API用的工具已自动初始化 sessionId可以直接在页面上输入 JSON 请求体观察 HTTP API 的原始返回它的存在说明 Web Console 本质上就是 HTTP API 的一个客户端封装任何界面功能都可回溯为对/api端点的请求。terminalWeb 终端跳转直接跳转到基于 WebSocket 的原版 Web 终端即/index.html路径与可视化界面互补使用。请求模型xstate 状态机驱动Web Console 的请求处理不是简单的 axios 调用而是用xstate 状态机建模的这也是它能用状态图查看请求过程的原因。核心有两个状态机文件consoleMachine.ts早期版本全局单一请求状态机README 中提到的consoleMachine.tsperRequestMachine.ts新版本每个请求一个独立实例README 说明consoleMachine.ts 以后会被 perRequestMachine.ts 完全取代xstate/vue这个依赖后续也会删除。状态流转两个状态机都遵循同一核心流转以 perRequestMachine 为例idle --INIT-- ready.stringVal --SUBMIT-- ready.objVal │按 action 类型分流 ├─ isAsync → asyncReqasync_exec异步作业提交 ├─ isCommon → common exec / pull_results同步命令与结果拉取 ├─ isSession→ sessioninit_session / join_session / close_session / interrupt_job └─ 其他 → failure 各请求状态 → success / failurefinal 状态带 result 标签stringVal → objVal之间通过 transformConfigMachine.ts 把字符串形式的 JSON 请求体解析为对象失败则进入 failureobjVal的 always 分支按isAsync/isCommon/isSession三个守卫自动分发请求类型common/session/asyncReq三个状态各自invoke一个名为requestData的 service即执行fetch(context.request)并解析 JSONcmdSucceeded守卫负责判断业务层成功state为SCHEDULED/SUCCEEDED时逐条检查resultsstatus类型结果要求statusCode 0并特殊识别all consumers are unhealthy中断信息与 options 未生效的情况异步结果则要求jobStatus为READY/TERMINATED对interrupt_job打断轮询的响应永不拦截错误保证打断操作一定生效。轮询与 session 维持请求的真正执行者位于 stores/fetch.ts这是一个 pinia storegetRequest把ArthasReq组装为 POST/api的 Request——请求对象中若显式给出 sessionId/requestId/consumerId 则用给定值若为undefined则回退到全局 state否则置空串从而统一了session 相关字段的传递策略getPollingLoop返回一个PollingLoop对象open/close/isOn/invoke支持配置轮询间隔step默认 1000ms与是否启用全局 interrupt 按钮同一时刻只会有一个轮询循环挂载在curPolling上新的轮询会先 close 旧的pullResultsLoop以固定间隔发送pull_results请求拉取异步作业结果keepaliveSession每 60 秒向 session 发起一次pull_results维持 session 活性会话过期风险在非在线或出错时自动停止initSession/closeSession通过init_session/close_session动作创建、销毁会话init_session成功后自动开启 keepalivebaseSubmit提交请求并等待状态机进入带result标签的终态期间若已有轮询作业在运行jobRunning会直接拒绝防止并发污染interruptJob发送interrupt_job终止当前轮询作业。这个一个时间点只允许一个轮询/作业的约束就是 README 注意事项的根本实现pull_results 期间不能执行其他命令否则会破坏正在拉取的结果流。开发与构建环境准备强烈推荐使用VSCode开发并安装 xstate 插件以可视化查看请求状态图需要 Node.js 环境依赖清单见 package.json该前端是 Arthas 多模块工程的一部分最终构建产物会被放置到../target/static相对 Web Console 目录即仓库web-ui/target/static由后端集成提供静态资源服务。常用命令命令作用npm run dev:ui启动可视化界面开发服务器vite端口 8000modeuinpm run dev:tunnel启动 tunnel 模式开发服务器端口 8000npm run dev:native-agent启动 native-agent 模式开发服务器端口 3939npm run build类型检查并构建 tunnel 与 ui 两种模式产物npm run build:ui/build:tunnel/build:native-agent构建指定模式产物npm run preview:ui/preview:tunnel本地预览构建产物工程存在多种 build modeui / tunnel / native-agent分别对应集群管理、tunnel 连接等不同部署场景开发时通过vite --mode xxx切换各模式拥有独立入口all/ui、all/tunnel、all/native-agent。注意事项README 原话使用pull_results时不能使用其他命令如sc class原因见上文轮询与 session 维持一节的单轮询约束consoleMachine.ts即将被perRequestMachine.ts完全取代xstate/vue依赖后续也会移除工程属于早期版本README 还列出了两个后续目标一是无法量化的数据暂时用表格展示还需结合用户经验设计可视化方案二是代码的组织还是比较糟糕在 README_ZH.md 的接下来的目标一节可推断项目仍处于持续演进阶段。小结Arthas Web Console 用 Vue 3 TypeScript Tailwindcss xstate pinia 实现了一个完整的 HTTP API 可视化客户端dashboard/real time/immediacy/option/console/terminal 六大模块覆盖了 Arthas 主要的诊断场景xstate 状态机与轮询循环把async_exec → pull_results的异步链路建模得清晰可控。如果你需要在浏览器里以图表方式使用 Arthas 诊断能力或想参考状态机驱动的前端请求模型这一设计思路本工程的 全部前端源码 与 README_ZH.md 都是很好的起点经典 WebSocket 终端的对应文档可参见 web-console.md。【免费下载链接】arthasAlibaba Java Diagnostic Tool Arthas/Alibaba Java诊断利器Arthas项目地址: https://gitcode.com/gh_mirrors/ar/arthas创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考