Instrument composable frontends

You can use independent Faro instances per frontend. To initialize a Faro instance per micro-frontend that you want to instrument, set the isolate property to true. This tells the local Faro instance to not use the global instance APIs.

For example, initialize a global Faro instance to capture everything that you want to capture for the global scope. Additionally, initialize a Faro instance per sub-frontend with isolate=true to capture only the desired events for the local scope. To reduce the bundle size, only add the instrumentation you need and let the global instance capture everything else.

To filter sources that should not be captured by the global app, use the onBeforeSend() hook on the global instance.

For example, if you also want to capture errors on the sub-frontend level, on the global instance, filter out the events that are related to the specific sub-fronted only:

onBeforeSend():
  beforeSend: (item) => {
    const isException = item.type === 'exception'

    if (isException && !(event.meta.page?.url ?? '').includes('foo')) {
      return null;
    }

    return event;
}

Send data to custom endpoints

When using multiple Faro instances with custom URLs, if you want to send data to a proxy instead of the Faro endpoint directly, you must ensure that the instances do not track each other. This prevents a request loop, which can drastically slow down the web application’s performance.

By default, Faro excludes requests to Grafana collector endpoints that end with /collect or /collect/{faro-api-key}.

To ignore custom collector URLs of other Faro instances, add them to the ignoredUrls property. You can define ignored URLs as either strings or regular expressions.

For an example on how to ignore URLs in Faro, refer to Exclude endpoints from tracking.