How to Build a Robust Frontend Safety Production System for High‑Reliability Web Apps

What Is Frontend Safety Production?

Originating from the industrial safety practices of the 18th‑century industrial revolution, safety production has become crucial in the internet era where any infrastructure failure can impact national economies. Alibaba Group established a Safety Production Committee in 2018 to use technology, enforce behavioral standards, and foster a safety culture for frontend development.

Frontend Safety Production Diagram

Frontend safety production expands the responsibility of frontend engineers across development, release, and online operation stages, aiming to deliver reliable code without introducing issues and to quickly mitigate any faults that do appear.

Building a Frontend Safety System

Most major incidents stem from changes; thus, frontend safety production focuses on three phases of version changes: before, during, and after release, employing static code analysis, custom linting, unit testing, UI regression testing, risk assessment, gray‑monitoring reports, and rapid issue detection (1‑minute), localization (5‑minutes), and resolution (10‑minutes).

Single‑Point Safety Production Stage: Online Frontend Monitoring

In 2015, Alibaba launched the retcode frontend monitoring system to track page load speed, JavaScript errors, and API success rates, later expanding it to Alibaba Cloud ARMS in 2017 and moving to a cloud‑based architecture.

Multi‑Pipe Independent Safety Production Stage: Cloudized Frontend Monitoring + Other Safeguards

Retcode evolved into a global monitoring platform handling billions of logs daily, adding capabilities such as international performance metrics, error tracebacks, API snapshots, and full‑stack tracing, while other tools like static code scanning, TDD, and UI automation were introduced.

Systematic Frontend Safety Production Stage: From 0 to 1

To break silos, Alibaba integrated these tools into a unified pipeline, applying them to core e‑commerce transaction flows, large‑scale promotional stability, and daily governance, enabling full‑link pressure testing and acceptance.

Core Capabilities

Pre‑change CI gate: static code scanning, custom linting, unit test coverage.

Gray‑release gate during change: UI regression testing, risk assessment, gray‑monitoring reports.

Post‑change online real‑time monitoring: 1‑minute issue detection, 5‑minute root‑cause localization, 10‑minute fix.

Three Strongest Extensions

Frontend Iteration Change Risk Assessment

A tool that identifies explicit and implicit changes between iterations, maps affected files, and provides comprehensive regression points for developers and testers.

Frontend Gray Release Monitoring Report

During gray releases, the system monitors page load speed, JavaScript error rates, new exceptions, and API success rates, generating reports and adjusting traffic ratios based on coverage metrics.

5‑Minute Full‑Stack Issue Localization

By propagating a traceId from the frontend to backend services, developers can quickly trace API errors back to the source, reducing reliance on manual hand‑offs and accelerating diagnosis.

Future Outlook

As the internet becomes critical infrastructure, frontend safety production will evolve toward full‑stack security, cloud‑IDE integration, higher automation reducing manual testing, and intelligent diagnostics with proactive risk alerts and automatic recovery.