BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Grafana Releases New Frontend Observability SDK and Backend Profiling Database

Grafana Releases New Frontend Observability SDK and Backend Profiling Database

During the latest ObservabilityCon, Grafana announced two new additions to its suite of observability and monitoring tooling. Grafana Faro is an open-source web SDK for real user monitoring (RUM) of browser frontend applications. Grafana Phlare is an open-source backend database for storing and querying profiling data. A new flame graph panel is also available to facilitate visualizing and interpreting the collected profile data.

Grafana Faro is a configurable web SDK for instrumenting web applications to collect observability data. It will automatically collect logs, errors, and performance metrics with the ability to add optional metadata to the collected metrics. Grafana Faro can be configured to forward captured data to a Grafana Agent which can then send the data along to the configured backend datastore such as Prometheus.

Setting up Faro first requires a Grafana Agent instance configured with the app-agent-receiver block. Once the Grafana Faro Web SDK is installed and initialized, data can be collected by adding the configuration block to the application code. The following example will collect uncaught errors, logs, and web vitals:

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

const faro = initializeFaro({
  url: 'https://collector-host:12345/collect',
  apiKey: 'secret',
  app: {
    name: 'frontend',
    version: '1.0.0',
  },
});

While Grafana Faro will collect configured data automatically, it is possible to use the SDK to push data manually. For example, to push a log with optional context:

import { LogLevel } from '@grafana/faro-web-sdk';

const faro = window.faro;

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

As part of the announcement, Grafana has a new Frontend Application Observability service, currently in private beta. The Grafana Faro Web SDK will send its collected data to the Frontend Application Observability Collector in Grafana Cloud. The collected data will then be processed and saved as logs and traces for analysis in the Grafana Cloud instance.

Grafana Phlare provides an open-source (GNU Affero General Public License v3.0) backend for storing and querying profiling data. Profiling data is used to better understand the resource usage of a program and can facilitate optimizing for performance and cost. Grafana Phlare stores profiling data in object storage as time-series data allowing for visualizing of changes over time.

The release includes a Grafana data source plugin for Phlare as well as a data source plugin for Parca, another open-source profiling database. These two new data sources are in addition to the already-released Pyroscope plugin.

To configure Grafana Phlare, the root block scrape_configs is used by the Agent to scrape and push profiles. Each scrape_config block represents a single Agent scrape config. By default, profiles will be pulled every 10 seconds with no timeout via HTTP. Defaults can be overridden as needed:

scrape_configs:
  - job_name: 'default'
    scrape_interval: 10s
    profiling_config:
      pprof_config:
        goroutine:
          enabled: false
        memory:
          path: "/debug/pprof/heap"
        fgprof:
          enabled: true
          path: "/debug/fgprof"
          delta: true

In the above example, the goroutine has been disabled, memory has been moved to a non-default path, and fgprof mixed I/O and CPU profiles have been added. To enable pulling profiles from applications, pprof endpoints will need to be exposed.

A new flame graph panel has also been added to Grafana allowing for visualization of the collected profile data. The flame graph is currently in beta and behind the flameGraph feature toggle.

New flame graph dashboard in Grafana

New flame graph dashboard in Grafana (credit: Grafana)

 

More details on Grafana Faro and Grafana Phlare can be found in the respective release blog posts. Both tools are available on GitHub.

About the Author

Rate this Article

Adoption
Style

BT