DocumentationGrafana CloudMonitor applicationsFrontend ObservabilityInstrumentComposable frontends

Instrument composable frontends

You can use independent Faro instances per frontend. Simply initialize a Faro instance per micro-frontend you want to instrument by setting 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 which 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 which 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 which are related to the specific sub-fronted only:

ts Copy

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

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

    return event;
}