[Feature] skywalking-client-js supports Core Web Vitals metrics

[tanshanshan]

Search before asking

• I had searched in the issues and found no similar feature requirement.

Description

skywalking-client-js is a library that provide metrics and error collection , and sends them to the SkyWalking backend. Currently, it supports collecting First Meaningful Paint (FMP) metric.
The goal is to also support collecting and displaying Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID) metrics, which are core web vitals proposed by Google. These is
These metrics are equally applicable in both Chrome and non-Chrome browsers.

Use case

By referencing the repository https://github.com/GoogleChrome/web-vitals, you can calculate metrics using import {onLCP, onFID, onCLS} from 'web-vitals'statement and send them to the SkyWalking backend. The SkyWalking backend will aggregate and display the metrics.

Related issues

No response

Are you willing to submit a pull request to implement this on your own?

• Yes I am willing to submit a pull request on my own!

Code of Conduct

• I agree to follow this project's Code of Conduct

[wu-sheng]

It is not clear what you are proposing. Are you asking for expanding client-js capability or support GoogleChrome/web-vitals from the backend?

You should know, in SkyWalking, new feature extension relies on who will own this and agree to implement it. The PMC/committer team usually would not accept feature requests, unless they need this by themselves and willing to own the feature.

[wu-sheng]

Notice, https://www.npmjs.com/package/skywalking-client-js?activeTab=dependencies the current dependencies are only js-base64 to keep the lib as light as possible.

[tanshanshan]

At skywalking-client-js
GoogleChrome/web-vitals is imported to calculate LCP, CLS, and FID metrics.

[tanshanshan]

Okay, I understand. This goes against the principle of lightweighting.
Thank you.

[wu-sheng]

I would suggest you to do this.

1. Expose metrics APIs in the client-js. I believe this would not import new things.
2. Write a document to guide users to integrate web-vitals with client-js.
3. Setup the backend MAL and UI dashboard ready to the metrics from web-vitals.

I think these would keep the project lightweight, and your use case is able to work.

[tanshanshan]

Thanks for your suggestion, I will continue to try.

[tanshanshan]

I would suggest you to do this.

1. Expose metrics APIs in the client-js. I believe this would not import new things.
2. Write a document to guide users to integrate web-vitals with client-js.
3. Setup the backend MAL and UI dashboard ready to the metrics from web-vitals.

I think these would keep the project lightweight, and your use case is able to work.

I apologize for confusion. Could you provide a more specific description of how to implement "Expose metrics APIs in the client-js":
Thanks

[wu-sheng]

Expose metrics APIs in the client-js means, client-js lib provides general available APIs for reading metrics from 3rd party libs and report it. Refer to Java metric APIs, https://skywalking.apache.org/docs/skywalking-java/latest/en/setup/service-agent/java-agent/application-toolkit-meter/

The users of the lib could call those exposed APIs.