Merge pull request #4076 from overleaf/jpa-events-split-test

[misc] submit events and prepare roll-out for pdf caching w/ split test

GitOrigin-RevId: a7b7af65e1adf5bf003b65d96f1641a343b4b09c

services/web/frontend/js/ide/pdf/controllers/PdfController.js

@@ -7,6 +7,7 @@ import { rootContext } from '../../../shared/context/root-context'
 import 'ace/ace'
 import getMeta from '../../../utils/meta'
 import { waitForServiceWorker } from '../../pdfng/directives/serviceWorkerManager'
+import { trackPdfDownload } from './PdfJsMetrics'
 
 const AUTO_COMPILE_MAX_WAIT = 5000
 // We add a 1 second debounce to sending user changes to server if they aren't
@@ -405,25 +406,13 @@ App.controller(
         // convert the qs hash into a query string and append it
         $scope.pdf.url += createQueryString(qs)
 
-        const {
-          onFirstRenderDone,
-          firstRenderDone,
-          updateConsumedBandwidth,
-        } = trackPDFDownload()
-        $scope.pdf.firstRenderDone = firstRenderDone
-        $scope.pdf.updateConsumedBandwidth = updateConsumedBandwidth
-        const { serviceWorkerMetrics } = response
-
-        onFirstRenderDone.then(({ latencyFetch, latencyRender }) => {
-          sl_console.log(
-            JSON.stringify({
-              latencyFetch,
-              latencyRender,
-              totalBandwidthReportedByPdfJs,
-              serviceWorkerMetrics,
-            })
+        if (getMeta('ol-trackPdfDownload')) {
+          const { firstRenderDone, updateConsumedBandwidth } = trackPdfDownload(
+            response
           )
-        })
+          $scope.pdf.firstRenderDone = firstRenderDone
+          $scope.pdf.updateConsumedBandwidth = updateConsumedBandwidth
+        }
 
         // Save all downloads as files
         qs.popupDownload = true
@@ -572,33 +561,6 @@ App.controller(
       )
     }
 
-    let totalBandwidthReportedByPdfJs = 0
-    function trackPDFDownload() {
-      const t0 = performance.now()
-      let bandwidth = 0
-      function firstRenderDone({ timePDFFetched, timePDFRendered }) {
-        const latencyFetch = timePDFFetched - t0
-        // The renderer does not yield in case the browser tab is hidden.
-        // It will yield when the browser tab is visible again.
-        // This will skew our performance metrics for rendering!
-        const latencyRender = timePDFRendered - t0
-        done({ latencyFetch, latencyRender })
-      }
-      function updateConsumedBandwidth(bytes) {
-        totalBandwidthReportedByPdfJs += bytes - bandwidth
-        bandwidth = bytes
-      }
-      let done
-      const onFirstRenderDone = new Promise(resolve => {
-        done = resolve
-      })
-      return {
-        onFirstRenderDone,
-        firstRenderDone,
-        updateConsumedBandwidth,
-      }
-    }
-
     function fetchLogs(fileByPath, options) {
       let blgFile, chktexFile, logFile
 

services/web/frontend/js/ide/pdf/controllers/PdfJsMetrics.js

@@ -0,0 +1,60 @@
+import { v4 as uuid } from 'uuid'
+import { sendMBSampled } from '../../../infrastructure/event-tracking'
+
+const pdfJsMetrics = {
+  id: uuid(),
+  epoch: Date.now(),
+  totalBandwidth: 0,
+}
+
+const SAMPLING_RATE = 0.01
+
+export function trackPdfDownload(response) {
+  const { serviceWorkerMetrics, stats, timings } = response
+
+  const t0 = performance.now()
+  let bandwidth = 0
+  function firstRenderDone({ timePDFFetched, timePDFRendered }) {
+    const latencyFetch = timePDFFetched - t0
+    // The renderer does not yield in case the browser tab is hidden.
+    // It will yield when the browser tab is visible again.
+    // This will skew our performance metrics for rendering!
+    const latencyRender = timePDFRendered - timePDFFetched
+    done({ latencyFetch, latencyRender })
+  }
+  function updateConsumedBandwidth(bytes) {
+    pdfJsMetrics.totalBandwidth += bytes - bandwidth
+    bandwidth = bytes
+  }
+  let done
+  const onFirstRenderDone = new Promise(resolve => {
+    done = resolve
+  })
+
+  // Submit latency along with compile context.
+  onFirstRenderDone.then(({ latencyFetch, latencyRender }) => {
+    submitCompileMetrics({
+      latencyFetch,
+      latencyRender,
+      stats,
+      timings,
+    })
+  })
+  // Submit bandwidth counter separate from compile context.
+  submitPDFBandwidth({ pdfJsMetrics, serviceWorkerMetrics })
+
+  return {
+    firstRenderDone,
+    updateConsumedBandwidth,
+  }
+}
+
+function submitCompileMetrics(metrics) {
+  sl_console.log('/event/compile-metrics', JSON.stringify(metrics))
+  sendMBSampled('compile-metrics', metrics, SAMPLING_RATE)
+}
+
+function submitPDFBandwidth(metrics) {
+  sl_console.log('/event/pdf-bandwidth', JSON.stringify(metrics))
+  sendMBSampled('pdf-bandwidth', metrics, SAMPLING_RATE)
+}

services/web/frontend/js/infrastructure/event-tracking.js

@@ -11,3 +11,9 @@ export function sendMB(key, body = {}) {
     // ignore errors
   })
 }
+
+export function sendMBSampled(key, body = {}, rate = 0.01) {
+  if (Math.random() < rate) {
+    sendMB(key, body)
+  }
+}

services/web/frontend/js/serviceWorker.js

@@ -1,9 +1,11 @@
+import { v4 as uuid } from 'uuid'
 const COMPILE_REQUEST_MATCHER = /^\/project\/[0-9a-f]{24}\/compile$/
 const MIN_CHUNK_SIZE = 128 * 1024
 
 const PDF_FILES = new Map()
 
 const METRICS = {
+  id: uuid(),
   epoch: Date.now(),
   cachedBytes: 0,
   fetchedBytes: 0,