Support Core Web Vitals

[sshquack]

Today App Insights for JS / React captures a lot of application, network, device and session info. https://docs.microsoft.com/en-us/azure/azure-monitor/app/javascript

It would be great to capture the Core Web Vitals https://web.dev/vitals/ like LCP, FID, CLS.

Tools like Google chrome lighthouse are useful only for the developer since they run on the developers local machine.

To get real data from production users, today we are using Sentry which is visualized in their dashboard.

Please add support to capture these core web vital metrics using azure app insights so that we can visualize this data in the azure portal.

[krishnasaga]

Hi @sshquack

I think you can do it with performance.timing browser API and manually sending metrics to azure Application insights on page load.

[sshquack]

@krishnasaga Thanks. Yes, I'm aware that we can get this info. It would mean that every single developer now needs to write the code to collect these. Since Core web vitals is a critical metric for search ranking (both Bing webmaster tools and Google search console report this), it is crucial for developers to be able to collect them in their apps.

So please add support for this feature in appinsights JS and it should be make it easy for developers to opt-into CWV feature with a config flag.

[naiksanjay71]

@sshquack Thanks for opening this issue we are also looking for support for core web vitals instead of writing some custom code, also we were looking for options to capture page duration for each route, currently it always set to 0.

[krishnasaga]

@sshquack @naiksanjay71 are pull requests are welcomed for this feature ?

[MSNev]

Yes, we welcome community PR's.

Depending on what and how the information is captured, this could either be a specific extension for the react js extension or potentially rolled into the underlying ApplicationInsights SDK.

Feel Free to create a PR and we can evaluate based on your implementation which location would work the best for everyone.

[krishnasaga]

I think https://github.com/microsoft/ApplicationInsights-JS which is ApplicationInsights SDK is the appropriate place As this repo is specific to React and the core web vital metrics are related to web page

[VatslauX]

Microsoft Just do it, Dynatrace and New Relic collected this OOB and stored it in OOB metrics a long time ago with zero customization:

[krishnasaga]

@VatslauX IMHO application insights JavaScript SDK has the best instrumentation which makes instrumenting custom events and metrics as easy as using trackMetric

However, I agree that it is good to have a plugin or collect by default.

[mbruner-dev]

What is the status of this feature ask and also not all of us are using react, so it would be great if this was a general plugin or built into Application Insights directly.

[MSNev]

@mbruner-dev From the Application Insights team perspective, we have not planned and do not have any current timeframe for adding a specific (provided) support for this. So, at this time it would require you to lcreate this manually via either trackMetric or your own specific custom event via track.

As this issue is tagged as an enhancement, it won't get auto closed, but based on our internal back log and other work I don't expect that any work would be scheduled to provide and implementation of this (by the core team -- contributions welcome) in the near future.

While we are planning on reviewing all of the issues tagged as enhancements so that we can get them officially on the schedule, but again, I don't have any specific timeframe on when we might do that either -- I would "hope" to review them by the end of '24... But that doesn't mean that it would necessarily get scheduled in the same timeframe.