web-vitals integration
Has anyone ever integrated https://www.npmjs.com/package/web-vitals with solidjs? Can anyone help me with the example of how to integrate this ?
npm
web-vitals
Easily measure performance metrics in JavaScript. Latest version: 4.2.1, last published: 9 days ago. Start using web-vitals in your project by running
npm i web-vitals
. There are 18275 other projects in the npm registry using web-vitals.16 Replies
I guess you just need to do what you normally do with plain js
To integreate this library in solidjs
I have a function called initWebVitals() which looks like this. Now my question is where should this function be called inside src/index.jsx . Should this be called in onMount of index.jsx or outside of onMount in index.jsx?
performance.js
import { onCLS, onLCP, onTTFB, onFCP, onINP } from 'web-vitals';
import Logger, { LOG_LEVELS } from './logger';
function sendToAnalytics(metric) {
const immediate = metric.name === 'LCP' || metric.name === 'CLS';
Logger.info({ ...metric, pathname: window.location.pathname }, true, immediate);
}
export function initWebVitals() {
onCLS(sendToAnalytics);
onLCP(sendToAnalytics);
onTTFB(sendToAnalytics);
onFCP(sendToAnalytics);
onINP(sendToAnalytics);
}
@Ryan
@TaQuanMinhLong
@davedbase @Reve Please comment here
@fabiospampinato
I think it should be at the client side entry point
outside onMount or inside onMount?
Idk, but I guess the on- function provided could already be a global event listener thing, so placing inside the component or outside should work similarly, or you could try and see the result?
btw why am I here lol
haha @Reve Can you pleae tell the apprach which should be implemented
@TaQuanMinhLong I can see some difference in result...but not sure which is the correct way to implement.
I guess you just put that in onMount?
@Reve are you asking or telling? 😄
guessing lol
I use astro so what I do is just put all that stuff in the script tag
You have a problem here. First is that you are trying to log (which is a server side thing) and send analytics (which is client side) in the same function. It won't work in an onMount because of the logger, since onMount only runs on the client.
Your logging and analytics need to be separate
Are you wanting to do this on the server and log your performance events to a log file?
@Eagerestwolf No I am not trying to log I am just sending it to api from client side. My application is client side
Basically Logger is a class which has a logic of queuing up the objects and sending it to an api. Forget about the Logger class.
I want to know which is the right place for invoking initWebVitals fn. Should it be inside onMount of src/index.jsx or outside of onMount in src/index.jsx...only this is my ask.
@Alex Lohr Please add your POV here
src/index.jsx
function MyApp(){
onMount(()=>{ // 1. initWebVitals(); }); // 2. initWebVitals(); return ( <p>MyApp</> ); } Basically which is the right place to call initWebVitals 1 or 2? @Eagerestwolf
onMount(()=>{ // 1. initWebVitals(); }); // 2. initWebVitals(); return ( <p>MyApp</> ); } Basically which is the right place to call initWebVitals 1 or 2? @Eagerestwolf
Assuming you just want it to happen once each time the user navigates, then
onMount
would be the correct place.
This is basically what I would do
I am coming from a POV where
src/index.jsx is the root file which wont be triggered again even if the user navigates to other components/routes. So is it good to keep it outside onMount() (the 2nd approach.)
Also ,the react docs has an inbuilt fn called reportWebVitals which is recommended to be invoked outside onMount in the react docs.
Because of the above POV, I wanted to know what difference it makes in 1st vs 2nd approach?
I was actually mistaken. In the onMount for the main component (that doesn't change between routes) it won't remount between navigation, so this approach would be the most similar to React.
Also, the way I just described would be the recommended Solid way to do it.