Some more work on metrics (WIP).

Author: sebadoom

src/editor/index.js

@@ -9,7 +9,8 @@ import {
   stringify,
   fixEditorHeight,
   getSelectedAlgorithm,
-  disableUnsupportedAlgorithms
+  disableUnsupportedAlgorithms,
+  getSafeTokenInfo
 } from './utils.js';
 import { sign, verify, decode } from './jwt.js';
 import EventManager from './event-manager.js';
@@ -19,6 +20,7 @@ import {
   minSecretLengthCheck,
   setupSecretLengthTooltip
 } from './secret-length-tooltip.js';
+import * as metrics from '../metrics.js';
 import {
   algorithmSelect,
   signatureStatusElement,
@@ -46,6 +48,17 @@ import log from 'loglevel';
 // passed to the event manager.
 const eventManager = new EventManager();
 
+function trackToken(jwt, operation) {
+  const tokenInfo = getSafeTokenInfo(jwt);
+
+  metric.track('editor-jwt-tracked', {
+    operation: operation,
+    tokenInfo: tokenInfo
+  });
+
+  return tokenInfo.hash;
+}
+
 function isSharedSecretAlgorithm(algorithm) {
   return algorithm && algorithm.indexOf('HS') === 0;
 }
@@ -169,6 +182,8 @@ function setAlgorithmInHeader(algorithm) {
 function algorithmChangeHandler() {
   const algorithm = getSelectedAlgorithm();
 
+  metrics.track('editor-algorithm-selected', { algorithm: algorithm });
+
   displaySecretOrKeys(algorithm);
 
   if(isDefaultToken(getTrimmedValue(tokenEditor))) {
@@ -223,13 +238,15 @@ function encodeToken() {
     sign(header, payload, key, secretBase64Checkbox.checked).then(encoded => {
       eventManager.withDisabledEvents(() => {
         tokenEditor.setValue(encoded);
+        trackToken(encoded, 'encode');
       });
     }).catch(e => {
       eventManager.withDisabledEvents(() => {
         log.warn('Failed to sign/encode token: ', e);
         markAsInvalid();
         tokenEditor.setValue('');
-      })
+      });
+      metrics.track('editor-encoding-error');
     }).finally(() => {
       verifyToken();
     });
@@ -244,9 +261,15 @@ function decodeToken() {
       const jwt = getTrimmedValue(tokenEditor);
       const decoded = decode(jwt);
 
+      const tokenHash = trackToken(jwt, 'decode');
+
       selectAlgorithm(decoded.header.alg);
       if(isPublicKeyAlgorithm(decoded.header.alg)) {
         downloadPublicKeyIfPossible(decoded).then(publicKey => {
+          metrics.track('editor-jwt-public-key-downloaded', {
+            tokenHash: tokenHash
+          });
+
           eventManager.withDisabledEvents(() => {
             publicKeyTextArea.value = publicKey;
             verifyToken();
@@ -259,11 +282,20 @@ function decodeToken() {
 
       if(decoded.errors) {
         markAsInvalidWithElement(editorElement, false);
+        metrics.track('editor-jwt-invalid', {
+          reason: `partial decode`,
+          tokenHash: tokenHash
+        });
       } else {
         verifyToken();
       }
     } catch(e) {
       log.warn('Failed to decode token: ', e);
+
+      metrics.track('editor-jwt-invalid', {
+        reason: `failed to decode token`,
+        tokenHash: trackToken(jwt)
+      });
     }
   });
 }
@@ -272,8 +304,14 @@ function verifyToken() {
   const jwt = getTrimmedValue(tokenEditor);
   const decoded = decode(jwt);
 
+  const tokenHash = trackToken(jwt, 'verify');
+
   if(!decoded.header.alg || decoded.header.alg === 'none') {
     markAsInvalid();
+    metrics.track('editor-jwt-invalid', {
+      reason: `header.alg value is ${decoded.header.alg}`,
+      tokenHash: tokenHash
+    });
     return;
   }
 
@@ -285,8 +323,15 @@ function verifyToken() {
   verify(jwt, publicKeyOrSecret, secretBase64Checkbox.checked).then(valid => {
     if(valid) {
       markAsValid();
+      metrics.track('editor-jwt-verified', {
+        tokenHash: tokenHash
+      });
     } else {
       markAsInvalid();
+      metrics.track('editor-jwt-invalid', {
+        reason: 'invalid signature',
+        tokenHash: tokenHash
+      });
     }
   });
 }

src/editor/utils.js

@@ -1,11 +1,16 @@
 import { isWideScreen } from '../utils.js';
+import * as metrics from '../metrics.js';
+import * as jwt from './jwt.js';
+import forge from 'node-forge';
 import {
   algorithmSelect,
   algorithmEs512,
   editorElement,
   decodedElement
 } from '../dom-elements.js';
 
+const sha256 = forge.md.sha256.create();
+
 export function getTrimmedValue(instance) {
   const value = instance.getValue();
   if (!value) {
@@ -40,5 +45,42 @@ export function disableUnsupportedAlgorithms() {
   // TODO: test supported algorithms in runtime
   if(isSafari()) {
     algorithmEs512.disabled = true;
+    metrics.track('editor-disabled-es512-safari');
+  }
+}
+
+export function getSafeTokenInfo(jwt) {
+  try {
+    sha256.start();
+    sha256.update(jwt);
+
+    const result = {
+      hash: sha256.digest().toHex()
+    };
+
+    try {
+      const decoded = jwt.decode(jwt);
+
+      return Object.assign(result, {
+        decodedWithErrors: decoded.errors,
+        header: {
+          alg: decoded.header.alg,
+        },
+        payload: {
+          // TODO
+        }
+      });
+    } catch(e) {
+      return Object.assign(result, {
+        error: 'error decoding token',
+      });
+    }
+  } catch(e) {
+    sha256.start();
+
+    return {
+      error: 'error reading token',
+      hash: sha256.digest().toHex() // Hash for empty string
+    };
   }
 }

src/website/metrics.js renamed to src/metrics.js

@@ -1,4 +1,5 @@
 import Analytics from 'analytics-node';
+import log from 'loglevel';
 
 let analytics;
 
@@ -8,6 +9,10 @@ export function init(key) {
 
 export function track(event, data) {
   if(analytics) {
-    analytics.track(event, data);
+    try {
+     analytics.track(event, data);
+    } catch(e) {
+      log.error(`Metrics library error: ${e}`);
+    }
   }
 }

src/share-button.js

@@ -1,21 +1,24 @@
 import { copyTokenLink } from './utils.js';
 import { getTokenEditorValue } from './editor';
+import * as metrics from './metrics.js';
 
 import strings from './strings.js';
 
 export function setupShareJwtButton(shareJwtElement, shareJwtTextElement) {
   shareJwtElement.addEventListener('click', event => {
     event.preventDefault();
 
+    metrics.track('editor-share-button-clicked');
+
     const value = getTokenEditorValue();
     if(value.token) {
       // If the selected algorithm does not use public keys, publicKey will be
       // undefined.
       const copiedUrl = copyTokenLink(value.token, value.publicKey);
 
-      // We cannot read the clipboard in headless Chrome, 
+      // We cannot read the clipboard in headless Chrome,
       // so we use this to let functional tests see the URL. See:
-      // https://github.com/GoogleChrome/puppeteer/issues/2147 
+      // https://github.com/GoogleChrome/puppeteer/issues/2147
       if(!window.test) {
         window.test = {};
       }

src/website/index.js

@@ -1,5 +1,5 @@
 import '../google-analytics.js';
-import * as metrics from './metrics.js';
+import * as metrics from '../metrics.js';
 import { setupNavbar } from './navbar.js';
 import { setupExtensionButton } from './extension.js';
 import { setupLibraries } from './libraries.js';
@@ -74,7 +74,7 @@ function setupMetrics() {
     }
 
     if(isPartiallyInViewport(debuggerSection)) {
-      once('debugger-visible', () => metrics.track('debugger-visible-once'));
+      once('editor-visible', () => metrics.track('editor-visible-once'));
     }
   });
 }

src/website/libraries.js

@@ -1,6 +1,6 @@
 import { safeLocalStorageSetItem } from '../utils.js';
 import { httpGet } from '../utils.js';
-import * as metrics from './metrics.js';
+import * as metrics from '../metrics.js';
 import {
   starsElements,
   librariesElement,
@@ -79,7 +79,25 @@ function getStarsForGitHubRepos() {
 }
 
 function setupMetrics() {
-  // TODO for clicks
+  const tracked = [{
+    selector: '.version p a',
+    event: 'libraries-jwt-vulns-link-clicked'
+  }, {
+    selector: '.maintainer a',
+    event: 'libraries-maintainer-link-clicked'
+  }, {
+    selector: '.repository a',
+    event: 'libraries-repository-link-clicked'
+  }];
+
+  tracked.forEach(t => {
+    const els = document.querySelectorAll(t.selector);
+    Array.prototype.forEach.call(els, el => {
+      el.addEventListener('click', () => {
+        metrics.track(t.event);
+      });
+    });
+  });
 }
 
 export function setupLibraries() {