@capillarytech/cap-ui-utils 1.2.3 → 1.2.5

package/GA/index.js

@@ -1,5 +1,6 @@
 import ReactGA from 'react-ga';
-// import ttiPolyfill from 'tti-polyfill';
+import ttiPolyfill from 'tti-polyfill';
+
 import timeTracker from './utils/timeTracker';
 import tracker from './utils/tracker';
 import routeTrackerWrapper from './utils/routeTrackerWrapper';
@@ -9,22 +10,74 @@ import warn from '../utils/console/warn';
 import log from '../utils/console/log';
 
 const _initialize = (GAConfigs) => {
-  if (!GAConfigs.accessKey) {
+  const { accessKey, trackUIError, trackLoadPerformance } = GAConfigs || {}
+  if (!accessKey) {
     warn("Cannot initialize GA without accessKey");
     return;
+  } else {
+    ReactGA.initialize(accessKey,{debug: true,});
   }
-  if(GAConfigs.accessKey) {
-    ReactGA.initialize(GAConfigs.accessKey,{debug: true,});
-  }
-  if(GAConfigs.trackUIError){
+  if(trackUIError){
     errorTracks();
   }
+  if(trackLoadPerformance){
+    loadPerformanceTracking(trackLoadPerformance);
+  }
   eventsAfterInitialize();
   log("Cap GA initialized");
 }
 const setCustomDimension= value => {
   ReactGA.set(value);
 }
+const loadPerformanceTracking = module =>{
+  //requestStart: when the browser issues a request to get the webpage from the server
+  // responsesStart: when the first byte of the website arrives
+  // responseEnd: When the last byte of the website arrives
+
+  const callback = list => {
+    list.getEntries().forEach(entry => {
+      const  { responseStart = 0, requestStart = 0, responseEnd = 0 } = entry || {};
+      const serverLatency = Math.round((responseStart - requestStart).toFixed(2));
+      const downloadTime = Math.round((responseEnd - responseStart).toFixed(2));
+      const loadTime = Math.round((responseEnd - requestStart).toFixed(2));
+      // Server latency:
+      ReactGA.timing({
+        category: "performance- server latentcy",
+        variable: module,  
+	      value: serverLatency,
+      })
+      // Download time:
+      ReactGA.timing({
+        category: "performance- download time",
+        variable: module,  
+	      value: downloadTime
+      })
+      // Total app load time:
+      ReactGA.timing({
+        category: "performance- load time",
+        variable: module,  
+	      value: loadTime
+      })
+    });
+  };
+
+  try {
+    var observer = new PerformanceObserver(callback);
+    observer.observe({ entryTypes: ['navigation'] });
+    // Time to Interactive metric is essentially how long it takes for a user to be able to interact with your site.
+    // Time to Interactive is defined as the point at which the layout has stabilized, key webfonts are visible, 
+    // and the main thread is available enough to handle user input.
+    ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {
+      ReactGA.timing({
+        category: "Time to Interactive",
+        variable: module,
+        value: Math.round(tti.toFixed(2))
+      })
+    });
+  }catch(e){
+    console.log(e);
+  }
+}
 const initialize = (GAConfigs) =>{
   if (isEmpty(GAConfigs)) {
     warn("Cannot initialize empty object");
@@ -58,8 +111,9 @@ const errorTracks = () => {
     const message = [
       'Message: ' + msg,
       'URL: ' + url,
-      'Column: ' + columnNo,
-      'Error object: ' + JSON.stringify(error)
+      'LineNo: ' + lineNo,
+      'ColumnNo: ' + columnNo,
+      'Error object: ' + JSON.stringify(error),
     ].join(' - ');
     tracker.trackException({
       description: message,
@@ -67,39 +121,39 @@ const errorTracks = () => {
     });
   };
 }
+const getCallerName = () => {
+  let nameTrace;
+  try {
+    throw new Error();
+  } catch (e) {
+    // Error.prototype.stack Manually throw an error and catch the function name by tracing the stack
+    //As per MDN, the use of Error.prototype.stack is discouraged because of it's non-standard behaviour and it's behaviour might change on different browsers
+    //once we find better solution we will make the changes
+    let stackLines = e.stack.split('\n');
+    let callerIndex = 0;
+    for (let i in stackLines) {
+      if (stackLines.hasOwnProperty(i)) {
+        if (!stackLines[i].match(/http[s]?:\/\//)) continue;
+        callerIndex = Number(i) + 2;
+        break;
+      }
+    }
+    nameTrace = stackLines[callerIndex].match(/([^(]+)@|at ([^(]+) \(/);
+    if (nameTrace === null) {
+      callerIndex = callerIndex - 2;
+      nameTrace = stackLines[callerIndex].match(/([^(]+)@|at ([^(]+) \(/);
+    }
+  }
+  return nameTrace !== null ? nameTrace[1] || nameTrace[2] : '';
+}
 
-// ttiPolyfill.getFirstConsistentlyInteractive().then(tti => {
-//   console.log('performance tti', tti);
-// });
-
-// const callback = list => {
-//   list.getEntries().forEach(entry => {
-//     console.log('performance callback entry', entry);
-//     console.log(
-//       'performance callback server latentcy',
-//       entry.responseStart - entry.requestStart,
-//     );
-//     console.log(
-//       'performance callback download time',
-//       entry.responseEnd - entry.responseStart,
-//     );
-//     console.log(
-//       'performance callback load time',
-//       entry.responseEnd - entry.requestStart,
-//     );
-//   });
-// };
 
-// var observer = new PerformanceObserver(callback);
-// observer.observe({ entryTypes: ['navigation'] });
-// var perfData = window.performance.timing;
-// var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
-// console.log('Performance metrics', perfData, pageLoadTime);
 
 export default{
   initialize,
   timeTracker,
   tracker,
   routeTrackerWrapper,
-  setCustomDimension
+  setCustomDimension,
+  getCallerName,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/cap-ui-utils",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "Utility functions shared accross all the modules",
   "main": "index.js",
   "scripts": {