Add performance markers to Kevin overlay + configurable prefix string for perf marker names (#28)

* Add performance markers

* Introduce perfMarkerPrefix as an option

* Add tests and README

* Add link to perf info

* Bump minor version

Author: piratefsh

README.md

@@ -142,6 +142,19 @@ claim to serve it.
 
 This is a string that's inserted into the overlay, in order to provide users with additional information. It's useful if you'd like to provide feedback to users of your server, like "If you run into issues, try running restart_server_please.sh". This string may contain valid HTML.
 
+#### `perfMarkerPrefix`
+
+-   Type: `String`
+-   Default: `""`
+
+The overlay will fire 3 performance markers:
+
+-   performance.mark("kevin-overlay-start") - when the overlay first renders
+-   performance.mark("kevin-overlay-end") - assets are finished building, and right before the page refreshes
+-   performance.measure("kevin-overlay") - right after the above, indicating total time overlay was visible to user.
+
+If you would like to add a prefix to these marker names, you may pass it in as an option, otherwise the marker names will be as below. Please see documentation on performance markers here: https://developer.mozilla.org/en-US/docs/Web/API/Performance.
+
 ## Hooks
 
 To further extend Kevin's capabilities, we used Webpack's [Tapable][tapable] framework to provide access to some of Kevin's core functionality. You can use a hook much like you would with Webpack:

lib/buildingTemplate.js

@@ -4,7 +4,13 @@
  * initial loading time. Note that it re-renders the page each time it's called with the
  * most up-to-date list of currently-being-built assets.
  */
-module.exports = (assetName, configName, kevinStatusUrl, additionalInfo) => {
+module.exports = (
+    assetName,
+    configName,
+    kevinStatusUrl,
+    additionalInfo,
+    perfMarkerPrefix = ""
+) => {
     return `
 /**
  * Hi! If you're seeing this, it means Kevin just started a compiler to build this
@@ -108,9 +114,16 @@ if (!isIframe() && !window.__KEVIN_CHECKS_ON_BUILDS) {
             .every(function(config) {
                 return data[config] !== "first-build";
             });
+
         if (doneBuilding) {
             clearInterval(window.__KEVIN_CHECKS_ON_BUILDS);
-            window.location.reload(true);
+            performance.mark("${perfMarkerPrefix}kevin-overlay-end");
+            performance.measure("${perfMarkerPrefix}kevin-overlay", "${perfMarkerPrefix}kevin-overlay-start", "${perfMarkerPrefix}kevin-overlay-end");
+            //Ensure that current event loop completes before reloading page
+            //This will ensure that perf markers are registered.
+            setTimeout(() => {
+                window.location.reload(true);
+            }, 0);
         }
 
     }
@@ -178,6 +191,7 @@ ready(function() {
             "</div>"
             "<br/>" +
         "</div>";
+    performance.mark("${perfMarkerPrefix}kevin-overlay-start");
  });
 
  })();

lib/middleware.js

@@ -80,6 +80,10 @@ class Kevin {
             // to users of your server, like "If you run into issues, try running restart_server_please.sh"
             // This string may contain valid HTML.
             additionalOverlayInfo = "",
+
+            // This string will be used to prefix any performance markers fired from the kevin overlay script
+            // in buildingTemplate.js
+            perfMarkerPrefix = "",
         } = {}
     ) {
         this.hooks = {
@@ -98,6 +102,7 @@ class Kevin {
         this.kevinPublicPath = kevinPublicPath;
         this.kevinApiPrefix = kevinApiPrefix;
         this.additionalOverlayInfo = additionalOverlayInfo;
+        this.perfMarkerPrefix = perfMarkerPrefix;
 
         this.entryMap = initializeEntryMap(this.configs);
     }
@@ -267,8 +272,17 @@ class Kevin {
      * @param {bool} $0.buildOnly - true if we shouldn't worry about serving the file
      * @param {string} $0.configName - the name of the config responsible for this request
      *      if kevinApiPrefix is provided.
+     * @param {string} $0.perfMarkerPrefix - string to prefix any perf markers sent by kevin
      */
-    serveAsset({ req, res, next, isNewCompiler, assetName, configName } = {}) {
+    serveAsset({
+        req,
+        res,
+        next,
+        isNewCompiler,
+        assetName,
+        configName,
+        perfMarkerPrefix,
+    } = {}) {
         // If the compiler is going through its first build, serve an overlay until it's
         // finished (the first build takes more time because the cache is cold).
         if (isNewCompiler) {
@@ -282,7 +296,8 @@ class Kevin {
                 assetName,
                 configName,
                 kevinBuildStatusUrl,
-                this.additionalOverlayInfo
+                this.additionalOverlayInfo,
+                perfMarkerPrefix
             );
             logInfo(`Serving temporary asset for ${assetName}...`);
             res.setHeader("Content-Length", content.length);
@@ -367,7 +382,8 @@ class Kevin {
                     compilers[name] = { status: NOT_BUILT };
                 });
 
-                const hasMaxActiveCompilersBeenReached = this.hasMaxActiveCompilersBeenReached();
+                const hasMaxActiveCompilersBeenReached =
+                    this.hasMaxActiveCompilersBeenReached();
 
                 res.json({
                     compilers,
@@ -536,6 +552,8 @@ class Kevin {
                 return next();
             }
             const configName = config.name;
+            const perfMarkerPrefix = this.perfMarkerPrefix;
+
             logInfo(`Using config "${configName}" to build ${assetName}`);
             this.hooks.handleRequest.call(req, assetName, configName);
 
@@ -551,6 +569,7 @@ class Kevin {
                         isNewCompiler,
                         assetName,
                         configName,
+                        perfMarkerPrefix,
                     });
                 })
                 .catch((err) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kevin-middleware",
-  "version": "1.6.1",
+  "version": "1.7.1",
   "description": "This is an Express middleware that makes developing javascript in a monorepo easier.",
   "main": "index.js",
   "directories": {

test/lib/buildingTemplate.test.js

@@ -0,0 +1,37 @@
+const buildingTemplate = require("../../lib/buildingTemplate");
+
+describe("buildingTemplate", () => {
+    describe("perfMarkerPrefix argument", () => {
+        const assetName = "fish.js";
+        const configName = "aquatic";
+        const kevinStatusUrl = "http://gonefishingtonight.com";
+        const additionalInfo = "blub blub";
+        it("uses empty string when not passed in", () => {
+            const result = buildingTemplate(
+                assetName,
+                configName,
+                kevinStatusUrl,
+                additionalInfo
+            );
+            expect(result).toContain(`performance.mark("kevin-overlay-start")`);
+            expect(result).toContain(`performance.mark("kevin-overlay-end")`);
+            expect(result).toContain(
+                `performance.measure("kevin-overlay", "kevin-overlay-start", "kevin-overlay-end")`
+            );
+        });
+        it("uses provided prefix string", () => {
+            const result = buildingTemplate(
+                assetName,
+                configName,
+                kevinStatusUrl,
+                additionalInfo,
+                "ocean_"
+            );
+            expect(result).toContain(`performance.mark("ocean_kevin-overlay-start")`);
+            expect(result).toContain(`performance.mark("ocean_kevin-overlay-end")`);
+            expect(result).toContain(
+                `performance.measure("ocean_kevin-overlay", "ocean_kevin-overlay-start", "ocean_kevin-overlay-end")`
+            );
+        });
+    });
+});