Adds Web Vitals log to performance bar

This adds the webvitals library to the performance bar mode

app/assets/javascripts/performance_bar/index.js

@@ -5,6 +5,8 @@ import axios from '~/lib/utils/axios_utils';
 import PerformanceBarService from './services/performance_bar_service';
 import PerformanceBarStore from './stores/performance_bar_store';
 
+import initPerformanceBarLog from './performance_bar_log';
+
 const initPerformanceBar = el => {
   const performanceBarData = el.dataset;
 
@@ -128,4 +130,6 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 });
 
+initPerformanceBarLog();
+
 export default initPerformanceBar;

app/assets/javascripts/performance_bar/performance_bar_log.js

+/* eslint-disable no-console */
+import { getCLS, getFID, getLCP } from 'web-vitals';
+
+const initVitalsLog = () => {
+  const reportVital = data => {
+    console.log(`${String.fromCodePoint(0x1f4c8)} ${data.name} : `, data);
+  };
+
+  console.log(
+    `${String.fromCodePoint(
+      0x1f4d1,
+    )} To get the final web vital numbers reported you maybe need to switch away and back to the tab`,
+  );
+  getCLS(reportVital);
+  getFID(reportVital);
+  getLCP(reportVital);
+};
+
+const initPerformanceBarLog = () => {
+  console.log(
+    `%c ${String.fromCodePoint(0x1f98a)} GitLab performance bar`,
+    'width:100%;background-color: #292961; color: #FFFFFF; font-size:24px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto; padding: 10px;display:block;padding-right: 100px;',
+  );
+
+  initVitalsLog();
+};
+
+export default initPerformanceBarLog;

package.json

@@ -153,6 +153,7 @@
     "vue-virtual-scroll-list": "^1.4.4",
     "vuedraggable": "^2.23.0",
     "vuex": "^3.5.1",
+    "web-vitals": "^0.2.4",
     "webpack": "^4.42.0",
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.11",

yarn.lock

@@ -12419,6 +12419,11 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+web-vitals@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-0.2.4.tgz#ec3df43c834a207fd7cdefd732b2987896e08511"
+  integrity sha512-6BjspCO9VriYy12z356nL6JBS0GYeEcA457YyRzD+dD6XYCQ75NKhcOHUMHentOE7OcVCIXXDvOm0jKFfQG2Gg==
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"