fix(content): Another metrics fix

Because:
- Our API expects integer values for all timing related metrics, but chrome can produce floats.

This Commit:
- Ensures that all timing metrics coming from speed strap are integers.

Author: dschom

packages/fxa-shared/speed-trap/events.js

@@ -7,15 +7,17 @@ class Events {
     this.events = [];
 
     if (!options || !options.performance) {
-      throw new Error('options.performance is required!')
+      throw new Error('options.performance is required!');
     }
     this.performance = options.performance;
   }
 
   capture(name) {
     this.events.push({
       type: name,
-      offset: this.performance.now(),
+
+      // Chrome produces floats, but our API expects integers
+      offset: parseInt(this.performance.now()),
     });
   }
 

packages/fxa-shared/speed-trap/navigation-timing.js

@@ -2,44 +2,48 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import {NAVIGATION_TIMING_FIELDS, OPTIONAL_NAVIGATION_TIMING_FIELDS} from './timing-fields';
+import {
+  NAVIGATION_TIMING_FIELDS,
+  OPTIONAL_NAVIGATION_TIMING_FIELDS,
+} from './timing-fields';
 
 const L2TimingsMap = {
-  'navigationStart': 'startTime',
-  'domLoading': 'domContentLoadedEventStart'
-}
+  navigationStart: 'startTime',
+  domLoading: 'domContentLoadedEventStart',
+};
 
 const TimingVersions = {
   L2: 'L2',
   L1: 'L1',
-  UNKNOWN: ''
-}
+  UNKNOWN: '',
+};
 
 class NavigationTiming {
   init(opts) {
-
     // A performance api must be provided
     if (!opts || !opts.performance) {
-      throw new Error('opts.performance is required!')
+      throw new Error('opts.performance is required!');
     }
     this.performance = opts.performance;
     this.useL1Timings = opts.useL1Timings;
   }
 
-  getTimingVersion () {
-    const version = this.getL2Timings() ? TimingVersions.L2 :
-                    this.getL1Timings() ? TimingVersions.L1 :
-                    TimingVersions.UNKNOWN;
+  getTimingVersion() {
+    const version = this.getL2Timings()
+      ? TimingVersions.L2
+      : this.getL1Timings()
+      ? TimingVersions.L1
+      : TimingVersions.UNKNOWN;
     return version;
   }
 
   getL2Timings() {
     if (
       !!this.performance &&
       !!this.performance.getEntriesByType &&
-      !!this.performance.getEntriesByType('navigation'))
-    {
-      return this.performance.getEntriesByType('navigation')[0]
+      !!this.performance.getEntriesByType('navigation')
+    ) {
+      return this.performance.getEntriesByType('navigation')[0];
     }
   }
 
@@ -48,14 +52,13 @@ class NavigationTiming {
   }
 
   diff() {
-
     // If we are using our fallback performance api (ie window.performance
     // doesn't  exist), don't return anything.
     if (this.performance.unreliable === true) {
       return undefined;
     }
 
-    const diff = {}
+    const diff = {};
     const l2Timings = this.getL2Timings();
     const l1Timings = this.getL1Timings();
 
@@ -64,11 +67,13 @@ class NavigationTiming {
       for (const key in NAVIGATION_TIMING_FIELDS) {
         const timing = l1Timings[key];
 
-        if (timing === 0 && OPTIONAL_NAVIGATION_TIMING_FIELDS.indexOf(key) >= 0) {
+        if (
+          timing === 0 &&
+          OPTIONAL_NAVIGATION_TIMING_FIELDS.indexOf(key) >= 0
+        ) {
           // A time value of 0 for certain fields indicates a non-applicable value. Set to null.
           diff[key] = null;
-        }
-        else {
+        } else {
           // Compute the delta relative to navigation start. This removes any
           // ambiguity around what the 'start' or 'baseTime' time is. Since we
           // are sure the current set of navigation timings were created using
@@ -78,7 +83,7 @@ class NavigationTiming {
       }
     }
 
-    function diffL2 () {
+    function diffL2() {
       // If we have level 2 timings we can almost return the timings directly. We just have massage
       // a couple fields to keep it backwards compatible.
       for (const key in NAVIGATION_TIMING_FIELDS) {
@@ -90,18 +95,22 @@ class NavigationTiming {
     // Case for testing. We should always try to use l2, but if explicitly requested use L1.
     if (this.useL1Timings && l1Timings) {
       diffL1();
-    }
-    else if (l2Timings) {
+    } else if (l2Timings) {
       diffL2();
-    }
-    else if (l1Timings) {
+    } else if (l1Timings) {
       diffL1();
     }
 
-    // We shouldn't see any negative values. If we do something went very wrong.
-    // We will use -11111 as a magic number to ensure a sentry error is captured,
-    // and it's easy to spot.
     for (const key in NAVIGATION_TIMING_FIELDS) {
+      // We expect that all values are integer values, Chrome will produce floating
+      // point values that we must convert.
+      if (typeof diff[key] === 'number') {
+        diff[key] = parseInt(diff[key]);
+      }
+
+      // We shouldn't see any negative values. If we do something went very wrong.
+      // We will use -11111 as a magic number to ensure a sentry error is captured,
+      // and it's easy to spot.
       if (diff[key] < 0) {
         diff[key] = -11111;
       }

packages/fxa-shared/speed-trap/speed-trap.js

@@ -15,19 +15,19 @@ var SpeedTrap = {
     // reduced functionality. The exact performance API can also be passed in as option
     // for testing purposes.
     this.performance = options.performance || getPerformanceApi();
-    this.baseTime = this.performance.timeOrigin;
+    this.baseTime = parseInt(this.performance.timeOrigin);
 
     this.navigationTiming = Object.create(NavigationTiming);
     this.navigationTiming.init({
       performance: this.performance,
-      useL1Timings: options.useL1Timings
+      useL1Timings: options.useL1Timings,
     });
 
     this.timers = Object.create(Timers);
-    this.timers.init({performance: this.performance});
+    this.timers.init({ performance: this.performance });
 
     this.events = Object.create(Events);
-    this.events.init({performance: this.performance});
+    this.events.init({ performance: this.performance });
 
     this.uuid = guid();
 
@@ -106,7 +106,7 @@ var SpeedTrap = {
       // performance.timeOrigin or performance.timings.navigationStart and get a valid value.
       // It's very likely the performance API is using a monotonic clock that does not match our
       // current system clock.
-      duration: this.performance.now(),
+      duration: parseInt(this.performance.now()),
       timers: this.timers.get(),
       events: this.events.get(),
     };
@@ -122,8 +122,9 @@ var SpeedTrap = {
    * Note: performance.now() will likely differ from Date.now() and is not expected to be the real
    * time. Please be aware of what underlying implementation is in use when calling this function.
    */
-  now: function() {
-    return this.performance.timeOrigin + this.performance.now();
+  now: function () {
+    // Chrome's performance api returns floats, but our API requires integers.
+    return parseInt(this.performance.timeOrigin + this.performance.now());
   },
 
   /**
@@ -135,7 +136,7 @@ var SpeedTrap = {
       return this.performance.isInSuspectState();
     }
     return false;
-  }
+  },
 };
 
 export default Object.create(SpeedTrap);