How Enterprise Frontend Teams Ensure Stability with Monitoring and Automated Inspections

Background and Significance

Modern frontend applications face complex scenarios and high user‑experience expectations, making system stability and sustainability critical. Monitoring and inspection are used to ensure stable, high‑quality operation of business lines.

Categories of Monitoring

Monitoring is divided into two parts: real‑time monitoring (integrating the internal SGM platform with SDKs for over 100 applications) and scheduled task inspections (automated periodic checks with alert activation).

Real‑time Monitoring

Real‑time monitoring integrates the SGM platform and alert system to detect anomalies and notify teams via multiple channels. Key practices include balancing precision and sensitivity, implementing tiered alerts, continuously optimizing rules, assigning clear responsibilities, and training team members.

Only LCP alerts remain enabled to focus on user‑perceived performance issues.

Page Performance

Key performance indicators such as LCP (≤2500 ms), CLS (<0.1), FCP (≤1.8 s), FID (≤100 ms), and TTFB (≤1000 ms) are monitored. White‑screen time is tracked by configuring critical DOM elements per page, with support for regex URL matching.

JSError Monitoring

Errors are captured by matching keywords in console messages. High‑frequency "Script error" (cross‑origin errors) are filtered by enabling CORS and adding error handling in Vue projects:

<code>Vue.config.errorHandler = (err, vm, info) => {
  if (err) {
    try {
      console.error(err);
      window.__sgm__.error(err);
    } catch (e) {}
  }
};</code>

API Request Monitoring

Alerts focus on HTTP status codes and business error codes. Configuration examples include mapping error codes to messages and standardizing codes across services.

<code>{
  "500001": "Program exception, upstream",
  "500002": "Program exception, specific module"
}</code>

Resource Error Monitoring

Resource loading errors (CSS, JS, images) are tracked. Image load errors can be ignored by disabling collection.

Custom Reporting

Critical business flow nodes implement custom reporting to capture detailed request parameters, enabling rapid diagnosis when issues arise. Examples include reporting address component returns and API request payloads.

Mini‑Program Monitoring

Mini‑programs lack some web metrics like LCP but still monitor performance, JS errors, and resource loads using official tools and SGM integration.

Native App Monitoring

Native monitoring includes crash tracking (mPaaS), startup and rendering times (ZhuLong), and network/WebView metrics (SGM). Business monitoring covers login, product detail, and order detail modules with detailed validation of API responses and UI components.

Scheduled Inspections

Two methods are used: UI‑Woodpecker platform for timed tasks and custom Node.js scripts for automated UI checks. Inspections verify link validity, hover and click interactions, and post‑click navigation.

Problems Exposed by Monitoring

Examples include frequent jsError in closed environments, enterprise purchase page exceptions, and API failures. Solutions involve try‑catch wrappers, queue mechanisms for deferred reporting, and targeted alert thresholds.

Conclusion and Future Plans

Monitoring transformed reactive issue handling into proactive detection, leading to performance improvements, reduced error rates, and faster resolution. Future goals include raising 90% of applications above a 90‑point performance score, deepening custom exception coverage, and enhancing inspection tools.