2.2.10 remove metrics

metrics: disable top 2, sample other top metrics

Author: HugoDF

packages/shell-chrome-v3/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Alpine.js devtools - Early Access",
   "description": "DevTools extension for debugging Alpine.js applications.",
-  "version": "2.2.8",
+  "version": "2.2.10",
   "manifest_version": 3,
   "icons": {
     "16": "icons/16.png",

packages/shell-chrome-v3/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "shell-chrome-v3",
   "private": true,
-  "version": "2.2.8",
+  "version": "2.2.10",
   "description": "Alpine.js devtools with Chrome manifest v3 compatibility",
   "type": "module",
   "scripts": {

packages/shell-chrome-v3/package.json

@@ -1,7 +1,7 @@
 import { createSignal } from 'solid-js';
 import { componentsValue, errors, state, storesValue } from '../state';
 import { effect } from 'solid-js/web';
-import { bucketCount, metric } from '../metrics';
+import { bucketCount, metric, sampledMetric } from '../metrics';
 import { isEarlyAccess } from '../../lib/isEarlyAccess';
 
 interface FooterProps {
@@ -13,7 +13,7 @@ export function Footer({ setActiveTab }: FooterProps) {
 
   effect(() => {
     if (state.pageLoadCompleted) {
-      metric('watching_els', {
+      sampledMetric('watching_els', {
         components: bucketCount(componentsValue().length),
         stores: bucketCount(storesValue().length),
         errors: bucketCount(errors().length),

packages/shell-chrome-v3/src/devtools/components/footer.tsx

@@ -1,5 +1,5 @@
 import { BACKEND_TO_PANEL_MESSAGES } from '../lib/constants';
-import { metric, runWithMeasure } from './metrics';
+import { metric, toolDetector } from './metrics';
 import {
   setAlpineVersionFromBackend,
   setComponentsList,
@@ -37,40 +37,24 @@ export function handleBackendToPanelMessage(
   switch (message.type) {
     case BACKEND_TO_PANEL_MESSAGES.SET_VERSION: {
       setAlpineVersionFromBackend(message.version);
-      if (message.hasHtmxTarget || message.hasAlpineAjaxTarget) {
-        let tools = [];
-        if (message.hasHtmxTarget) {
-          tools.push('htmx');
-        }
-        if (message.hasAlpineAjaxTarget) {
-          tools.push('alpine-ajax');
-        }
-        metric('detected_tools', {
-          tools: tools.join(','),
-        });
-      }
+      metric('detected_tools', {
+        tools: toolDetector(message),
+        version: message.version,
+      });
       setPort(port);
       break;
     }
     case BACKEND_TO_PANEL_MESSAGES.SET_COMPONENTS_AND_STORES: {
-      runWithMeasure('panel_set_components_and_stores', () => {
-        setComponentsList(message.components, message.url);
-        setStoresFromList(message.stores);
-        setPageLoaded();
-        setPort(port);
-      });
+      setComponentsList(message.components, message.url);
+      setStoresFromList(message.stores);
+      setPageLoaded();
+      setPort(port);
       break;
     }
     case BACKEND_TO_PANEL_MESSAGES.SET_DATA: {
-      runWithMeasure(
-        'panel_set_data',
-        () => {
-          const comps = JSON.parse(message.data);
-          setComponentData(message.componentId, comps);
-          setPort(port);
-        },
-        { sampled: true, minValueMs: 5 },
-      );
+      const comps = JSON.parse(message.data);
+      setComponentData(message.componentId, comps);
+      setPort(port);
       break;
     }
     case BACKEND_TO_PANEL_MESSAGES.SET_STORE_DATA: {

packages/shell-chrome-v3/src/devtools/messaging.ts

@@ -47,18 +47,14 @@ export function bucketTime(ms: number) {
   return `>5000ms`;
 }
 
-const sampler = new Sampler(0.1);
+const tenPercentSampler = new Sampler(0.1);
 
-export function runWithMeasure(
-  label: string,
-  fn: Function,
-  options: { sampled: boolean; minValueMs: number } = { sampled: false, minValueMs: 0 },
+export function sampledMetric(
+  name: string,
+  metadata: Record<string, string | number | boolean> = {},
 ) {
-  const start = performance.now();
-  fn();
-  const time = performance.now() - start;
-  if ((!options.sampled || sampler.shouldSample()) && time >= options.minValueMs) {
-    metric(`${label}_exec_time`, { time: bucketTime(time) });
+  if (tenPercentSampler.shouldSample()) {
+    metric(name, metadata);
   }
 }
 
@@ -93,3 +89,27 @@ export function metric(
     });
   }
 }
+
+export function toolDetector(message: any): string {
+  if (!message) {
+    return 'error';
+  }
+  const tools = [];
+  if (message.hasHtmxTarget) {
+    tools.push('htmx');
+  }
+  if (message.hasAlpineAjaxTarget) {
+    tools.push('alpine-ajax');
+  }
+  if (message.hasLivewire) {
+    tools.push('livewire');
+  }
+  if (message.hasLiveView) {
+    tools.push('liveview');
+  }
+  if (message.hasTurbo) {
+    tools.push('turbo');
+  }
+
+  return tools.length === 0 ? 'none' : tools.join(',');
+}

packages/shell-chrome-v3/src/devtools/metrics.ts

@@ -4,14 +4,13 @@ import { inspectorPortName } from './ports';
 import { handleBackendToPanelMessage, unsetPort } from './messaging';
 import { state } from './state';
 import { DEVTOOLS_INITIAL_STATE_GLOBAL } from '../lib/constants';
-import { metric } from './metrics';
+import { sampledMetric } from './metrics';
 
 let dispose: () => void;
 /* Entrypoint for Extension panel, integrates with Devtools/extension APIs, initialises the solidJS app, see also index.html */
 function connect() {
   if (dispose) {
-    metric('panel_reinjection');
-    console.log('unmounting solid app');
+    console.log('[alpine-devtools] unmounting solid app');
     dispose();
   }
   dispose = renderApp(document.getElementById('root')!);
@@ -71,7 +70,6 @@ let injectionAttempts = 0;
  * user app.
  */
 function injectScript(scriptSrc: string, globals: any, cb: Function) {
-  metric('inject_script_start', { scriptSrc });
   const src = `
     (function() {
       var script = document.constructor.prototype.createElement.call(document, 'script');
@@ -90,7 +88,7 @@ function injectScript(scriptSrc: string, globals: any, cb: Function) {
           injectScript(scriptSrc, globals, cb);
         }, 300);
       } else {
-        metric('inject_script_retry_stop');
+        sampledMetric('inject_script_retry_stop');
         console.error('[alpine-devtools] error injecting script, stopping retries', err);
       }
     }

packages/shell-chrome-v3/src/devtools/panel.tsx

@@ -399,6 +399,9 @@ export function init(forceStart = false) {
             .join(','),
         ),
         hasAlpineAjaxTarget: !!document.querySelector('[x-target]'),
+        hasLivewire: !!window.Livewire,
+        hasLiveView: !!window.liveSocket,
+        hasTurbo: !!window.Turbo,
         type: BACKEND_TO_PANEL_MESSAGES.SET_VERSION,
       });
     }