feat(telemetry): Refactor Metrics Tracking from background service_worker (#1172)

* feat(telemetry): ♻️ Init Telemetry away from background service_worker.

* feat(telemetry): ♻️ Track metrics from page context instead of service_worker context

Author: whizzzkid

add-on/src/background/background.js

@@ -13,7 +13,6 @@ browser.runtime.setUninstallURL(getUninstallURL(browser))
 
 // init add-on after all libs are loaded
 document.addEventListener('DOMContentLoaded', async () => {
-  browser.runtime.sendMessage({ telemetry: { trackView: 'background' } })
   // setting debug namespaces require page reload to get applied
   const debugNs = (await browser.storage.local.get({ logNamespaces: optionDefaults.logNamespaces })).logNamespaces
   if (debugNs !== localStorage.debug) {

add-on/src/landing-pages/welcome/store.js

@@ -1,6 +1,7 @@
 'use strict'
 /* eslint-env browser, webextensions */
 import browser from 'webextension-polyfill'
+import { handleConsentFromState, trackView } from '../../lib/telemetry.js'
 
 export default function createWelcomePageStore (i18n, runtime) {
   return function welcomePageStore (state, emitter) {
@@ -9,7 +10,8 @@ export default function createWelcomePageStore (i18n, runtime) {
     state.webuiRootUrl = null
     let port
     emitter.on('DOMContentLoaded', async () => {
-      browser.runtime.sendMessage({ telemetry: { trackView: 'welcome' } })
+      handleConsentFromState(state)
+      trackView('welcome')
       emitter.emit('render')
       port = runtime.connect({ name: 'browser-action-port' })
       port.onMessage.addListener(async (message) => {

add-on/src/lib/ipfs-companion.js

@@ -23,7 +23,6 @@ import createRuntimeChecks from './runtime-checks.js'
 import { createContextMenus, findValueForContext, contextMenuCopyAddressAtPublicGw, contextMenuCopyRawCid, contextMenuCopyCanonicalAddress, contextMenuViewOnGateway, contextMenuCopyPermalink, contextMenuCopyCidAddress } from './context-menus.js'
 import { registerSubdomainProxy } from './http-proxy.js'
 import { runPendingOnInstallTasks } from './on-installed.js'
-import { handleConsentFromState, startSession, endSession, trackView } from './telemetry.js'
 const log = debug('ipfs-companion:main')
 log.error = debug('ipfs-companion:main:error')
 
@@ -57,11 +56,8 @@ export default async function init () {
     runtime = await createRuntimeChecks(browser)
     state = initState(options)
     notify = createNotifier(getState)
-    // ensure consent is set properly on app init
-    handleConsentFromState(state)
 
     if (state.active) {
-      startSession()
       // It's ok for this to fail, node might be unavailable or mis-configured
       try {
         ipfs = await initIpfsClient(browser, state)
@@ -172,16 +168,6 @@ export default async function init () {
       const result = validIpfsOrIpns(path) ? resolveToPublicUrl(path) : null
       return Promise.resolve({ pubGwUrlForIpfsOrIpnsPath: result })
     }
-    if (request.telemetry) {
-      return Promise.resolve(onTelemetryMessage(request.telemetry, sender))
-    }
-  }
-
-  function onTelemetryMessage (request, sender) {
-    if (request.trackView) {
-      const { version } = browser.runtime.getManifest()
-      return trackView(request.trackView, { version })
-    }
   }
 
   // PORTS (connection-based messaging)
@@ -568,8 +554,6 @@ export default async function init () {
           await registerSubdomainProxy(getState, runtime)
           shouldRestartIpfsClient = true
           shouldStopIpfsClient = !state.active
-          // Any time the extension switches active state, start or stop the current session.
-          state.active ? startSession() : endSession()
           break
         case 'ipfsNodeType':
           if (change.oldValue !== braveNodeType && change.newValue === braveNodeType) {
@@ -636,8 +620,6 @@ export default async function init () {
           break
       }
     }
-    // ensure consent is set properly on state changes
-    handleConsentFromState(state)
 
     if ((state.active && shouldRestartIpfsClient) || shouldStopIpfsClient) {
       try {

add-on/src/lib/telemetry.js

@@ -1,3 +1,4 @@
+import browser from 'webextension-polyfill'
 import MetricsProvider from '@ipfs-shipyard/ignite-metrics/vanilla'
 import debug from 'debug'
 
@@ -36,7 +37,8 @@ export function handleConsentFromState (state) {
 const ignoredViewsRegex = []
 export function trackView (view, segments) {
   log('trackView called for view: ', view)
-  metricsProvider.trackView(view, ignoredViewsRegex, segments)
+  const { version } = browser.runtime.getManifest()
+  metricsProvider.trackView(view, ignoredViewsRegex, { ...segments, version })
 }
 
 export const startSession = (...args) => metricsProvider.startSession(...args)

add-on/src/options/store.js

@@ -4,6 +4,7 @@
 import browser from 'webextension-polyfill'
 import { optionDefaults } from '../lib/options.js'
 import createRuntimeChecks from '../lib/runtime-checks.js'
+import { handleConsentFromState, trackView } from '../lib/telemetry.js'
 
 // The store contains and mutates the state for the app
 export default function optionStore (state, emitter) {
@@ -20,7 +21,8 @@ export default function optionStore (state, emitter) {
   }
 
   emitter.on('DOMContentLoaded', async () => {
-    browser.runtime.sendMessage({ telemetry: { trackView: 'options' } })
+    handleConsentFromState(state)
+    trackView('options')
     updateStateOptions()
     browser.storage.onChanged.addListener(updateStateOptions)
   })

add-on/src/popup/browser-action/store.js

@@ -7,6 +7,7 @@ import { browserActionFilesCpImportCurrentTab } from '../../lib/ipfs-import.js'
 import { ipfsContentPath } from '../../lib/ipfs-path.js'
 import { welcomePage, optionsPage } from '../../lib/constants.js'
 import { contextMenuViewOnGateway, contextMenuCopyAddressAtPublicGw, contextMenuCopyPermalink, contextMenuCopyRawCid, contextMenuCopyCanonicalAddress, contextMenuCopyCidAddress } from '../../lib/context-menus.js'
+import { endSession, handleConsentFromState, startSession, trackView } from '../../lib/telemetry.js'
 
 // The store contains and mutates the state for the app
 export default (state, emitter) => {
@@ -38,7 +39,8 @@ export default (state, emitter) => {
   let port
 
   emitter.on('DOMContentLoaded', async () => {
-    browser.runtime.sendMessage({ telemetry: { trackView: 'browser-action' } })
+    handleConsentFromState(state)
+    trackView('browser-action')
 
     // initial render with status stub
     emitter.emit('render')
@@ -205,6 +207,7 @@ export default (state, emitter) => {
     const prev = state.active
     state.active = !prev
     if (!state.active) {
+      endSession()
       state.gatewayAddress = state.pubGwURLString
       state.ipfsApiUrl = null
       state.gatewayVersion = null
@@ -213,6 +216,8 @@ export default (state, emitter) => {
     }
     try {
       await browser.storage.local.set({ active: state.active })
+      startSession()
+      handleConsentFromState(state)
     } catch (error) {
       console.error(`Unable to update global Active flag due to ${error}`)
       state.active = prev

add-on/src/popup/quick-import.js

@@ -12,6 +12,7 @@ import { formatImportDirectory } from '../lib/ipfs-import.js'
 import all from 'it-all'
 import drop from 'drag-and-drop-files'
 import { filesize } from 'filesize'
+import { handleConsentFromState, trackView } from '../lib/telemetry.js'
 
 document.title = browser.i18n.getMessage('quickImport_page_title')
 
@@ -48,7 +49,8 @@ function quickImportStore (state, emitter) {
   let port
 
   emitter.on('DOMContentLoaded', async () => {
-    browser.runtime.sendMessage({ telemetry: { trackView: 'quick-import' } })
+    handleConsentFromState(state)
+    trackView('quick-import')
     // initialize connection to the background script which will trigger UI updates
     port = browser.runtime.connect({ name: 'browser-action-port' })
     port.onMessage.addListener(async (message) => {

add-on/src/recovery/recovery.js

@@ -7,6 +7,7 @@ import browser, { i18n, runtime } from 'webextension-polyfill'
 import { nodeOffSvg } from '../landing-pages/welcome/page.js'
 import createWelcomePageStore from '../landing-pages/welcome/store.js'
 import { optionsPage } from '../lib/constants.js'
+import { handleConsentFromState, trackView } from '../lib/telemetry.js'
 import './recovery.css'
 
 const app = choo()
@@ -19,7 +20,8 @@ const optionsPageLink = html`<a class="navy link underline-under hover-aqua" id=
 app.use(createWelcomePageStore(i18n, runtime))
 // Register our single route
 app.route('*', (state) => {
-  browser.runtime.sendMessage({ telemetry: { trackView: 'recovery' } })
+  handleConsentFromState(state)
+  trackView('recovery')
   const { hash } = window.location
   const { href: publicURI } = new URL(decodeURIComponent(hash.slice(1)))