Sandbox metrics collection

Author: CompuIves

packages/app/src/sandbox/compile.ts

@@ -27,6 +27,7 @@ import handleExternalResources from './external-resources';
 import { loadDependencies, NPMDependencies } from './npm';
 import { resetScreen } from './status-screen';
 import { showRunOnClick } from './status-screen/run-on-click';
+import * as metrics from './utils/metrics';
 
 let initializedResizeListener = false;
 let manager: Manager | null = null;
@@ -78,6 +79,7 @@ let lastHeadHTML = null;
 let lastBodyHTML = null;
 let lastHeight = 0;
 let changedModuleCount = 0;
+let usedCache = false;
 
 const DEPENDENCY_ALIASES = {
   '@vue/cli-plugin-babel': '@vue/babel-preset-app',
@@ -419,6 +421,7 @@ async function compile({
   dispatch({
     type: 'start',
   });
+  metrics.measure('compilation');
 
   const startTime = Date.now();
   try {
@@ -513,10 +516,10 @@ async function compile({
       manager.setManifest(manifest);
       // We save the state of transpiled modules, and load it here again. Gives
       // faster initial loads.
-      await consumeCache(manager);
+      usedCache = await consumeCache(manager);
     }
 
-    const t = Date.now();
+    metrics.measure('transpilation');
 
     const updatedModules = (await updateManager(modules, configurations)) || [];
 
@@ -541,7 +544,7 @@ async function compile({
     await manager.verifyTreeTranspiled();
     await manager.transpileModules(managerModuleToTranspile);
 
-    debug(`Transpilation time ${Date.now() - t}ms`);
+    metrics.endMeasure('transpilation', 'Transpilation');
 
     dispatch({ type: 'status', status: 'evaluating' });
     manager.setStage('evaluation');
@@ -604,16 +607,17 @@ async function compile({
         lastHeadHTML = head;
       }
 
-      const extDate = Date.now();
+      metrics.measure('external-resources');
       await handleExternalResources(externalResources);
-      debug('Loaded external resources in ' + (Date.now() - extDate) + 'ms');
+      metrics.endMeasure('external-resources', 'External Resources');
 
-      const tt = Date.now();
       const oldHTML = document.body.innerHTML;
+      metrics.measure('evaluation');
       const evalled = manager.evaluateModule(managerModuleToTranspile, {
         force: isModuleView,
       });
-      debug(`Evaluation time: ${Date.now() - tt}ms`);
+      metrics.endMeasure('evaluation', 'Evaluation');
+
       const domChanged =
         !manager.preset.htmlDisabled && oldHTML !== document.body.innerHTML;
 
@@ -662,6 +666,8 @@ async function compile({
 
     debug(`Total time: ${Date.now() - startTime}ms`);
 
+    metrics.endMeasure('compilation', 'Compilation');
+    metrics.endMeasure('total', 'Total', { lastTime: 0 });
     dispatch({
       type: 'success',
     });
@@ -731,6 +737,14 @@ async function compile({
         state: managerState,
       });
     }
+
+    if (firstLoad) {
+      metrics.persistMeasurements({
+        sandboxId,
+        usedCache,
+        browser: navigator.userAgent,
+      });
+    }
   }
   firstLoad = false;
 

packages/app/src/sandbox/index.js

@@ -17,6 +17,7 @@ import {
 import { show404 } from 'sandbox-hooks/not-found-screen';
 
 import compile, { getCurrentManager } from './compile';
+import { endMeasure } from './utils/metrics';
 
 // Call this before importing React (or any other packages that might import React).
 initialize(window);
@@ -29,6 +30,8 @@ export const SCRIPT_VERSION =
 
 debug('Booting sandbox v2');
 
+endMeasure('boot', 'Boot', { lastTime: 0 });
+
 requirePolyfills().then(() => {
   registerServiceWorker('/sandbox-service-worker.js', {});
 

packages/app/src/sandbox/utils/metrics.ts

@@ -0,0 +1,58 @@
+import _debug from '@codesandbox/common/lib/utils/debug';
+
+const debug = _debug('cs:compiler:measurements');
+
+type MeasurementKey = string;
+
+const runningMeasurements = new Map<string, number>();
+const measurements: { [meaurement: string]: number } = {};
+
+export function measure(key: MeasurementKey) {
+  runningMeasurements.set(key, performance.now());
+}
+
+export function endMeasure(
+  key: MeasurementKey,
+  name?: string,
+  options: {
+    lastTime?: number;
+  } = {}
+) {
+  const lastMeasurement =
+    typeof options.lastTime === 'undefined'
+      ? runningMeasurements.get(key)
+      : options.lastTime;
+  if (typeof lastMeasurement === 'undefined') {
+    console.warn(
+      `Measurement for '${key}' was requested, but never was started`
+    );
+    return;
+  }
+
+  measurements[key] = performance.now() - lastMeasurement;
+  debug(`${name || key} Time: ${measurements[key].toFixed(2)}ms`);
+  runningMeasurements.delete(key);
+}
+
+const MEASUREMENT_API = `https://mij9yockq9.execute-api.us-east-1.amazonaws.com/prod/metrics`;
+
+export function persistMeasurements(data: {
+  sandboxId: string;
+  usedCache: boolean;
+  browser: string;
+}) {
+  // if (process.env.NODE_ENV === 'development') {
+  //   return Promise.resolve();
+  // }
+
+  const finalData = { ...data, ...measurements };
+
+  return fetch(MEASUREMENT_API, {
+    method: 'POST',
+    body: JSON.stringify(finalData),
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+  });
+}