Submit Grafana Faro Data and View in Grafana UI

Grafana Configuration
1

Hi! We have our own instance of grafana oss (that is, we aren’t using the cloud service). I’ve configured the frontend to initialize the faro web sdk and I see requests going out, but I don’t see any frontend/faro data in the Grafana UI. It could be that I don’t know how to query properly, but I don’t see any relevant metrics in the metrics dropdown in Prometheus. Is there documentation on how to configure the backend to display the web vitals metrics?

Also, is Grafana Faro fully supported on a custom install or only in the cloud?

  • What Grafana version and what operating system are you using?
    “@grafana/faro-web-sdk”: “^1.0.2”
    not sure about backend

  • What are you trying to achieve?
    Submit grafana faro statistics from front end to backend and view in grafana ui prometheus or anything.

  • How are you trying to achieve it?
    We’re hosting our own instance of grafana, agents, etc.

on front end:

import { initializeFaro as coreInitializeFaro } from '@grafana/faro-web-sdk';

export function initializeFaro() {
  const faro = coreInitializeFaro({
    url: '/foo/app/collect',
    app: {
      name: 'foo',
      version: '1.0.0',
    },
  });

  faro.api.pushLog(['Faro was initialized']);

  return faro;
}

  • What happened?
    I get a 200 response from the grafana endpoint with a response body “ok”, indicating that the data is being submitted, though I don’t see any indication of this in the server logs. Going into the grafana ui / Prometheus, I’m unable to find any UI related data. There are no relevant metrics in the metrics dropdown, they all relate to backend metrics.

  • What did you expect to happen?
    I’m expecting to be able to query UI Web Vitals and/or other data provided from our app frontend in Prometheus.
    …something as shown in introducing-grafana-faro-oss-application-observability

  • Can you copy/paste the configuration(s) that you are having problems with?

import { initializeFaro as coreInitializeFaro } from '@grafana/faro-web-sdk';

export function initializeFaro() {
  const faro = coreInitializeFaro({
    url: '/foo/app/collect',
    app: {
      name: 'foo',
      version: '1.0.0',
    },
  });

  faro.api.pushLog(['Faro was initialized']);

  return faro;
}
2

I eventually found the following demo:

which answered a couple questions:

  • Yes, Faro and Web Vitals metrics can be viewed in a custom install of Grafana.
  • You need Loki (or some Logs-type product) to view Web Vital statistics.

This sample frontend dashboard config is also helpful:

You can import it as a dashboard in the Grafana UI and it has widgets for you all the frontend stats that you’d expect.