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 sendinfo
s, warn
s and error
s 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.
// 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.
// 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:
pushLog: (args: unknown[], options?: PushLogOptions)
Parameters
Push log options
Faro uses the following log levels, which can be obtained via the following Enum
:
enum LogLevel {
TRACE = 'trace',
DEBUG = 'debug',
INFO = 'info',
LOG = 'log',
WARN = 'warn',
ERROR = 'error',
}