Documentation Grafana Cloud Monitor applications Frontend Observability Instrument Console instrumentation

Capture console logs

Logs are critical for troubleshooting errors because they provide context and detail into what’s happening in your application.

The console instrumentation replaces the browser’s console with a custom implementation that collects all logs, so whenever console.error (for example) is called, the message is sent as a log to the collector.

Console instrumentation helps you to:

• Determine the context and the root cause of errors
• Capture messages emitted by the application or the libraries it uses
• Monitor your application and determine that it is working as expected

Because the console instrumentation can offer helpful context when you troubleshoot errors, it is recommended that you keep this instrumentation enabled. However, enabling log collection for all log levels captures a lot of data that is sent to Grafana Cloud which can increase cost and result in verbose data.

By default, the following log levels are disabled. Only enable them if required:

• console.debug
• console.trace
• console.log

How to use the console instrumentation

The following console instrumentation is enabled by default. No additional configuration is required.

ts Copy

initializeFaro({
  url: 'https://my-domain.my-tld/collect/{app-key}',
  app: {
    name: 'my-app',
  },
});

To manually include the console instrumentation, use the following getWebInstrumentations helper function.

ts Copy

initializeFaro({
  url: 'https://my-domain.my-tld/collect/{app-key}',
  app: {
    name: 'my-app',
  },
  instrumentations: [
    ...getWebInstrumentations({
      // Optional, if you want to disable the console instrumentation
      captureConsole: false,

      // Optional, if you want to collect all levels
      captureConsoleDisabledLevels: [],

      // Optional, if you want to disable only some levels
      captureConsoleDisabledLevels: [LogLevel.DEBUG, LogLevel.TRACE],
    }),
  ],
});

Alternatively, if you want to fine-tune which instruments are enabled, you can use the ConsoleInstrumentation class.

ts Copy

initializeFaro({
  url: 'https://my-domain.my-tld/collect/{app-key}',
  app: {
    name: 'my-app',
  },
  instrumentations: [
    new ConsoleInstrumentation({
      // Optional, if you want to collect all levels
      disabledLevels: [],

      // Optional, if you want to disable only some levels
      disabledLevels: [LogLevel.DEBUG, LogLevel.TRACE],
    }),
  ],
});