Frontend Monitoring Platform: Data Collection and Reporting Techniques

A complete frontend monitoring platform consists of data collection & reporting, data processing & storage, and data visualization. This article focuses on the first part: data collection and reporting.

It introduces core web performance metrics defined by Chrome—First Paint (FP), First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS)—and explains how to obtain them using the PerformanceObserver API.

Example code for measuring FP:

const entryHandler = (list) => {
for (const entry of list.getEntries()) {
if (entry.name === 'first-paint') {
observer.disconnect();
}
console.log(entry);
}
};
const observer = new PerformanceObserver(entryHandler);
observer.observe({ type: 'paint', buffered: true });

Similar snippets are provided for FCP, LCP, and CLS, showing how to extract the startTime or value fields that represent the rendering time or layout‑shift score.

The article also covers traditional load events (DOMContentLoaded, load) and how to capture first‑screen render time with MutationObserver and requestAnimationFrame, including code to determine whether a DOM node is within the viewport.

Resource loading performance is monitored via PerformanceObserver on “resource” entries, extracting timing details such as DNS, TCP, TTFB, and cache status, with a helper function to detect cache hits:

function isCache(entry) {
// direct cache read or 304
return entry.transferSize === 0 || (entry.transferSize !== 0 && entry.encodedBodySize === 0);
}

Error monitoring is implemented by listening to error , unhandledrejection , and window.onerror events, as well as Vue’s Vue.config.errorHandler , sending detailed error information to the backend.

Behavioral data collection includes page view (PV), page stay duration, scroll depth, click events, and navigation changes (popstate, hashchange), each with corresponding JavaScript examples that record timestamps, element details, and page URLs.

Data reporting uses a combination of navigator.sendBeacon and XMLHttpRequest, with fallback strategies and batching logic to ensure reliable transmission before page unload.

In summary, the article provides a practical, code‑driven guide for building a frontend monitoring SDK that captures performance, error, and user‑behavior metrics, enabling developers to analyze and improve web application quality.