Add support for sku-telemetry

.changeset/lovely-buttons-shout.md

@@ -0,0 +1,16 @@
+---
+'sku': patch
+---
+
+Add support for `@seek/sku-telemetry`.
+
+To help improve sku, you should add this as a dev dependency:
+
+```bash
+$ yarn add --dev @seek/sku-telemetry
+```
+or
+
+```bash
+$ npm install --save-dev @seek/sku-telemetry
+```

config/webpack/plugins/metrics-plugin/index.js

@@ -0,0 +1,38 @@
+const { performance } = require('perf_hooks');
+
+const track = require('../../../../telemetry');
+
+class MetricsPlugin {
+  constructor({ type, target }) {
+    this.initial = true;
+    this.target = target;
+    this.type = type;
+  }
+
+  apply(compiler) {
+    compiler.hooks.watchRun.tap('sku-metrics-plugin', () => {
+      this.startTime = performance.now();
+    });
+
+    compiler.hooks.done.tap('sku-metrics-plugin', () => {
+      if (this.initial) {
+        track.timing('start.webpack.initial', performance.now(), {
+          target: this.target,
+          type: this.type,
+        });
+        this.initial = false;
+      } else {
+        track.timing(
+          'start.webpack.rebuild',
+          performance.now() - this.startTime,
+          {
+            target: this.target,
+            type: this.type,
+          },
+        );
+      }
+    });
+  }
+}
+
+module.exports = MetricsPlugin;

config/webpack/webpack.config.js

@@ -9,6 +9,7 @@ const args = require('../args');
 const config = require('../../context');
 const { bundleAnalyzerPlugin } = require('./plugins/bundleAnalyzer');
 const SkuWebpackPlugin = require('./plugins/sku-webpack-plugin');
+const MetricsPlugin = require('./plugins/metrics-plugin');
 
 const utils = require('./utils');
 const debug = require('debug')('sku:webpack:config');
@@ -36,6 +37,7 @@ const makeWebpackConfig = ({
   port = 0,
   isDevServer = false,
   htmlRenderPlugin,
+  metrics = false,
 } = {}) => {
   const isProductionBuild = process.env.NODE_ENV === 'production';
 
@@ -234,6 +236,9 @@ const makeWebpackConfig = ({
           displayNamesProd,
           MiniCssExtractPlugin,
         }),
+        ...(metrics
+          ? [new MetricsPlugin({ type: 'static', target: 'browser' })]
+          : []),
       ],
     },
     {
@@ -287,6 +292,9 @@ const makeWebpackConfig = ({
           displayNamesProd,
           MiniCssExtractPlugin,
         }),
+        ...(metrics
+          ? [new MetricsPlugin({ type: 'static', target: 'node' })]
+          : []),
       ],
     },
   ].map(webpackDecorator);

config/webpack/webpack.config.ssr.js

@@ -7,6 +7,7 @@ const findUp = require('find-up');
 const StartServerPlugin = require('start-server-webpack-plugin');
 const LoadablePlugin = require('@loadable/webpack-plugin');
 const SkuWebpackPlugin = require('./plugins/sku-webpack-plugin');
+const MetricsPlugin = require('./plugins/metrics-plugin');
 
 const debug = require('debug')('sku:webpack:config');
 const args = require('../args');
@@ -185,6 +186,7 @@ const makeWebpackConfig = ({ clientPort, serverPort, isDevServer = false }) => {
               new webpack.NamedModulesPlugin(),
               new webpack.HotModuleReplacementPlugin(),
               new webpack.NoEmitOnErrorsPlugin(),
+              new MetricsPlugin({ type: 'ssr', target: 'browser' }),
             ]
           : [
               bundleAnalyzerPlugin({ name: 'client' }),
@@ -269,6 +271,7 @@ const makeWebpackConfig = ({ clientPort, serverPort, isDevServer = false }) => {
               new webpack.NamedModulesPlugin(),
               new webpack.HotModuleReplacementPlugin(),
               new webpack.NoEmitOnErrorsPlugin(),
+              new MetricsPlugin({ type: 'ssr', target: 'node' }),
             ]
           : [],
       ),

lib/banner.js

@@ -0,0 +1,39 @@
+const chalk = require('chalk');
+const wrap = require('wrap-ansi');
+const identString = require('indent-string');
+
+module.exports = (type, heading, messages = []) => {
+  let highlight;
+
+  switch (type) {
+    case 'error': {
+      highlight = chalk.red;
+      break;
+    }
+    case 'warning': {
+      highlight = chalk.yellow;
+      break;
+    }
+    default: {
+      throw new Error(`Banner type not implemented: ${type}`);
+    }
+  }
+
+  const formatedMessages = messages
+    .map((message) => identString(wrap(message, 80), 4))
+    .join('\n\n');
+
+  console.log(`
+${highlight(
+  '-------------------------------------------------------------------------------------------',
+)}
+
+    ${chalk.bold(highlight(heading))}
+
+${formatedMessages}
+
+${highlight(
+  '-------------------------------------------------------------------------------------------',
+)}
+  `);
+};

lib/validatePeersDeps.js

@@ -2,28 +2,13 @@ const fs = require('fs-extra');
 const glob = require('fast-glob');
 const semver = require('semver');
 const chalk = require('chalk');
-const wrap = require('wrap-ansi');
-const identString = require('indent-string');
+
+const banner = require('./banner');
+const track = require('../telemetry');
 const detectYarn = require('./detectYarn');
 const { cwd, getPathFromCwd } = require('../lib/cwd');
 const { paths } = require('../context');
 
-const bannerMessage = (heading, messages = []) => {
-  const formatedMessages = messages
-    .map((message) => identString(wrap(message, 80), 4))
-    .join('\n\n');
-
-  console.log(chalk`
-{red -------------------------------------------------------------------------------------------}
-
-    {red.bold ${heading}}
-
-${formatedMessages}
-
-{red -------------------------------------------------------------------------------------------}
-`);
-};
-
 const asyncMap = (list, fn) => {
   return Promise.all(list.map((item) => fn(item)));
 };
@@ -67,7 +52,10 @@ module.exports = async () => {
           );
         }
 
-        bannerMessage('Error: Duplicate packages detected', messages);
+        track.count('duplicate_compile_package', {
+          compile_package: compilePackage,
+        });
+        banner('error', 'Error: Duplicate packages detected', messages);
       }
 
       packages.push(...results);
@@ -98,6 +86,10 @@ module.exports = async () => {
         const dep = compilePackages.get(peerName);
 
         if (dep && !semver.satisfies(dep.version, peerVersionRange)) {
+          track.count('peer_dep_version_mismatch', {
+            compile_package: compilePackage,
+          });
+
           const peerIsBehind = semver.gtr(dep.version, peerVersionRange);
 
           const errorMessage = chalk`{bold ${packageName}} expected to find {bold ${peerName}} {yellow ${peerVersionRange}} but found {yellow ${dep.version}}.`;
@@ -106,7 +98,7 @@ module.exports = async () => {
 
           const peerAheadMessage = chalk`The best way to fix this is to update your dependency on {bold ${peerName}}.`;
 
-          bannerMessage('Warning: Package version mismatch', [
+          banner('warning', 'Warning: Package version mismatch', [
             errorMessage,
             peerIsBehind ? peerBehindMessage : peerAheadMessage,
           ]);

package.json

@@ -13,8 +13,8 @@
     "lint": "npm run format-check && eslint .",
     "check": "yarn check --integrity && echo 'Ignore paths from lint-staged'",
     "pretest": "yarn check --integrity",
-    "test": "OPEN_TAB=false jest --verbose --detectOpenHandles --runInBand",
-    "test-manual": "node test/manual",
+    "test": "SKU_TELEMETRY=false OPEN_TAB=false jest --verbose --detectOpenHandles --runInBand",
+    "test-manual": "SKU_TELEMETRY=false node test/manual",
     "setup-test-hosts": "node test/utils/setupTestHosts",
     "format": "prettier --write '**/*.{js,ts,tsx,md,less,css}'",
     "format-check": "prettier --list-different '**/*.{js,ts,tsx,md,less,css}'",
@@ -139,6 +139,7 @@
     "postcss-js": "^2.0.2",
     "postcss-loader": "^3.0.0",
     "prettier": "2.0.2",
+    "pretty-ms": "^6.0.1",
     "raw-loader": "^4.0.0",
     "react-treat": "^1.0.2",
     "rimraf": "^3.0.0",

scripts/build-ssr.js

@@ -1,6 +1,8 @@
 // First, ensure the build is running in production mode
 process.env.NODE_ENV = 'production';
 
+const { performance } = require('perf_hooks');
+const prettyMilliseconds = require('pretty-ms');
 const webpack = require('webpack');
 const { green, red } = require('chalk');
 const { run } = require('../lib/runWebpack');
@@ -11,6 +13,7 @@ const {
 } = require('../lib/buildFileUtils');
 const makeWebpackConfig = require('../config/webpack/webpack.config.ssr');
 const { port } = require('../context');
+const track = require('../telemetry');
 
 (async () => {
   try {
@@ -24,10 +27,20 @@ const { port } = require('../context');
     await run(webpack(serverConfig));
     await copyPublicFiles();
 
-    console.log(green('Sku build complete!'));
-  } catch (e) {
-    console.error(red(e));
+    const timeTaken = performance.now();
+    track.timing('build', timeTaken, { status: 'success', type: 'ssr' });
 
-    process.exit(1);
+    console.log(
+      green(`Sku build complete in ${prettyMilliseconds(timeTaken)}`),
+    );
+  } catch (error) {
+    const timeTaken = performance.now();
+    track.timing('build', timeTaken, { status: 'failed', type: 'ssr' });
+
+    console.error(red(error));
+
+    process.exitCode = 1;
+  } finally {
+    await track.close();
   }
 })();

scripts/build.js

@@ -1,8 +1,10 @@
 // First, ensure the build is running in production mode
 process.env.NODE_ENV = 'production';
 
+const prettyMilliseconds = require('pretty-ms');
 const { green, red } = require('chalk');
 const webpack = require('webpack');
+const { performance } = require('perf_hooks');
 
 const {
   copyPublicFiles,
@@ -14,6 +16,7 @@ const { run } = require('../lib/runWebpack');
 const createHtmlRenderPlugin = require('../config/webpack/plugins/createHtmlRenderPlugin');
 const makeWebpackConfig = require('../config/webpack/webpack.config');
 const { isLibrary } = require('../context');
+const track = require('../telemetry');
 
 (async () => {
   try {
@@ -28,9 +31,21 @@ const { isLibrary } = require('../context');
     );
     await cleanRenderJs();
     await copyPublicFiles();
-    console.log(green('Sku build complete!'));
+
+    const timeTaken = performance.now();
+    track.timing('build', timeTaken, { status: 'success', type: 'static' });
+
+    console.log(
+      green(`Sku build complete in ${prettyMilliseconds(timeTaken)}`),
+    );
   } catch (error) {
+    const timeTaken = performance.now();
+    track.timing('build', timeTaken, { status: 'failed', type: 'static' });
+
     console.error(red(error));
-    process.exit(1);
+
+    process.exitCode = 1;
+  } finally {
+    await track.close();
   }
 })();

scripts/serve.js

@@ -19,11 +19,14 @@ const allocatePort = require('../lib/allocatePort');
 const openBrowser = require('../lib/openBrowser');
 const getSiteForHost = require('../lib/getSiteForHost');
 const args = require('../config/args');
+const track = require('../telemetry');
 
 const environment = args.environment ? args.environment : environments[0] || '';
 const prefferedSite = args.site;
 
 (async () => {
+  track.count('serve');
+
   const targetFolderExists = fs.existsSync(paths.target);
 
   if (!targetFolderExists) {

scripts/setup-hosts.js

@@ -1,9 +1,15 @@
 const { setupHosts } = require('../lib/hosts');
+const track = require('../telemetry');
 
 (async () => {
   try {
     await setupHosts();
+    track.count('setup_hosts', { status: 'success' });
   } catch (e) {
-    process.exit(1);
+    track.count('setup_hosts', { status: 'failed' });
+
+    process.exitCode = 1;
+  } finally {
+    await track.close();
   }
 })();

scripts/start.js

@@ -35,6 +35,7 @@ const localhost = '0.0.0.0';
     port: availablePort,
     isDevServer: true,
     htmlRenderPlugin,
+    metrics: true,
   });
 
   const parentCompiler = webpack(config);

telemetry/index.js

@@ -0,0 +1,25 @@
+const os = require('os');
+
+const { getPathFromCwd } = require('../lib/cwd');
+const provider = require('./provider');
+const skuVersion = require('../package.json').version;
+
+let projectName = 'unknown';
+try {
+  const packageJson = require(getPathFromCwd('package.json'));
+
+  if (packageJson.name) {
+    projectName = packageJson.name;
+  }
+} catch (e) {}
+
+const isCI = process.env.CI === 'true';
+
+provider.addGlobalTags({
+  ci: isCI,
+  version: skuVersion,
+  project: projectName,
+  os: os.platform(),
+});
+
+module.exports = provider;