JavaScript与SpringBoot应用监控集成的详细教程-js教程-PHP中文网

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

蓮花仙者

发布： 2025-11-03 06:03:18

原创

591人浏览过

首先明确监控目标，涵盖前端错误、性能、行为与后端接口、JVM、异常等，并实现关联分析；接着通过JavaScript捕获全局错误、Promise异常、API请求耗时及页面性能指标并上报；Spring Boot使用Actuator与Micrometer暴露监控数据，记录自定义指标；通过Prometheus抓取后端指标，Grafana统一展示，结合Trace ID关联调用链；前端日志经HTTP发送至后端，可集成ELK或Loki；最后实施节流、脱敏、限流与HTTPS保障安全与性能。

javascript与springboot应用监控集成的详细教程

在现代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请求监控

封装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 实现标准监控。

添加依赖

<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端点

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

在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); // 输出到控制台或文件
}

登录后复制