+
diff --git a/app/assets/javascripts/performance_bar/performance_bar_log.js b/app/assets/javascripts/performance_bar/performance_bar_log.js
index 638c544f2e1..f9928ab51b5 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_MARK: String.fromCodePoint(0x1f3af),
+ PERFORMANCE_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;
diff --git a/app/assets/javascripts/performance_constants.js b/app/assets/javascripts/performance_constants.js
index 1a53b925aa4..8f48598eca8 100644
--- a/app/assets/javascripts/performance_constants.js
+++ b/app/assets/javascripts/performance_constants.js
@@ -1,3 +1,6 @@
+export const PERFORMANCE_TYPE_MARK = 'mark';
+export const PERFORMANCE_TYPE_MEASURE = 'measure';
+
//
// SNIPPET namespace
//
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 924cdeebba1..0f5a8cb8fbf 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -1,7 +1,7 @@