Documentation Grafana Cloud Monitor applications Frontend Observability Architecture Transports

Provided transports

Transports are data processors that submit the data collected by Faro Web SDK.

For example, a transport can use the fetch API to send the data to a remote server or it can use the console API to display the data in the browser console.

By default, the core package of the Grafana Faro Web SDK does include any transports, but they’re provided in specific packages for the platform you are using.

Fetch

The fetch transport uses the fetch API to send the data to a remote endpoint.

The Grafana Faro Web SDK uses the fetch transport, by default. You can elect not to use it when developing or during testing sessions.

How to use the fetch transport

You can use the fetch transport in two ways.

The first approach is to provide the URL of the endpoint and the API key that you get from Grafana Cloud.

ts Copy

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

Alternatively, if you want to enable another transport at the same time or you want to configure the fetch transport, you must overwrite the transports array when you initialize the Grafana Faro Web SDK.

ts Copy

initializeFaro({
  app: {
    name: 'my-app',
  },
  transports: [
    new FetchTransport({
      url: 'http://my-endpoint:1234/collect/{app-key}',

      // Optional, if your receiver requires an API key
      apiKey: 'my-api-key',

      // Optional, if you want to customize how many requests to buffer
      bufferSize: 10,

      // Optional, if you want to customize how many requests to run in parallel
      concurrency: 5,

      // Optional, if you want to customize how long to wait before trying to resend the data
      defaultRateLimitBackoffMs: 1000,

      // Optional, if you want to customize the fetch options
      requestOptions: {
        headers: {
          'My-Header': 'My Header Value',
        },
      },
    }),
  ],
});

Console

The console transport uses the browser’s console.log API to display the data in the browser console.

This transport is useful in the following situations:

• When you are developing and want to debug what the Grafana Faro Web SDK sends to the remote server
• When you are testing and don’t have a remote server to send the data to

How to use the console transport

In order to enable the console transport, you must overwrite the transports array when you initialize the Grafana Faro Web SDK.

ts Copy

initializeFaro({
  app: {
    name: 'my-app',
  },
  transports: [
    new ConsoleTransport({
      // Optional, if you want to print the messages using console.debug instead of console.log
      level: LogLevel.DEBUG,
    }),
  ],
});