5分钟上手前端监控告警：从0到1搭建Prometheus+Grafana可视化平台

5分钟上手前端监控告警：从0到1搭建Prometheus+Grafana可视化平台

【免费下载链接】frontend-bootcamp Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux 项目地址: https://gitcode.com/gh_mirrors/fr/frontend-bootcamp

为什么前端监控比后端更重要？

当用户抱怨页面加载缓慢时，传统后端监控往往无法定位问题。现代前端应用涉及HTML/CSS渲染、JavaScript执行、API交互等多个环节，任何一环异常都会直接影响用户体验。本教程基于frontend-bootcamp项目架构，教你如何在现有Express服务器中植入监控指标，通过Prometheus采集数据，最终用Grafana构建实时告警看板。

监控指标设计：前端需要关注什么？

前端监控应聚焦三类核心指标：

• 性能指标：首屏加载时间、资源加载成功率
• 错误指标：JS错误率、API调用失败率
• 用户行为：页面停留时长、交互完成率

在server/index.js中添加基础计数器示例：

// 在store对象后添加
const metrics = {
  requestCount: 0,
  errorCount: 0,
  getMetrics() {
    return `# HELP http_requests_total Total number of HTTP requests
# TYPE http_requests_total counter
http_requests_total ${this.requestCount}
# HELP http_errors_total Total number of HTTP errors
# TYPE http_errors_total counter
http_errors_total ${this.errorCount}`;
  }
};

// 在每个路由处理前添加
app.use((req, res, next) => {
  metrics.requestCount++;
  next();
});

数据采集：Prometheus配置实战

1. 暴露指标端点

修改server/index.js添加Prometheus格式的指标接口：

// 在现有路由后添加
app.get('/metrics', (req, res) => {
  res.set('Content-Type', 'text/plain');
  res.send(metrics.getMetrics());
});

2. Prometheus配置文件

创建prometheus.yml配置文件：

scrape_configs:
  - job_name: 'frontend-bootcamp'
    scrape_interval: 5s
    static_configs:
      - targets: ['localhost:3000']

启动Prometheus时挂载该配置文件，即可开始采集server/index.js暴露的http_requests_total和http_errors_total指标。

可视化告警：Grafana看板搭建

1. 基础仪表盘配置

1. 添加Prometheus数据源，URL填写http://localhost:9090
2. 导入仪表盘模板ID：1860（Node Exporter Full）
3. 添加自定义面板，查询表达式：

   rate(http_requests_total[5m])
   

2. 告警规则设置

针对API错误率设置阈值告警：

1. 在Grafana中创建告警规则
2. 条件：http_errors_total / http_requests_total > 0.05（错误率>5%）
3. 通知渠道：配置邮件或Slack通知

与前端项目集成的最佳实践

1. 前后端指标联动

在bonus-jest/demo/src/index.ts中扩展计数器功能：

// 原counter变量修改为
export const metrics = {
  todoCreated: 0,
  todoCompleted: 0,
  incrementCreated() { this.todoCreated++ },
  incrementCompleted() { this.todoCompleted++ }
};

通过API调用将前端交互指标同步到后端监控系统。

2. 监控代码的工程化管理

建议将监控逻辑封装为独立模块，参考项目中step2-02/demo/src/store/index.ts的状态管理模式，实现：

• 指标定义与业务逻辑分离
• 环境隔离（开发/生产环境指标开关）
• 指标数据本地缓存与批量上报

常见问题与解决方案

问题场景	解决方案	参考文件
指标采集不及时	调整scrape_interval至10s	prometheus.yml
前端JS错误监控	使用window.onerror捕获异常	step1-03/exercise/answer.js
看板加载缓慢	减少面板数量，使用变量过滤	Grafana面板设置

下一步行动指南

1. 完善server/index.js中的错误统计逻辑
2. 添加用户行为指标（参考step1-05/demo/src/App.tsx的Todo交互）
3. 配置Grafana告警通知到企业微信
4. 尝试使用Prometheus Alertmanager管理告警规则

通过这套监控体系，你可以实时掌握frontend-bootcamp项目的运行状态，在用户投诉前发现并解决问题。立即动手改造你的Express服务器，体验可观测性带来的开发效率提升！

【免费下载链接】frontend-bootcamp Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux 项目地址: https://gitcode.com/gh_mirrors/fr/frontend-bootcamp