首先明确监控目标，涵盖前端错误、性能、行为与后端接口、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中记录业务相关指标：
@RestControllerpublic 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后端的完整监控闭环，及时发现并定位问题，提升用户体验和系统稳定性。
以上就是JavaScript与SpringBoot应用监控集成的详细教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534997.html
微信扫一扫 
支付宝扫一扫 
