chore: track web-vitals performance events COMPASS-5201 (#2553)

Author: addaleax

package-lock.json

@@ -246,7 +246,8 @@
     "sinon": "^8.1.1",
     "sinon-chai": "^3.7.0",
     "storage-mixin": "^4.7.0",
-    "uuid": "^3.0.0"
+    "uuid": "^3.0.0",
+    "web-vitals": "^2.1.2"
   },
   "optionalDependencies": {
     "vscode-windows-registry": "1.0.2"

packages/compass/package.json

@@ -30,6 +30,7 @@ var _ = require('lodash');
 var View = require('ampersand-view');
 var async = require('async');
 var ipc = require('hadron-ipc');
+var webvitals = require('web-vitals');
 
 var semver = require('semver');
 
@@ -53,7 +54,7 @@ ipc.once('app:launched', function() {
   }
 });
 
-const { log, mongoLogId, debug } =
+const { log, mongoLogId, debug, track } =
   require('@mongodb-js/compass-logging').createLoggerAndTelemetry('COMPASS-APP');
 
 window.addEventListener('error', (event) => {
@@ -119,6 +120,21 @@ var Application = View.extend({
     ipc.on('window:show-compass-tour', this.showTour.bind(this, true));
     ipc.on('window:show-network-optin', this.showOptIn.bind(this));
     ipc.on('window:show-security-panel', this.showSecurity.bind(this));
+
+    function trackPerfEvent({ name, value }) {
+      const fullName = {
+        'FCP': 'First Contentful Paint',
+        'LCP': 'Largest Contentful Paint',
+        'FID': 'First Input Delay',
+        'CLS': 'Cumulative Layout Shift'
+      }[name];
+      track(fullName, { value });
+    }
+
+    webvitals.getFCP(trackPerfEvent);
+    webvitals.getLCP(trackPerfEvent);
+    webvitals.getFID(trackPerfEvent);
+    webvitals.getCLS(trackPerfEvent);
   },
   startRouter: function() {
     if (this.router) {