Grafana Faro JS Loadtime

[ramuajayk]

Hello,
Does Faro collect JS loadtimes automatically or do we need additional setup of code etc.,

Looking forward.

Thanks,
Ajay

[codecapitano]

Hey @ramuajayk

Faro's performance instrumentation can track resource timings like JS, CSS, Fonts etc.
By default Faro only tracks resource timings for xhr and fetch requests.

This is to reduce the number of requests / size of the payload send by Faro.

You can enable full resource tracking it in the Faro config:

initializeFaro({
  // ...
  trackResources: true, // or false to turn off resource tracking
});

See also:

• Enable or disable tracking of all resource events
• Track navigation and resource performance

[ramuajayk]

Thank you @codecapitano , I appreciate it

[codecapitano]

Thank you @ramuajayk does it satisfy your needs / solve your goal?

[ramuajayk]

It does @codecapitano , I do have a follow up question,

1. I just need JS load times from the trackResources, Is there anyway I can just spin up JS load times only?
2. So once we enable trackResources , we can visually see the metrics in Grafana dashboard(Is already set and we monitor RUM through it ) or we need to do anything else in the RUM dashboard of Grafana?

[codecapitano]

I just need JS load times from the trackResources, Is there anyway I can just spin up JS load times only?

For now it's an on or off switch.
As a workaround you can use the beforeSend() hook to drop the resources you aren't interested in.

Very basic example:

initializeFaro() {
 beforeSend: (item) => {
      const isResourceEvent = item.type === 'event' && item.payload.name === 'faro.performance.resource';

      if (isResourceEvent) {
        return item.payload.attributes.initiatorType === 'script' ? item : null;
      }

      return item;
    },
}

So once we enable trackResources , we can visually see the metrics in Grafana dashboard(Is already set and we monitor RUM through it ) or we need to do anything else in the RUM dashboard of Grafana?

Atm Grafana cloud has no dedicated dashboard for resource breakdowns.
It's a thing we will add but atm there's no timeline.

Currently the only option is to manually create a panel.

[ramuajayk]

For now it's an on or off switch. As a workaround you can use the beforeSend() hook to drop the resources you aren't interested in.

Got it and thank you @codecapitano

So once we enable trackResources , we can visually see the metrics in Grafana dashboard(Is already set and we monitor RUM through it ) or we need to do anything else in the RUM dashboard of Grafana?

Atm Grafana cloud has no dedicated dashboard for resource breakdowns. It's a thing we will add but atm there's no timeline.

Currently the only option is to manually create a panel.

A quick clarification on the second part, If I understood right,
we already have a panel which has LCP, FCP, CLS, FID etc., these are by default I guess from Grafana and JS Page loads will not be part of the same and need to create a separate panel, right?

[codecapitano]

A quick clarification on the second part, If I understood right,
we already have a panel which has LCP, FCP, CLS, FID etc., these are by default I guess from Grafana

Yes, web-vitals are tracked by default via Faro's web-vitals instrumentation.

In Grafana cloud you can find them on the overview dashboard and the session details view.

and JS Page loads will not be part of the same and need to create a separate panel, right?

We'll provide a dedicated area for performance insights which will contain resource breakdown as well.
We also will provide more performance related metrics on the overview page.

A place (which is not very obvious tbh) where you can see some performance milestones already is by expanding the "Page Load" row in the user-journey table for a specific session.

Hint:
You can also connect navigation and resource timings to a trace when you configure your backend/middleware to propagate a trace context back to Faro (docs).
This will also provide more information for HTTP requests, like a load time metrics breakdown etc.

Here's a video showing a demo app which propagates trace context back to Faro.
It also has activated web-vital attribution data which gives you some extra conceptual information for each web-vital.

Screen.Recording.2024-10-29.at.09.09.30.mov

[ramuajayk]

@codecapitano thank you again and I do really appreciate it.

[codecapitano]

Oh thank you so much @ramuajayk
Thanks a lot for the discussion 🙏
It's super helpful especially to find and fix the sub otpimal parts in Faro and to drive enhancements and features.

cheers

[codecapitano]

@ramuajayk since you are interested in performance observability we are super happy to hear your ideas, about your experiences with the product, what you need, miss and like.

It helps a lot to get direct feedback from users especially in the perf. area because it is still in development in Grafana cloud.

Cheers,

cc @cedricziel