vite: Emit initial start time telemetry for sku start (#1214)

Author: askoufis

.changeset/some-pugs-guess.md

@@ -0,0 +1,5 @@
+---
+'sku': minor
+---
+
+`vite`: Emit start time metric for `sku start`

packages/sku/src/program/commands/start/vite-start-handler.ts

@@ -1,6 +1,9 @@
 import { viteService } from '@/services/vite/index.js';
 import type { SkuContext } from '@/context/createSkuContext.js';
+import { metricsMeasurers } from '@/services/telemetry/metricsMeasurers.js';
 
 export const viteStartHandler = async (skuContext: SkuContext) => {
   await viteService.start(skuContext);
+
+  metricsMeasurers.skuStart.mark();
 };

packages/sku/src/services/telemetry/metricsMeasurers.ts

@@ -0,0 +1,42 @@
+import debug from 'debug';
+
+const log = debug('sku:metrics');
+
+const skuStartMarkName = 'skuStartComplete';
+const skuStart = {
+  mark: () => {
+    performance.mark(skuStartMarkName);
+  },
+  measure: () => {
+    const result = performance.measure('skuStart', {}, skuStartMarkName);
+
+    log(`Sku dev server start took ${Math.round(result.duration)}ms`);
+
+    return result;
+  },
+};
+
+const initialPageLoadMarkName = 'initialPageLoadStart';
+const initialPageLoad = {
+  mark: () => {
+    performance.mark(initialPageLoadMarkName);
+  },
+  isInitialPageLoad: true,
+  measure() {
+    this.isInitialPageLoad = false;
+
+    const result = performance.measure(
+      'initialPageLoad',
+      initialPageLoadMarkName,
+    );
+
+    log(`Initial page load took ${Math.round(result.duration)}ms`);
+
+    return result;
+  },
+};
+
+export const metricsMeasurers = {
+  skuStart,
+  initialPageLoad,
+};

packages/sku/src/services/vite/helpers/server/createViteServer.ts

@@ -4,6 +4,7 @@ import type { SkuContext } from '@/context/createSkuContext.js';
 
 import { createViteConfig } from '../createConfig.js';
 import skuViteHMRTelemetryPlugin from '@/services/vite/plugins/skuViteHMRTelemetry.js';
+import { skuViteStartTelemetryPlugin } from '../../plugins/skuViteStartTelemetry.js';
 
 export const createViteServer = async (skuContext: SkuContext) => {
   const base = process.env.BASE || '/';
@@ -13,6 +14,10 @@ export const createViteServer = async (skuContext: SkuContext) => {
       skuContext,
       plugins: [
         skuViteMiddlewarePlugin(skuContext),
+        skuViteStartTelemetryPlugin({
+          target: 'node',
+          type: 'static',
+        }),
         skuViteHMRTelemetryPlugin({
           target: 'node',
           type: 'static',

packages/sku/src/services/vite/index.ts

@@ -41,8 +41,8 @@ export const viteService = {
     const server = await createViteServerSsr({
       skuContext,
     });
+    server.listen(skuContext.port.server);
 
-    await server.listen(skuContext.port.server);
     if (skuContext.sites.length > 1) {
       skuContext.sites.forEach((site) => {
         console.log(

packages/sku/src/services/vite/plugins/skuViteMiddlewarePlugin.ts

@@ -2,6 +2,7 @@ import type { SkuContext } from '@/context/createSkuContext.js';
 import type { Plugin } from 'vite';
 import { createRequire } from 'node:module';
 import type { ViteRenderFunction } from '@/types/types.js';
+import { metricsMeasurers } from '@/services/telemetry/metricsMeasurers.js';
 
 const require = createRequire(import.meta.url);
 
@@ -10,6 +11,10 @@ export const skuViteMiddlewarePlugin = (skuContext: SkuContext): Plugin => ({
   configureServer(server) {
     return () => {
       server.middlewares.use(async (req, res, next) => {
+        if (metricsMeasurers.initialPageLoad.isInitialPageLoad) {
+          metricsMeasurers.initialPageLoad.mark();
+        }
+
         const host = req.headers.host;
         const hostname = host?.split(':')[0];
         const site =

packages/sku/src/services/vite/plugins/skuViteStartTelemetry.ts

@@ -0,0 +1,55 @@
+import type { Plugin } from 'vite';
+import js from 'dedent';
+import provider from '@/services/telemetry/index.js';
+import { metricsMeasurers } from '@/services/telemetry/metricsMeasurers.js';
+
+const initialPageLoadEventName = 'sku:initialPageLoad' as const;
+
+export const skuViteStartTelemetryPlugin = ({
+  target,
+  type,
+}: {
+  target: string;
+  type: string;
+}): Plugin => ({
+  name: 'vite-plugin-sku-server-middleware',
+  transformIndexHtml: {
+    order: 'pre',
+    handler: () => [
+      {
+        tag: 'script',
+        attrs: {
+          type: 'module',
+        },
+        children: skuPageLoadTelemetryClient,
+        injectTo: 'head',
+      },
+    ],
+  },
+  configureServer(server) {
+    server.ws.on(initialPageLoadEventName, () => {
+      if (metricsMeasurers.initialPageLoad.isInitialPageLoad) {
+        const { duration: skuStartDuration } =
+          metricsMeasurers.skuStart.measure();
+
+        const { duration: initialLoadDuration } =
+          metricsMeasurers.initialPageLoad.measure();
+
+        const initialStartTime = skuStartDuration + initialLoadDuration;
+
+        provider.timing('start.webpack.initial', initialStartTime, {
+          target,
+          type,
+        });
+      }
+    });
+  },
+});
+
+const skuPageLoadTelemetryClient = js/* js */ `
+  addEventListener("load", () => {
+    if (import.meta.hot) {
+      import.meta.hot.send('${initialPageLoadEventName}');
+    }
+  })
+`;