当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript与SpringBoot监控集成方法

JavaScript与SpringBoot监控集成方法

2026-03-27 17:45:51 0浏览收藏

本文深入讲解了如何构建一套前后端一体化的监控体系，将JavaScript前端的错误捕获、API耗时、页面性能指标与Spring Boot后端的接口响应、JVM状态、自定义业务指标无缝集成，通过Actuator、Micrometer、Prometheus和Grafana实现数据采集、关联分析与可视化，并借助Trace ID打通调用链路，同时兼顾日志上报（支持ELK/Loki）、安全脱敏、节流限流与HTTPS传输等生产级实践——助你快速搭建高可用、可观测、可追溯的现代Web应用监控闭环。

JavaScript与SpringBoot应用监控集成的详细教程

在现代Web应用开发中，前后端分离架构越来越普遍。JavaScript（前端）与Spring Boot（后端）的组合广泛应用于各类项目中。为了保障系统稳定性与性能，集成应用监控是必不可少的一环。本文将详细介绍如何将JavaScript前端与Spring Boot后端进行统一的应用监控集成，涵盖错误捕获、性能追踪、日志上报和可视化分析。

1. 明确监控目标

在集成之前，先明确需要监控的内容：

前端监控：JavaScript运行时错误、资源加载失败、API请求延迟、用户行为追踪
后端监控：接口响应时间、JVM状态、数据库连接、异常堆栈、线程状态
关联分析：能将前端用户操作与后端服务调用链路关联，便于问题定位

2. 前端JavaScript监控实现

使用轻量级SDK或自定义脚本收集前端运行数据。

错误捕获

监听全局错误和未处理的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<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); // 输出到控制台或文件
}