首先明确监控目标，涵盖前端错误、性能、行为与后端接口、jvm、异常等，并实现关联分析；接着通过JavaScript捕获全局错误、promise异常、API请求耗时及页面性能指标并上报；spring Boot使用Actuator与Micrometer暴露监控数据，记录自定义指标；通过prometheus抓取后端指标，grafana统一展示，结合Trace ID关联调用链；前端日志经http发送至后端，可集成elk或Loki；最后实施节流、脱敏、限流与https保障安全与性能。
在现代Web应用开发中，前后端分离架构越来越普遍。JavaScript（前端）与spring boot（后端）的组合广泛应用于各类项目中。为了保障系统稳定性与性能，集成应用监控是必不可少的一环。本文将详细介绍如何将JavaScript前端与Spring Boot后端进行统一的应用监控集成，涵盖错误捕获、性能追踪、日志上报和可视化分析。
1. 明确监控目标
在集成之前，先明确需要监控的内容：
- 前端监控：JavaScript运行时错误、资源加载失败、API请求延迟、用户行为追踪
- 后端监控：接口响应时间、JVM状态、数据库连接、异常堆栈、线程状态
- 关联分析：能将前端用户操作与后端服务调用链路关联，便于问题定位
2. 前端JavaScript监控实现
使用轻量级SDK或自定义脚本收集前端运行数据。
错误捕获
立即学习“Java免费学习笔记（深入）”；
监听全局错误和未处理的Promise异常：
window.addEventListener('error', function(e) { const errorData = { message: e.message, source: e.filename, lineno: e.lineno, colno: e.colno, stack: e.error?.stack, url: window.location.href, userAgent: navigator.userAgent, timestamp: new Date().toISOString() }; sendToMonitor('/api/log/frontend-error', errorData); }); <p>window.addEventListener('unhandledrejection', function(e) { const errorData = { reason: e.reason?.toString(), stack: e.reason?.stack, url: window.location.href, timestamp: new Date().toISOString() }; sendToMonitor('/api/log/frontend-promise-reject', errorData); });
API请求监控
function monitoredFetch(url, options = {}) { const start = performance.now(); return fetch(url, options) .then(response => { const duration = performance.now() - start; logRequestMetric({ method: options.method || 'GET', url, status: response.status, duration, timestamp: new Date().toISOString() }); return response; }) .catch(error => { const duration = performance.now() - start; logRequestMetric({ url, status: 0, duration, error: error.message }); throw error; }); }
性能指标采集
利用Performance API获取关键时间点：
function collectPerformance() { const perfData = performance.getEntriesByType('navigation')[0]; return { dns: perfData.domainLookupEnd - perfData.domainLookupStart, tcp: perfData.connectEnd - perfData.connectStart, ttfb: perfData.responseStart, domLoad: perfData.domContentLoadedEventEnd, pageLoad: perfData.loadEventEnd }; } // 页面加载完成后上报 window.addEventListener('load', () => { sendToMonitor('/api/log/performance', collectPerformance()); });
3. Spring Boot后端监控配置
使用Spring Boot Actuator + Micrometer 实现标准监控。
添加依赖
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-actuator</artifactId> </dependency> <dependency> <groupId>io.micrometer</groupId> <artifactId>micrometer-registry-prometheus</artifactId> </dependency>
启用Actuator端点
在application.yml中配置：
management: endpoints: web: exposure: include: health,info,metrics,prometheus metrics: tags: application: ${spring.application.name}
自定义指标记录
在Controller中记录业务相关指标：
@RestController public class MonitorController { <pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">private final MeterRegistry meterRegistry; public MonitorController(MeterRegistry meterRegistry) { this.meterRegistry = meterRegistry; } @PostMapping("/log/frontend-error") public ResponseEntity<String> logFrontendError(@RequestBody Map<String, Object> error) { Counter counter = Counter.builder("frontend.errors") .tag("type", (String) error.getOrDefault("message", "unknown")) .register(meterRegistry); counter.increment(); // 可选：记录直方图（如错误发生时间分布） Timer.Sample sample = Timer.start(meterRegistry); sample.stop(Timer.builder("frontend.error.log.time").register(meterRegistry)); return ResponseEntity.ok("Logged"); }
}
4. 统一监控数据收集与展示
推荐使用Prometheus + Grafana搭建可视化平台。
Prometheus配置
在prometheus.yml中添加Spring Boot应用抓取任务：
scrape_configs: - job_name: 'springboot-app' metrics_path: '/actuator/prometheus' static_configs: - targets: ['localhost:8080']
Grafana仪表板
- 导入JVM监控模板（ID: 4701）
- 创建自定义面板展示前端错误率、API延迟、页面加载时间
- 通过Trace ID将前端请求与后端调用关联（需集成OpenTelemetry）
日志聚合（可选）
前端日志可通过HTTP接口发送到后端，再由logback输出到ELK或Loki：
// 后端接收并写入日志 @PostMapping("/log/frontend-error") public void receiveFrontendLog(@RequestBody String log) { log.info("[FRONTEND] {}", log); // 输出到控制台或文件 }
5. 安全与性能优化建议
- 前端监控上报使用节流机制，避免频繁请求
- 敏感信息（如用户ID）脱敏后再上报
- 监控接口增加限流（如spring cloud gateway限流）
- 生产环境关闭调试端点（如/env、/beans）
- 使用HTTPS传输监控数据
基本上就这些。通过上述步骤，你可以实现JavaScript前端与Spring Boot后端的完整监控闭环，及时发现并定位问题，提升用户体验和系统稳定性。