Master Front‑End Monitoring: From Data Collection to Performance Metrics

Background

Our recent work focuses on the school open platform (Kāi​píng), which provides third‑party apps access to main endpoints such as WeChat and Feishu. To ensure stable integration, essential underlying capabilities like application monitoring are required. The following discussion draws heavily from our internal APM Web SDK, referred to as APM.

Monitoring Process

Data collection : Define which metrics to capture and how.

Data reporting : Send collected data using a chosen strategy.

Data cleaning & storage : Server validates and stores incoming data.

Data consumption : Visualize data in an APM dashboard and trigger alerts.

The article concentrates on the front‑end perspective of data collection and reporting.

Data Collection

Front‑end monitoring data can be grouped into three dimensions: environment information, exception data, and performance data.

Environment Information

Common environment fields (e.g., user agent, URL, device) provide extra dimensions for troubleshooting.

Exception Monitoring

JS Exceptions

Cross‑origin script errors appear as Script error.. To capture detailed errors, add crossorigin="anonymous" to script tags and ensure the server sends Access-Control-Allow-Origin: *.

Compilation vs Runtime Errors

Compilation errors are caught by IDEs and rarely reach production, so monitoring focuses on runtime errors such as SyntaxError caused by JSON parsing or browser compatibility issues.

Typical reporting strategies:

Sync try‑catch for manually caught synchronous errors.

Use window.onerror for uncaught synchronous errors.

Catch promise rejections with promise.catch.

Listen to unhandledrejection for uncaught promise rejections.

SourceMap

After collecting a JS error, SourceMap files uploaded to the monitoring backend allow the original source location to be reconstructed.

Client sends error payload.

Business side uploads SourceMap files and removes local copies.

Server uses a source‑map tool to map the minified stack to original code.

Static Resource Load Errors

Capture via the element’s onerror handler or globally with window.addEventListener('error', cb, true) during the capture phase.

Request Exceptions

Network instability is monitored by wrapping native XMLHttpRequest and fetch to intercept status codes and error events.

Freeze (Stutter) Detection

FPS below 60 indicates stutter, but not all low‑FPS frames are valuable. Our strategy reports a page as frozen when FPS stays below 20 for 3 seconds or when a user interaction causes a frame longer than 116 ms.

Crash Detection

Crashes caused by infinite loops or OOM are detected via a Web Worker heartbeat: the main thread sends a ping every 2 seconds; the worker expects a response within 6 seconds and reports a crash via HTTP if missed.

Performance Monitoring (RUM)

Core Web Vitals—LCP, FID, CLS—measure user‑centric performance.

Loading (LCP)

LCP (Largest Contentful Paint) marks when the biggest visible element becomes rendered.

Interactivity (TTI & FID)

TTI (Time To Interactive) is the time until the page is fully usable; it is derived by finding a 5 s silent window after FCP without long tasks, then locating the next long task.

FID (First Input Delay) measures the delay between a user's first interaction and the browser's response, captured via the PerformanceEventTiming API.

Visual Stability (CLS)

CLS (Cumulative Layout Shift) quantifies unexpected layout movements; lower scores indicate a more stable page.

Data Reporting

Data is usually sent via AJAX, but for unload events Navigator.sendBeacon is preferred; fallback methods include image beacons or synchronous XHR (though often blocked).

To reduce overhead, we aggregate multiple records into batch requests and apply sampling rates (e.g., 100 % for crashes, lower for custom logs).

Conclusion

This guide provides a systematic view of front‑end monitoring, helping developers understand what to monitor, how to collect and report data, and which performance metrics matter most for improving user experience.