Eagerestwolf
Eagerestwolf
PostsComments
SSolidJS
Created by laksh on 7/9/2024 in #support
web-vitals integration
Also, the way I just described would be the recommended Solid way to do it.
29 replies
SSolidJS
Created by laksh on 7/9/2024 in #support
web-vitals integration
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.
29 replies
SSolidJS
Created by laksh on 7/9/2024 in #support
web-vitals integration
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>;
}
29 replies
SSolidJS
Created by laksh on 7/9/2024 in #support
web-vitals integration
Assuming you just want it to happen once each time the user navigates, then onMount would be the correct place.
29 replies
SSolidJS
Created by laksh on 7/9/2024 in #support
web-vitals integration
Are you wanting to do this on the server and log your performance events to a log file?
29 replies
SSolidJS
Created by laksh on 7/9/2024 in #support
web-vitals integration
Your logging and analytics need to be separate
29 replies
SSolidJS
Created by laksh on 7/9/2024 in #support
web-vitals integration
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.
29 replies