imported FCP to front-end

Author: C-STYR

package.json

@@ -157,6 +157,7 @@
     "react-json-tree": "^0.11.2",
     "react-router-dom": "^5.2.0",
     "react-select": "^3.1.0",
-    "recoil": "0.0.10"
+    "recoil": "0.0.10",
+    "web-vitals": "^1.1.0"
   }
 }

src/app/components/StateRoute.tsx

@@ -20,6 +20,7 @@ import { useStoreContext } from '../store';
 import PerformanceVisx from './PerformanceVisx';
 import Legend from './AtomsRelationshipLegend';
 import AtomsRelationship from './AtomsRelationship';
+import Vitals from './Vitals';
 
 const History = require('./History').default;
 const ErrorHandler = require('./ErrorHandler').default;
@@ -37,14 +38,16 @@ export interface StateRouteProps {
     children?: any[];
     atomsComponents?: any;
     atomSelectors?: any;
+   
   };
   hierarchy: any;
   snapshots: [];
   viewIndex: number;
+  FCP: any;
 }
 
 const StateRoute = (props: StateRouteProps) => {
-  const { snapshot, hierarchy, snapshots, viewIndex } = props;
+  const { snapshot, hierarchy, snapshots, viewIndex, FCP } = props;
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
   const isRecoil = snapshot.atomsComponents ? true : false;
@@ -111,6 +114,10 @@ const StateRoute = (props: StateRouteProps) => {
       return <Tree snapshot={snapshot} />;
     }
     return <div className="noState">{NO_STATE_MSG}</div>;
+
+  };
+  const renderVitals = () => {
+    return <Vitals FCP={FCP}/>;
   };
 
   const renderPerfView = () => {
@@ -155,6 +162,13 @@ const StateRoute = (props: StateRouteProps) => {
         >
           History
         </NavLink>
+        <NavLink
+          className="router-link"
+          activeClassName="is-active"
+          to="/vitals"
+        >
+          Vitals
+        </NavLink>
         <NavLink
           className="router-link"
           activeClassName="is-active"
@@ -176,6 +190,7 @@ const StateRoute = (props: StateRouteProps) => {
         <Route path="/performance" render={renderPerfView} />
         <Route path="/history" render={renderHistory} />
         <Route path="/relationship" render={renderAtomsRelationship} />
+        <Route path="/vitals" render={renderVitals} />
         <Route path="/tree" render={renderTree} />
         <Route path="/" render={renderComponentMap} />
       </Switch>

src/app/components/Vitals.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+
+
+const Vitals = ({FCP}) => {
+  const [data, dataSet] = React.useState({});
+  const METRICS = ["TTFB", "LCP", "FID", "FCP", "CLS"];
+
+  React.useEffect(() => {
+    chrome.runtime.sendMessage({
+      type: "performance:metric:request",
+    }, (d) => {
+      dataSet(d);
+    })
+  }, [])
+
+
+  return (
+    <div>
+      <h1>FCP: {FCP.toFixed(3)}</h1>
+    </div>
+  )
+}
+
+export default Vitals;

src/app/containers/ActionContainer.tsx

@@ -115,15 +115,13 @@ function ActionContainer(props) {
   );
 
   if (!timeTravel) {
-    console.log("should be false:", timeTravel)
     return (
       //returns an empty div when timeTravel is false
 
       <div></div>
     ) 
   }
   else {
-    console.log("Should be true:", timeTravel);
     // this is not logging; the prop is not being udpdated or the component is not being re-rendered.
     return (
       <div className="action-container">

src/app/containers/MainContainer.tsx

@@ -155,8 +155,11 @@ function MainContainer(): any {
       </div>
     );
   }
-  const { viewIndex, sliderIndex, snapshots, hierarchy } = tabs[currentTab];
+  const { viewIndex, sliderIndex, snapshots, hierarchy, FCP } = tabs[currentTab];
   // if viewIndex is -1, then use the sliderIndex instead
+  console.log('FCP in MainContainer >>>', FCP);
+
+
   const snapshotView =
     viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex];
   // cleaning hierarchy and snapshotView from stateless data
@@ -205,6 +208,7 @@ function MainContainer(): any {
         {snapshots.length ? (
           <StateContainer
             toggleActionContainer={toggleActionContainer}
+            FCP={FCP}
             viewIndex={viewIndex}
             snapshot={snapshotDisplay}
             hierarchy={hierarchyDisplay}

src/app/containers/StateContainer.tsx

@@ -24,6 +24,7 @@ interface StateContainerProps {
     }
   >;
   toggleActionContainer?: any;
+  FCP: any;
   AtomsRelationship?: any[];
   hierarchy: Record<string, unknown>;
   snapshots: [];
@@ -33,7 +34,7 @@ interface StateContainerProps {
 
 // eslint-disable-next-line react/prop-types
 const StateContainer = (props: StateContainerProps): JSX.Element => {
-  const { snapshot, hierarchy, snapshots, viewIndex, toggleActionContainer } = props;
+  const { snapshot, hierarchy, snapshots, viewIndex, toggleActionContainer, FCP } = props;
   const [Text, setText] = useState('State');
 
   return (
@@ -74,6 +75,7 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
               setText('State');
               return (
                 <StateRoute
+                  FCP={FCP}
                   viewIndex={viewIndex}
                   snapshot={snapshot}
                   hierarchy={hierarchy}

src/extension/background.js

@@ -6,6 +6,7 @@ const reloaded = {};
 const firstSnapshotReceived = {};
 // there will be the same number of objects in here as there are reactime tabs open for each user application being worked on
 const tabsObj = {};
+let data = {}; //for Performance Metrics 8.0
 
 function createTabObj(title) {
 	// update tabsObj
@@ -32,6 +33,8 @@ function createTabObj(title) {
 			paused: false,
 			empty: false,
 		},
+		// Holds FCP metric
+		FCP: null,
 	};
 }
 
@@ -175,17 +178,26 @@ chrome.runtime.onConnect.addListener((port) => {
 });
 
 // background.js listening for a  message from contentScript.js
-chrome.runtime.onMessage.addListener((request, sender) => {
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 	// IGNORE THE AUTOMATIC MESSAGE SENT BY CHROME WHEN CONTENT SCRIPT IS FIRST LOADED
 	if (request.type === 'SIGN_CONNECT') {
 		return true;
 	}
+	
+	
+	console.log('Request in Listener >>>', request)
+	console.log('Sender in Listener >>>', sender)
 	const tabTitle = sender.tab.title;
 	const tabId = sender.tab.id;
-	const { action, index, name } = request;
+	const { action, index, name, value } = request;
 	let isReactTimeTravel = false;
 
-
+	if (request.value) {
+		data = {
+		name, value
+	};
+	console.log("data >>>", data)
+}
 	// Filter out tabs that don't have reactime, tabs that dont use react?
 	if (
 		action === 'tabReload' ||
@@ -203,6 +215,29 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 		tabsObj[tabId] = createTabObj(tabTitle);
 	}
 
+	//Performance Metrics 8.0 
+
+	// if (request.type === "performance:metric") {
+	// 	console.log('performance:metric received');
+
+    // const tab = sender.tab.url.toString();
+    // data[tab] = data[tab] || {};
+    // const name = request.name;
+    // data[tab][name] = data[tab][name] || {
+    //   values: [],
+    //   average: 0,
+    // };
+    // data[tab][name].values.push(request.value);
+    // data[tab][name].average = 
+    //   data[tab][name].values.reduce((a, v) => a + v, 0) / data[tab][name].values.length;
+  // }
+  // if (request.type === "performance:metric:request") {
+	// 	console.log('performance:metric:request received')
+	// 	console.log('p:m:r', data)
+  //   sendResponse(data);
+	// }
+	
+
 	const { persist, empty } = tabsObj[tabId].mode;
 
 	switch (action) {
@@ -236,7 +271,10 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 					tabsObj[tabId].snapshots = tabsObj[tabId].initialSnapshot;
 					// resets hierarchy to page initial state recorded when emptied
 					tabsObj[tabId].hierarchy = tabsObj[tabId].initialHierarchy;
+
+
 				} else {
+		
 					// triggered with new tab opened
 					// resets snapshots to page initial state
 					tabsObj[tabId].snapshots.splice(1);
@@ -276,8 +314,13 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 			if (!firstSnapshotReceived[tabId]) {
 				firstSnapshotReceived[tabId] = true;
 				reloaded[tabId] = false;
+				
+				if (data.value) tabsObj[tabId].FCP = data.value;
 
 				tabsObj[tabId].snapshots.push(request.payload);
+				
+				// FCP check
+				console.log('tabsObj >>>', tabsObj);
 
 				sendToHierarchy(
 					tabsObj[tabId],

src/extension/contentScript.ts

@@ -1,3 +1,6 @@
+import { getTTFB, getLCP, getFID, getFCP, getCLS } from "web-vitals";
+
+
 
 let firstMessage = true;
 
@@ -35,4 +38,28 @@ chrome.runtime.onMessage.addListener(request => {
   return true; // attempt to fix port closing console error
 });
 
+//Performance Metrics 8.0
+
+const metrics = {};
+const gatherMetrics = ({ name, value }) => {
+
+  console.log('inside Content Script gather metrics', name, value)
+  metrics[name] = value;
+
+  chrome.runtime.sendMessage({
+    type: "performance:metric",
+    name,
+    value,
+  });
+
+  const metricsHTML = Object.keys(metrics)
+}
+
+// getTTFB(gatherMetrics);
+// getLCP(gatherMetrics);
+// getFID(gatherMetrics);
+getFCP(gatherMetrics);
+// getCLS(gatherMetrics);
+
+
 chrome.runtime.sendMessage({ action: 'injectScript' });