Client: Implement performance measurement

Author: winwiz1

client/src/api/BackendManager.ts

@@ -22,6 +22,7 @@ import {
   SampleRetrievalResult,
   SampleRequest
 } from "@backend/types/SampleTypes";
+import { perfStart } from "../utils/misc";
 
 export {
   SampleRetrieval,
@@ -79,6 +80,7 @@ export class BackendManager implements IBackendClient {
     };
 
     await fetchAdapter(fetchProps);
+    perfStart("fetch");
   }
 
   private successHandler = (data: any): void => {

client/src/components/BaseComponent.tsx

@@ -12,6 +12,7 @@
  **/
 import * as React from "react";
 import styles from "../css/base-component.module.css";
+import { perfEnd } from "../utils/misc";
 
 const cssStyle: Record<string, string> = {
   container: styles["component_container"],
@@ -28,6 +29,10 @@ export const BaseComponent: React.FC<IBaseComponent> = props => {
   const LeftComponent = props.leftComponent;
   const RightComponent = props.rightComponent;
 
+  React.useEffect(() => {
+    perfEnd();
+  }, []);
+
   return (
     <main className={cssStyle.container}>
       <div className={cssStyle.left}>

client/src/components/ComponentA.tsx

@@ -41,6 +41,9 @@ const Description: React.FC = _props => {
 
 export const ComponentA: React.FC = _props => {
   return (
-      <BaseComponent leftComponent={Navigation} rightComponent={Description} />
+      <BaseComponent
+        leftComponent={Navigation}
+        rightComponent={Description}
+      />
   );
 };

client/src/components/ComponentB.tsx

@@ -92,7 +92,10 @@ export const ComponentB: React.FC = _props => {
         name={pageName}
         description={pageDescription}
       />
-      <BaseComponent leftComponent={Navigation} rightComponent={Description} />
+      <BaseComponent
+        leftComponent={Navigation}
+        rightComponent={Description}
+      />
     </React.Fragment>
   );
 };

client/src/components/Lighthouse.tsx

@@ -86,6 +86,9 @@ const Description: React.FC = _props => {
 
 export const Lighthouse: React.FC = _props => {
   return (
-      <BaseComponent leftComponent={Navigation} rightComponent={Description} />
+      <BaseComponent
+        leftComponent={Navigation}
+        rightComponent={Description}
+      />
   );
 };

client/src/components/NameLookup.tsx

@@ -33,7 +33,11 @@ import {
   isError,
   isCustomError,
 } from "../utils/typeguards";
-import { getTitle, getCanonical } from "../utils/misc";
+import {
+  getTitle,
+  getCanonical,
+  perfEnd
+} from "../utils/misc";
 
 //#region CSS
 
@@ -160,6 +164,10 @@ const NameLookupContent: React.FC = _props => {
       (outcome as SampleRetrievalResult).response.gender;
   }
 
+  React.useEffect(() => {
+    !!outcome && !isOutcomeFailure() && perfEnd();
+  }, [outcome]);
+
   //#region Render
 
   return (
@@ -255,6 +263,9 @@ const NameLookupContent: React.FC = _props => {
 
 export const NameLookup: React.FC = _props => {
   return (
-    <BaseComponent leftComponent={Navigation} rightComponent={NameLookupContent} />
+    <BaseComponent
+      leftComponent={Navigation}
+      rightComponent={NameLookupContent}
+    />
   );
 };

client/src/components/Navigation.tsx

@@ -10,6 +10,7 @@ import { Menu, Icon } from "semantic-ui-react";
 import * as SPAs from "../../config/spa.config";
 import styles from "../css/navigation.module.css";
 import { isServer } from "../utils/postprocess/misc";
+import { perfStart } from "../utils/misc";
 
 const cssStyle: Record<string, string> = {
   menu: styles["menu"],
@@ -36,6 +37,8 @@ export const Navigation: React.FC = _props => {
     }
   }, []);  // run once upon initial rendering
 
+  const onClickHandler = () => perfStart("click");
+
   return (
     <nav className={cssStyle.menu}>
       <Menu
@@ -51,6 +54,7 @@ export const Navigation: React.FC = _props => {
               header
               as={NavLink}
               exact to={pathArray[0]}
+              onClick={onClickHandler}
             >
               Overview
               <Icon name="file alternate outline" size="large" />
@@ -59,6 +63,7 @@ export const Navigation: React.FC = _props => {
               header
               as={NavLink}
               to={pathArray[1]}
+              onClick={onClickHandler}
             >
               ComponentA
               <Icon name="cube" size="large" />
@@ -67,6 +72,7 @@ export const Navigation: React.FC = _props => {
               header
               as={NavLink}
               to={pathArray[2]}
+              onClick={onClickHandler}
             >
               Lighthouse
               <Icon name="tachometer alternate" size="large" />
@@ -75,6 +81,7 @@ export const Navigation: React.FC = _props => {
               header
               as={NavLink}
               to={pathArray[3]}
+              onClick={onClickHandler}
             >
               NameLookup
               <Icon name="search" size="large" />

client/src/components/NotFound.tsx

@@ -39,6 +39,9 @@ as a replacement for HTML 404 status code.";
 
 export const NotFound: React.FC = _props => {
   return (
-      <BaseComponent leftComponent={Navigation} rightComponent={Description} />
+      <BaseComponent
+        leftComponent={Navigation}
+        rightComponent={Description}
+      />
   );
 };

client/src/components/Overview.tsx

@@ -72,8 +72,12 @@ const Description: React.FC = _props => {
         name={pageName}
         description={pageDescription}
       />
-      <Message css={cssMessage} className={cssStyle.msg}>
-        <Icon css={cssIcon}
+      <Message
+        css={cssMessage}
+        className={cssStyle.msg}
+      >
+        <Icon
+          css={cssIcon}
           name="info circle"
           color="blue"
           size="big"
@@ -119,6 +123,9 @@ const Description: React.FC = _props => {
 
 export const Overview: React.FC = _props => {
   return (
-    <BaseComponent leftComponent={Navigation} rightComponent={Description} />
+    <BaseComponent
+      leftComponent={Navigation}
+      rightComponent={Description}
+    />
   );
 };

client/src/utils/misc.ts

@@ -1,5 +1,8 @@
 import { isServer } from "./postprocess/misc";
 import * as SPAs from "../../config/spa.config";
+import logger from "./logger";
+
+//#region SEO
 
 const regexPath1Literal = `/${SPAs.getRedirectName()}(.html)?$`;
 const regexPath1 = new RegExp(regexPath1Literal, "i");
@@ -20,3 +23,39 @@ export const getTitle = (pageTitle?: string): string => {
   const ret = !!pageTitle? `${SPAs.appTitle} - ${pageTitle}` : SPAs.appTitle;
   return ret + (CF_PAGES? " (Jamstack build)" : " (Full stack build)");
 }
+
+//#endregion
+
+//#region Performance Benchmarking
+
+const perfLiterals = ["fetch", "click", "end", "measure", "mark"];
+
+export const perfStart = (name: "click"|"fetch") => {
+  const perf = window?.performance;
+  perf?.mark(name);
+}
+
+export const perfEnd = (): undefined|number => {
+  if (typeof(window?.performance?.getEntriesByName) !== "function") {
+    return undefined;
+  }
+
+  const perf = window.performance;
+  const fetchEntries = perf.getEntriesByName(perfLiterals[0], perfLiterals[4]);
+  const clickEntries = perf.getEntriesByName(perfLiterals[1], perfLiterals[4]);
+  const clickEntriesLen = Math.min(...[clickEntries.length, 1]);
+
+  if (clickEntriesLen === 0 && fetchEntries.length === 0) {
+    return undefined;
+  }
+
+  perf.mark(perfLiterals[2]);
+  perf.measure(perfLiterals[3], perfLiterals[clickEntriesLen], perfLiterals[2]);
+  const duration = performance.getEntriesByType(perfLiterals[3])[0].duration;
+  logger.info(`${clickEntriesLen === 0? "Updating" : "Transition to"} internal SPA page ${clickEntriesLen === 0? "after fetch ": ""}took ${Math.round(duration)} msec`);
+  perf.clearMarks();
+  perf.clearMeasures();
+  return duration;
+}
+
+//#endregion