Grafana Cloud Monitor applications Frontend Observability Faro Web SDK Send custom signals Send custom logs

Send custom logs

Logs are an integral part of instrumenting your application. Initializing the Faro Web SDK will hook into the browser’s console object and sendinfos, warns and errors to the collector endpoint. To learn more about how the console instrumentation works, refer to Instrumentations.

This will cover a large subset of your troubleshooting experience, but you can log any message based on your application requirements.

The logs sent to the collector endpoint are ingested by the Grafana Logs instance. If you are not already familiar with it, refer to the Loki Documentation.

Before you begin

• Ensure you have registered your app in the Frontend Observability plugin
• Initialize the Faro Web SDK as described in the Get started with Grafana Faro Web SDK

Steps

A Faro instance is an object that can be accessed, after initialization, by either importing it from the @grafana/faro-web-sdk or by referencing it from the window global object.

typescript

// Import the global faro instance
import { faro } from '@grafana/faro-web-sdk';

The faro.api object is a wrapper of the Faro API and provides a pushLog method with which you can send any number of logs with a set of options.

typescript

// Send custom logs with Faro SDK
// 1. Simple log line with default level
// 2. Log line with explicit level

// Send a single log
faro.api.pushLog(['User clicked add to cart']);

// Send a log with a fixed level
faro.api.pushLog([`App memory usage ${somePerf.memUsage}`], {
  level: LogLevel.WARN,
});

// Send a log with additional contextual attributes
faro.api.pushLog(['This is a log with context'], {
  context: {
    randomNumber: Math.random(),
  },
});