Grafana Faro无法向Prometheus传输Web指标问题求助

我正尝试将Grafana Faro与现有Prometheus结合，为静态网站实现可观测性，此前使用Google Analytics，现计划迁移。

我已在静态页面中通过<script>标签引入Faro Web SDK，预期能发送包含Web Vitals在内的基础指标。目前Prometheus已接收来自Grafana Agent的624条指标，涵盖Grafana Agent、Grafana Faro App Agent Receiver及Blackbox Exporter的指标，查询语句如下：

count by(__name) ({__name__=~".+",agent_hostname="{my-host}:12345"})

返回结果为624。

但我在Grafana文档和Prometheus服务器中都找不到对应的Web指标数据，有以下疑问：

• Faro通过Agent发送的Web Vitals指标是否应该能在Prometheus中接收？
• 我手动导入了web-vitals库（Faro文档未提及此操作，但我认为必须做），不确定这一步是否正确。
• 我期望找到Web Vitals或自定义的cart-transaction指标数据，猜测这些指标可能先路由到Loki再转发至Prometheus？

Grafana Agent配置（agent.yaml） #

server:
  log_level: info
metrics:
  wal_directory: /tmp/wal
  global:
    scrape_interval: 1m
  configs:
    - name: default
      remote_write:
      - url: "http://localhost:9090/api/v1/write"
integrations:
  agent: {}
  cadvisor: {}
  metrics:
    autoscrape:
      enable: true
      metrics_instance: default
  app_agent_receiver_configs:
  -  autoscrape:
       enable: true
       metrics_instance: default
     instance: frontend
     server:
       host: 0.0.0.0
       port: 8888
       api_key: secret
       cors_allowed_origins:
       - "http://localhost:8080"
  blackbox:
    blackbox_targets:
    - name: Ackal
      address: https://google.com
      module: http_2xx
    blackbox_config:
      modules:
        http_2xx:
          prober: http
          timeout: 5s
          http:
            method: GET

单页HTML客户端的JavaScript代码 #

import {
    onCLS,
    onFID,
    onLCP,
} from "https://esm.run/web-vitals";

onCLS(console.log);
onFID(console.log);
onLCP(console.log);

import {
    createSession,
    initializeFaro,
} from "https://esm.run/@grafana/faro-web-sdk";

const faro = initializeFaro({
    url: "http://localhost:8888/collect",
    apiKey: "secret",  
    app: {
        name: 'frontend',
        version: '1.0.0',
    },
});

// log with context
faro.api.pushLog(['Sending update'], {
  context: {
    payload: "payload",
  },
  level: LogLevel.TRACE,
});

// set user metadata, to be included with every event. All properties optional
faro.api.setUser({
  email: 'bob@example.com',
  id: '123abc',
  username: 'bob',
  attributes: {
    role: 'manager',
  },
});

// unset user
faro.api.resetUser();

// set session metadata, to be included with every event
faro.api.setSession(createSession({ plan: 'paid' }));

// unset session
faro.api.resetSession();

// push measurement
faro.api.pushMeasurement({
  type: 'cart-transaction',
  values: {
    delay: 122,
    duration: 4000,
  },
});

排查建议 #

• 确认Faro SDK是否正确发送数据到Agent
  打开浏览器开发者工具的Network标签，过滤/collect请求，检查是否有成功的POST请求发送到http://localhost:8888/collect，查看响应状态码（200/202为正常），同时检查请求体是否包含Web Vitals和自定义cart-transaction数据。

• 检查Grafana Agent的App Receiver配置与日志
  确保app_agent_receiver_configs中的autoscrape已正确关联到default metrics实例，且remote_write配置正确指向Prometheus地址。查看Agent日志，搜索app_agent_receiver相关条目，确认是否接收到Faro发送的事件/指标，是否有解析或转发错误。

• 修正Web Vitals的捕获逻辑
  Faro Web SDK不会自动捕获Web Vitals，你当前仅用console.log输出数据，并未传给Faro。需要修改代码，在Web Vitals回调中调用pushMeasurement发送数据：

  onCLS((metric) => {
    faro.api.pushMeasurement({
      type: 'web-vitals-cls',
      values: { value: metric.value },
    });
  });
  onFID((metric) => {
    faro.api.pushMeasurement({
      type: 'web-vitals-fid',
      values: { value: metric.value },
    });
  });
  onLCP((metric) => {
    faro.api.pushMeasurement({
      type: 'web-vitals-lcp',
      values: { value: metric.value },
    });
  });
  

• 在Prometheus中查询正确的指标前缀
  Faro的测量类指标在Prometheus中通常以grafana_app_agent_为前缀，先查询grafana_app_agent_measurements_total确认Agent是否接收到测量数据，再通过标签筛选cart-transaction或Web Vitals相关指标，比如：

  grafana_app_agent_measurements_total{type="cart-transaction"}
  

• 验证Loki路由猜测
  Faro的日志默认会发送到Loki，但测量（Measurement）数据是作为指标由Agent直接转发到Prometheus的，无需经过Loki。检查Agent配置，确认没有将测量数据路由到Loki的额外设置。

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