---
title: "Send custom logs | Grafana Cloud documentation"
description: "Use Faro Web SDK to send custom logs"
---

> For a curated documentation index, see [llms.txt](/llms.txt). For the complete documentation index, see [llms-full.txt](/llms-full.txt).

# 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 send`info`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](/docs/loki/latest/get-started/labels/).

## Before you begin

- Ensure you have registered your app in the Frontend Observability plugin
- Set up the Faro Web SDK from the [quickstart](/docs/grafana-cloud/monitor-applications/frontend-observability/quickstart/) or [instrumentation](/docs/grafana-cloud/monitor-applications/frontend-observability/instrument/) 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 code to clipboard](/media/images/icons/icon-copy-small-2.svg) Copy

```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`](https://github.com/grafana/faro-web-sdk/tree/main/packages/core#logs) method with which you can send any number of logs with a set of options.

typescript ![Copy code to clipboard](/media/images/icons/icon-copy-small-2.svg) Copy

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

## API

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

typescript ![Copy code to clipboard](/media/images/icons/icon-copy-small-2.svg) Copy

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

### Parameters

Expand table

| Name      | Description                                                                                 |
|-----------|---------------------------------------------------------------------------------------------|
| `args`    | Log data                                                                                    |
| `options` | Configure the behavior of the push API or inject additional data to change the signal data. |

### Push log options

Expand table

| Name                   | Description                                                                                                                                                                                                                        |
|------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `context`              | Includes additional attributes as key/value pairs                                                                                                                                                                                  |
| `level`                | Indicates the log level                                                                                                                                                                                                            |
| `skipDedupe`           | Pushes the signal even if it is identical to the previous one                                                                                                                                                                      |
| `spanContext`          | Provides a custom `spanContext` to the signal                                                                                                                                                                                      |
| `timestampOverwriteMs` | The timestamp represents the exact moment when the respective API was called. In most cases, this precision is sufficient. The `timestampOverwriteMs` option allows you to pass an adjustment timestamp which can be used instead. |

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

typescript ![Copy code to clipboard](/media/images/icons/icon-copy-small-2.svg) Copy

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