Logging Long Tasks in your browser and Sending the data to be logged in your Analytics Platform

performance-observer.js

const observer = new PerformanceObserver((list) => {
  const freezeThreshold = 300;
  const perfEntries = list.getEntries();
  // Get a list of all the `longtask` entries to be added as payload for your Analytics API
  const analyticsData = perfEntries.filter(entry => entry.duration > freezeThreshold);
  // In case of any longtask found, it sends the data to be logged in your Analytics platform
  if (analyticsData.length > 0) {
    navigator.sendBeacon('/my-analytics-log-platform', analyticsData);
  }
});

// register observer for long task notifications
observer.observe({entryTypes: ['longtask']});
// Long script execution after this will result in queueing
// and receiving 'longtask' entries in the observer.