How to restart web vitals on the fly?

[alioshr]

Hi @codecapitano!

I did not know if this could be a bug, or feature. So I guess that here is the best place to post this enquiry.

I am currently trying an approach of using one instance of faro to collect metrics from different Micro Frontend apps.

We have a base app which loads Micro Frontend.

I am instantiating faro in this base app and sharing @grafana/faro-react as a webpack external so I can use FaroRoute on Micro Frontend without needing to have multiple instances of faro in each Micro Frontend. Therefore the Micro Frontends consume the instance of @grafana/faro-react initialized in the base app.

When I load Micro Frontend Apps I override two configs using the global instance of faro (window.faro), which is provided by the base app:

  faro.config.app.release = release;
  faro.config.app.version = version;

• release (variable used to filter the dashboards in grafana per microfrontend)
• version (getting the version of thee app)

Everything works smoothly. But the thing is that Time to first byte and First contentful paint metrics are just retrieved at the base app, which is the place that I have actually instantiated faro.

I have tried using faro.resetSession() when loading the Micro Frontends, to try to force these metrics, but no success so far. I could also not find a clear explanation of how to manage to do this.

Is there a way that I can tweak / override the faro global instance, or change something on the initialization, so I am able to have these metrics when instantiating a Micro Frontend, by somehow reseting web vitals when routing into a Micro Frontend?

[codecapitano]

Hi @alioshr

In that case you need to define a Faro instance per sub-app you want to track.
This applies either for the case where sub-apps need distinct settings (for example sending data to a different URL) or if they should independently track data like it is in your case.

In your case Faro is globally initialized so it captures data for the complete app not in the scope of each sub-app. Even if you reset settings.

To initialize multiple independent Faro instances you need to set the isolate property to true.

Example:

1. You initialize a global Faro instance to capture everything which you want to capture for the global scope.
2. Additionally you initialize a Faro instance per sub-app (with isolate=true) to capture events for local scope. To reduce the bundle size you may want to only add the instrumentations you need. And let the global instance capture everything else.

Further you may want to use the onBeforeSend() hook on the global instance to filter things which shall not be captured by the global app. Say you also want to capture errors on the sub-app level. Then you may filter out events which are related to the specific sub-app.

Example:

beforeSend: (item) =>  {
  const isException = item.type === 'exception'
  if (isException && !(event.meta.page?.url ?? '').includes('foo')) {
    return null;
  }
  return event;
}

Hope it helps.

Cheers,
Marco

[alioshr]

@codecapitano thanks for the insight here! It worked well.

[codecapitano]

Anytime @alioshr and thank you for all the questions and findings 🙏