2020-09-16 12:10:15 +00:00
|
|
|
/* eslint-disable no-console */
|
|
|
|
import { getCLS, getFID, getLCP } from 'web-vitals';
|
2020-09-24 18:09:51 +00:00
|
|
|
import { PERFORMANCE_TYPE_MARK, PERFORMANCE_TYPE_MEASURE } from '~/performance_constants';
|
2020-09-16 12:10:15 +00:00
|
|
|
|
|
|
|
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);
|
|
|
|
};
|
|
|
|
|
2020-09-24 18:09:51 +00:00
|
|
|
const logUserTimingMetrics = () => {
|
|
|
|
const metricsProcessor = list => {
|
|
|
|
const entries = list.getEntries();
|
|
|
|
entries.forEach(entry => {
|
|
|
|
const { name, entryType, startTime, duration } = entry;
|
|
|
|
const typeMapper = {
|
2020-09-25 18:09:46 +00:00
|
|
|
[PERFORMANCE_TYPE_MARK]: String.fromCodePoint(0x1f3af),
|
|
|
|
[PERFORMANCE_TYPE_MEASURE]: String.fromCodePoint(0x1f4d0),
|
2020-09-24 18:09:51 +00:00
|
|
|
};
|
|
|
|
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] });
|
|
|
|
};
|
|
|
|
|
2020-09-16 12:10:15 +00:00
|
|
|
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();
|
2020-09-24 18:09:51 +00:00
|
|
|
logUserTimingMetrics();
|
2020-09-16 12:10:15 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default initPerformanceBarLog;
|