4、故障排查工具链：日志系统（ELK）、APM工具（SkyWalking）、数据库监控（Grafana+Prometheus）、浏览器开发者工具

可视化刷新故障往往不是单一环节的问题，而是从前端请求、后端服务、数据库查询到日志记录的全链路异常。本章构建一套完整的工具链，覆盖日志聚合、链路追踪、指标监控和前端调试四个维度，帮助运维与开发人员快速定位刷新失败的根本原因。

4.1 工具链全景与分工

四类工具在故障排查中承担不同角色，组合使用可覆盖“数据采集→链路追踪→指标告警→前端验证”的闭环。

4.2 日志系统（ELK）—— 集中化日志分析

ELK 将控制塔各微服务的日志统一采集到 Elasticsearch，通过 Kibana 提供搜索与可视化界面。在刷新故障场景中，重点查看以下日志类型：

• 应用错误日志：搜索 level:ERROR 或 status:500，定位异常堆栈。
• 慢查询日志：过滤 response_time > 3000，找出拖慢刷新的 SQL。
• API 调用日志：按 api_path 聚合，统计失败率与平均响应时间。

# Kibana 常用查询示例
# 查找最近 15 分钟的错误日志
level:ERROR AND @timestamp > now-15m

# 查找特定看板接口的慢响应
api_path:"/api/dashboard/inventory" AND response_time > 5000

# 按服务名聚合错误数
service_name: "supply-chain-api" | stats count by level

4.3 APM 工具（SkyWalking）—— 分布式链路追踪

控制塔可视化刷新通常涉及前端 → API 网关 → 业务服务 → 数据服务 → 数据库的多次调用。SkyWalking 通过探针自动采集调用链，生成服务拓扑图与 Span 详情。

4.4 数据库监控（Grafana + Prometheus）—— 指标可视化与告警

Prometheus 采集数据库连接数、查询延迟、磁盘 IO 等指标，Grafana 提供仪表盘展示。当可视化刷新变慢或失败时，优先检查以下关键指标：

# Grafana 仪表盘配置示例（JSON 片段）
{
  "title": "数据库连接池监控",
  "panels": [
    {
      "type": "graph",
      "title": "活跃连接数",
      "targets": [
        {
          "expr": "pg_stat_activity_count{datname=\"supply_chain\"}",
          "legendFormat": "活跃连接"
        }
      ],
      "yaxis": { "min": 0, "max": 100 }
    }
  ]
}

4.5 浏览器开发者工具 —— 前端调试第一站

当用户反馈“看板空白”或“数据不刷新”时，浏览器开发者工具是最直接的排查入口。重点使用以下面板：

• Network 面板：查看 API 请求是否发送、响应状态码、耗时。过滤 status:4xx 或 status:5xx 快速定位失败请求。
• Console 面板：捕获 JavaScript 运行时错误、跨域问题、资源加载失败。
• Performance 面板：录制刷新过程，分析渲染瓶颈、长任务、网络瀑布图。

// Console 面板常用调试命令
// 检查 API 响应数据
fetch('/api/dashboard/inventory')
  .then(res => res.json())
  .then(data => console.table(data));

// 查看页面性能指标
performance.getEntriesByType('resource')
  .filter(entry => entry.initiatorType === 'fetch')
  .forEach(entry => console.log(entry.name, entry.duration));

4.6 工具链协同排查流程

四类工具并非孤立使用，而是按照“前端→链路→日志→指标”的顺序协同工作。以下流程图展示标准排查路径：