首先明确监控目标，涵盖前端错误、性能、行为与后端接口、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);
});
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请求监控
封装fetch或axios，记录请求耗时与状态：
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 实现标准监控。
添加依赖
org.springframework.boot spring-boot-starter-actuator io.micrometer micrometer-registry-prometheus
启用Actuator端点
在application.yml中配置：
management:
endpoints:
web:
exposure:
include: health,info,metrics,prometheus
metrics:
tags:
application: ${spring.application.name}
自定义指标记录
在Controller中记录业务相关指标：
@RestController
public class MonitorController {
private final MeterRegistry meterRegistry;
public MonitorController(MeterRegistry meterRegistry) {
this.meterRegistry = meterRegistry;
}
@PostMapping("/log/frontend-error")
public ResponseEntity logFrontendError(@RequestBody Map 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后端的完整监控闭环，及时发现并定位问题，提升用户体验和系统稳定性。
