add web SSR timing reporting events (#1672)

electrode-io · Jun 16, 2020 · 6d8eaf9 · 6d8eaf9
1 parent 6c38df5
commit 6d8eaf9
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 2 deletions.
diff --git a/packages/subapp-server/lib/fastify-plugin.js b/packages/subapp-server/lib/fastify-plugin.js
@@ -22,6 +22,12 @@ module.exports = {
 
     const { routes, topOpts } = searchRoutesFromFile(srcDir, pluginOpts);
 
+    const reporting = _.get(topOpts, "reporting", {});
+    if (!reporting.enable || !reporting.reporter) {
+      // eslint-disable-next-line
+      console.warn(`Warning: Metric reporting for ssr not enabled or no reporter specified.`);
+    }
+
     const subApps = await subAppUtil.scanSubAppsFromDir(srcDir);
     const subAppsByPath = subAppUtil.getSubAppByPathMap(subApps);
 

diff --git a/packages/subapp-server/lib/setup-hapi-routes.js b/packages/subapp-server/lib/setup-hapi-routes.js
@@ -246,6 +246,12 @@ function searchRoutesFromFile(srcDir, pluginOpts) {
 async function setupRoutesFromFile(srcDir, server, pluginOpts) {
   const { routes, topOpts } = searchRoutesFromFile(srcDir, pluginOpts);
 
+  const reporting = _.get(topOpts, "reporting", {});
+  if (!reporting.enable || !reporting.reporter) {
+    // eslint-disable-next-line
+    console.warn(`Warning: Metric reporting for ssr not enabled or no reporter specified.`);
+  }
+
   await handleFavIcon(server, topOpts);
 
   // invoke setup callback
@@ -268,6 +274,12 @@ async function setupRoutesFromDir(server, pluginOpts, fromDir) {
 
   const topOpts = _.merge(getDefaultRouteOptions(), fromDir.options, pluginOpts);
 
+  const reporting = _.get(topOpts, "reporting", {});
+  if (!reporting.enable || !reporting.reporter) {
+    // eslint-disable-next-line
+    console.warn(`Warning: Metric reporting for ssr not enabled or no reporter specified.`);
+  }
+
   topOpts.routes = _.merge({}, routes, topOpts.routes);
 
   updateFullTemplate(fromDir.dir, topOpts);

diff --git a/packages/subapp-server/lib/utils.js b/packages/subapp-server/lib/utils.js
@@ -83,7 +83,8 @@ function getDefaultRouteOptions() {
     devBundleBase: "/js",
     cspNonceValue: undefined,
     templateFile: Path.join(__dirname, "..", "resources", "index-page"),
-    cdn: {}
+    cdn: {},
+    reporting: { enable: false }
   };
 }
 

diff --git a/packages/subapp-web/lib/init.js b/packages/subapp-web/lib/init.js
@@ -6,6 +6,7 @@ const Fs = require("fs");
 const Path = require("path");
 const util = require("./util");
 const subappUtil = require("subapp-util");
+const _ = require("lodash");
 
 module.exports = function setup(setupContext) {
   const distDir = process.env.NODE_ENV === "production" ? "../dist/min" : "../dist/dev";
@@ -16,6 +17,8 @@ module.exports = function setup(setupContext) {
   // TODO: in webpack dev mode, we need to reload stats after there's a change
   //
 
+  const metricReport = _.get(setupContext, "routeOptions.reporting", {});
+
   const { assets } = util.loadAssetsFromStats(setupContext.routeOptions.stats);
   setupContext.routeOptions.__internals.assets = assets;
 
@@ -68,6 +71,10 @@ ${inlineRuntimeJS}
       runtimeEntryPoints.forEach(ep => {
         context.user.includedBundles[ep] = true;
       });
+
+      if (metricReport.enable && metricReport.reporter) {
+        context.user.xarcSSREmitter = util.getEventEmiiter(metricReport.reporter);
+      }
       // invoke the initialize method of subapp's server code
       if (subAppServers.length > 0) {
         for (const server of subAppServers) {

diff --git a/packages/subapp-web/lib/load.js b/packages/subapp-web/lib/load.js
@@ -360,6 +360,9 @@ ${stack}`,
         }
 
         if (props.serverSideRendering) {
+          if (!context.user[`prepare-grp-${props.group}`]) {
+            context.user[`prepare-grp-${props.group}`] = Date.now();
+          }
           const lib = (ssrInfo.lib = util.getFramework(ref));
           ssrInfo.awaitData = lib.handlePrepare();
 

diff --git a/packages/subapp-web/lib/start.js b/packages/subapp-web/lib/start.js
@@ -10,7 +10,7 @@ const xaa = require("xaa");
 module.exports = function setup() {
   return {
     process: (context, { props: { concurrency } }) => {
-      const { xarcSubappSSR } = context.user;
+      const { xarcSubappSSR, xarcSSREmitter } = context.user;
       const startMsg = `
 <!-- subapp start -->
 <script>window.xarcV1.start();</script>
@@ -63,6 +63,7 @@ module.exports = function setup() {
 
       // default group _ subapps should all run independently
       if (xarcSubappSSR._) {
+        const startTime = Date.now();
         xaa
           .map(
             xarcSubappSSR._.queue,
@@ -76,6 +77,12 @@ module.exports = function setup() {
             context.voidStop(err);
             xaa.map(xarcSubappSSR._.queue, async info => info.done(), { concurrency });
           });
+        if (xarcSSREmitter) {
+          xarcSSREmitter.emit("web_ssr", {
+            action: `subapps-ssr`,
+            duration: Date.now() - startTime
+          });
+        }
       }
 
       xaa
@@ -85,6 +92,8 @@ module.exports = function setup() {
             if (group !== "_") {
               mapCtx.assertNoFailure();
 
+              const loadStartTime = Date.now();
+
               // first ensure everyone in the queue finish preparing
               await xaa.map(
                 queue,
@@ -95,10 +104,19 @@ module.exports = function setup() {
                 },
                 { concurrency }
               );
+              if (xarcSSREmitter) {
+                xarcSSREmitter.emit("web_ssr", {
+                  action: `prepare-group`,
+                  labels: ["group"],
+                  group,
+                  duration: Date.now() - context.user[`prepare-grp-${group}`]
+                });
+              }
 
               mapCtx.assertNoFailure();
 
               // and then kick off rendering for every subapp in the group
+              const renderStartTime = Date.now();
               await xaa.map(
                 queue,
                 async (v, ix2, ctx2) => {
@@ -108,6 +126,21 @@ module.exports = function setup() {
                 },
                 { concurrency }
               );
+              if (xarcSSREmitter) {
+                const now = Date.now();
+                xarcSSREmitter.emit("web_ssr", {
+                  action: `render-group`,
+                  group,
+                  labels: ["group"],
+                  duration: now - renderStartTime
+                });
+                xarcSSREmitter.emit("web_ssr", {
+                  action: `group-ssr-total`,
+                  group,
+                  labels: ["group"],
+                  duration: now - loadStartTime
+                });
+              }
             }
           },
           { concurrency }

diff --git a/packages/subapp-web/lib/util.js b/packages/subapp-web/lib/util.js
@@ -7,6 +7,7 @@ const assert = require("assert");
 const Path = require("path");
 const _ = require("lodash");
 const { tryThrowOriginalSubappRegisterError } = require("subapp-util");
+const EventEmitter = require("events");
 
 let CDN_ASSETS;
 let CDN_JS_BUNDLES;
@@ -341,6 +342,24 @@ ${ignoreMsg}`
     assets.chunks = stats.chunks;
 
     return { assets, stats };
+  },
+  getEventEmiiter(reporter) {
+    const emitter = new EventEmitter();
+    const groupEvents = {};
+
+    emitter.on("web_ssr", (data = {}) => {
+      const group = data.group || "_";
+      groupEvents[group] = groupEvents[group] || [];
+      groupEvents[group].push(data);
+
+      if (data.action === "group-ssr-total" || data.action === "subapps-ssr") {
+        const events = groupEvents[group];
+        events.forEach((event) => reporter(event));
+        delete groupEvents[group];
+      }
+    });
+
+    return emitter;
   }
 };