Angular集成@elastic/apm-rum-angular后无法连接Kibana APM求助

一、APM服务在Kibana中不显示的排查步骤 #

• 验证ServerUrl的正确性与连通性
  确保serverUrl指向正确的APM Server地址，在浏览器控制台的网络面板中，检查是否有向该地址发送的/intake/v2/rum/events请求，若请求失败（如404、403、跨域错误），需先修复网络连通问题或APM Server配置。

• 检查跨域（CORS）配置
  APM Server需要允许前端域名的跨域请求，需在APM Server的配置文件中添加：

  apm-server.rum.enabled: true
  apm-server.rum.allow_origins: ["你的前端域名"]
  

  配置后重启APM Server。

• 确认ServiceName的规范性
  serviceName不能包含空格、斜杠等特殊字符，需确保名称唯一，避免与已有服务重名。

• 查看浏览器控制台错误
  检查控制台是否有APM初始化相关的报错，比如库加载失败、配置参数错误等，根据报错信息调整配置。

• 验证版本兼容性
  确保@elastic/apm-rum-angular的版本与APM Server、Kibana的版本匹配（如均为8.x系列），版本不兼容可能导致数据无法正常上报。

• 检查采样率配置
  默认采样率为1.0（100%），若初始化时未显式设置，可添加sampleRate: 1.0确保数据被正常采样：

  this.apm = service.init({
      serviceName: 'abc',
      serverUrl: '你的APM Server地址',
      sampleRate: 1.0
  });
  

• 触发可被捕获的事件
  RUM库默认捕获页面加载、路由切换、用户交互等事件，若页面为静态无交互状态，可手动触发路由跳转或点击操作，观察是否有数据上报。

二、Secret-Token的配置方式 #

@elastic/apm-rum-angular的初始化配置中确实没有secret-token选项，原因是Secret-Token属于敏感信息，直接在前端代码中暴露会导致安全风险。推荐以下两种方案：

方案1：使用API Key替代 #

在Kibana中生成专门的RUM API Key，将其添加到初始化配置中：

this.apm = service.init({
    serviceName: 'abc',
    serverUrl: '你的APM Server地址',
    apiKey: '生成的RUM API Key'
});

方案2：通过代理转发请求 #

使用Angular代理将APM请求转发到APM Server，在代理中添加Authorization头（携带Secret-Token）：

1. 创建proxy.conf.json文件：

{
  "/apm": {
    "target": "你的APM Server地址",
    "secure": false,
    "changeOrigin": true,
    "headers": {
      "Authorization": "Bearer 你的Secret-Token"
    }
  }
}

2. 在angular.json中配置代理：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "proxyConfig": "proxy.conf.json"
  }
}

3. 修改APM初始化的serverUrl为前端代理地址：

this.apm = service.init({
    serviceName: 'abc',
    serverUrl: '/apm'
});

内容的提问来源于stack exchange，提问作者M123