SolidJS•6mo ago

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

TaQuanMinhLong•6mo ago

I guess you just need to do what you normally do with plain js

lakshOP•6mo ago

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

TaQuanMinhLong•6mo ago

I think it should be at the client side entry point

lakshOP•6mo ago

outside onMount or inside onMount?

TaQuanMinhLong•6mo ago

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?

Reve•6mo ago

btw why am I here lol

lakshOP•6mo ago

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.

Reve•6mo ago

I guess you just put that in onMount?

lakshOP•6mo ago

@Reve are you asking or telling? 😄

Reve•6mo ago

guessing lol I use astro so what I do is just put all that stuff in the script tag

Eagerestwolf•6mo ago

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?

lakshOP•6mo ago

@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

Eagerestwolf•6mo ago

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

// If you're using solid-router
import { useLocation } from '@solid-js/router';
import { onMount } from 'solid-js';
import { onCLS, onLCP, onTTFB, onFCP, onINP } from 'web-vitals';

import Logger, { LOG_LEVELS } from './logger';

export default function App() {
  // If you're using solid-router
  const location = useLocation();

  onMount(() => {
    const sendToAnalytics(metric) {
      const immediate = metric.name === 'LCP' || metric.name === 'CLS';

      // If you arent using solid-router
      Logger.info({ ...metric, pathname: window.location.pathname }, true, immediate);

      // If you are using solid-router
      Logger.info({ ...metric, pathname: location.pathname }, true, immediate);
    }

    onCLS(sendToAnalytics);
    onLCP(sendToAnalytics);
    onTTFB(sendToAnalytics);
    onFCP(sendToAnalytics);
    onINP(sendToAnalytics);
  });

  return <p>My App</p>;
}

// If you're using solid-router
import { useLocation } from '@solid-js/router';
import { onMount } from 'solid-js';
import { onCLS, onLCP, onTTFB, onFCP, onINP } from 'web-vitals';

import Logger, { LOG_LEVELS } from './logger';

export default function App() {
  // If you're using solid-router
  const location = useLocation();

  onMount(() => {
    const sendToAnalytics(metric) {
      const immediate = metric.name === 'LCP' || metric.name === 'CLS';

      // If you arent using solid-router
      Logger.info({ ...metric, pathname: window.location.pathname }, true, immediate);

      // If you are using solid-router
      Logger.info({ ...metric, pathname: location.pathname }, true, immediate);
    }

    onCLS(sendToAnalytics);
    onLCP(sendToAnalytics);
    onTTFB(sendToAnalytics);
    onFCP(sendToAnalytics);
    onINP(sendToAnalytics);
  });

  return <p>My App</p>;
}

lakshOP•6mo ago

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?

Eagerestwolf•6mo ago

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.

Alex Lohr•6mo ago

I would actually use createDeferred(untrack(initWebVitals)), because that slows the page down the leat possible amount.

Gaming

Programming

web-vitals integration