diff options
Diffstat (limited to 'app/assets/javascripts/performance_bar')
-rw-r--r-- | app/assets/javascripts/performance_bar/performance_bar_log.js | 25 |
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; |