@capillarytech/cap-ui-utils 1.2.2 → 1.2.4

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,18 +10,18 @@ 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(trackUIError){
+    errorTracks();
   }
-  if(GAConfigs.trackError){
-     //Track Error
-    window.addEventListener('error', (e)  =>{
-      tracker.trackException(`UI Error ${e.message}`);
-    });
+  if(trackLoadPerformance){
+    loadPerformanceTracking(trackLoadPerformance);
   }
   eventsAfterInitialize();
   log("Cap GA initialized");
@@ -28,19 +29,67 @@ const _initialize = (GAConfigs) => {
 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");
     return;
   }
   for ( const config in GAConfigs) {
-    if (isEmpty(GAConfigs[config])) {
+    if (!GAConfigs[config]) {
       warn("Config is empty");
       return;
     }
   }
   _initialize(GAConfigs);
-  
   return true;
 }
 const eventsAfterInitialize = () => {
@@ -52,39 +101,56 @@ const eventsAfterInitialize = () => {
   });
 }
 
+const errorTracks = () => {
+  window.onerror = function (msg, url, lineNo, columnNo, error) {
+    // to avoid 2 times same error log
+    if (error.hasBeenCaught !== undefined){
+      return false
+    }
+    error.hasBeenCaught = true
+    const message = [
+      'Message: ' + msg,
+      'URL: ' + url,
+    ].join(' - ');
+    tracker.trackException({
+      description: message,
+      fatal: true,
+    });
+  };
+}
+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/GA/utils/tracker.js

@@ -8,7 +8,7 @@ const trackTiming = () => {}
 
 const trackPageView = () => {}
 
-const trackException = (description, fatal = true) => {
+const trackException = ({description, fatal = true}) => {
   ReactGA.exception({
     description,
     fatal,

package/package.json

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