Documentation Grafana Cloud Monitor applications Frontend Observability Instrument Send custom signals Logs

Send custom logs

Logs are an integral part of instrumenting your application. Initializing the Faro Web SDK hooks into the browser’s console object and sendinfos, warns and errors to the collector endpoint.

This covers 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
• Set up the Faro Web SDK from the quickstart or instrumentation documentation.

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 Copy

// 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 Copy

// 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(),
  },
});

API

The logs API allows you to pass the following parameters and options:

typescript Copy

pushLog: (args: unknown[], options?: PushLogOptions)

Parameters

Push log options

Faro uses the following log levels, which can be obtained via the following Enum:

typescript Copy

enum LogLevel {
  TRACE = 'trace',
  DEBUG = 'debug',
  INFO = 'info',
  LOG = 'log',
  WARN = 'warn',
  ERROR = 'error',
}