1 files changed, 25 insertions, 0 deletions
diff --git a/app/assets/javascripts/performance_bar/performance_bar_log.js b/app/assets/javascripts/performance_bar/performance_bar_log.js
index 638c544f2e1..55b4d626e56 100644
--- a/app/assets/javascripts/performance_bar/performance_bar_log.js
+++ b/app/assets/javascripts/performance_bar/performance_bar_log.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
 import { getCLS, getFID, getLCP } from 'web-vitals';
+import { PERFORMANCE_TYPE_MARK, PERFORMANCE_TYPE_MEASURE } from '~/performance_constants';
 
 const initVitalsLog = () => {
   const reportVital = data => {
@@ -16,6 +17,29 @@ const initVitalsLog = () => {
   getLCP(reportVital);
 };
 
+const logUserTimingMetrics = () => {
+  const metricsProcessor = list => {
+    const entries = list.getEntries();
+    entries.forEach(entry => {
+      const { name, entryType, startTime, duration } = entry;
+      const typeMapper = {
+        [PERFORMANCE_TYPE_MARK]: String.fromCodePoint(0x1f3af),
+        [PERFORMANCE_TYPE_MEASURE]: String.fromCodePoint(0x1f4d0),
+      };
+      console.group(`${typeMapper[entryType]} ${name}`);
+      if (entryType === PERFORMANCE_TYPE_MARK) {
+        console.log(`Start time: ${startTime}`);
+      } else if (entryType === PERFORMANCE_TYPE_MEASURE) {
+        console.log(`Duration: ${duration}`);
+      }
+      console.log(entry);
+      console.groupEnd();
+    });
+  };
+  const observer = new PerformanceObserver(metricsProcessor);
+  observer.observe({ entryTypes: [PERFORMANCE_TYPE_MEASURE, PERFORMANCE_TYPE_MARK] });
+};
+
 const initPerformanceBarLog = () => {
   console.log(
     `%c ${String.fromCodePoint(0x1f98a)} GitLab performance bar`,
@@ -23,6 +47,7 @@ const initPerformanceBarLog = () => {
   );
 
   initVitalsLog();
+  logUserTimingMetrics();
 };
 
 export default initPerformanceBarLog;