Cross‑Platform Frontend High‑Availability, Performance Optimization and Migration at Snowball

Overview

Snowball's front‑end team summarizes the fourth to seventh parts of a seven‑part series on cross‑platform development, focusing on high‑availability construction, monitoring, performance optimization, and migration.

Monitoring & Operations

The monitoring system spans five modules: development delivery, online release, online monitoring, effective response, and post‑mortem improvement. Development delivery involves code review and merging. Release uses a self‑built platform to control version numbers and SDK versions. Monitoring leverages Sentry APM, ELK logs, and Feishu webhooks to detect anomalies early.

Effective response combines gray‑scale configuration and client routing for fallback to native or H5 pages, while a bi‑weekly review closes the loop on alerts.

Platform Construction

Snowball built an ELK log analysis system and a self‑developed Sentry performance monitoring platform to collect end‑to‑end metrics such as bundle download, decompression, page smoothness, crash, JS errors, and white‑screen occurrences.

Behavior Log Collection

A custom log component tags logs with "React Native log =" or "H5 log =" to differentiate sources. Logs are collected via active upload, CRM‑configured rules (10% sampling), or silent WebSocket pull.

Data Alerts

Feishu bots link the monitoring platform to chat groups, triggering automatic alerts when thresholds are breached.

Follow‑up Mechanism

Issues are reviewed bi‑weekly, categorized (process, operation, code), and assigned for resolution before re‑release.

Release & Degradation

The self‑built release platform handles preparation, self‑check, packaging, artifact upload, QA/leader confirmation, and final deployment. Route‑based degradation allows instant fallback to native or H5 pages via CRM‑configured URLs.

Loading Speed Optimization

Performance analysis shows three stages for RN page load: hot update (≈2700 ms, 69%), native loading (≈500 ms, 13%), and JS execution (≈700 ms, 18%). Optimizations target bundle hot‑update, bundle loading, and engine upgrades.

Bundle Hot‑Update & Loading

Pre‑download bundles before page entry.

Load cached bundle first, then asynchronously check for newer versions.

Cache common bundles in memory and reuse RN engines across pages.

Engine reuse and pre‑creation reduce cold‑start latency.

Engine Upgrade

Hermes replaces the default JavaScript engine, offering byte‑code pre‑compilation and eliminating JIT, resulting in reduced TTI (4.3 s → 2.01 s), smaller download size (41 MB → 22 MB), and lower memory usage.

Bundle Splitting

Bundles are split into a common part (RN core libraries) and a business part. The common bundle is shipped with the app, while the business bundle is hot‑updated. This reduces download size by >80% and cut bundle download time from 2 s to 0.8 s.

Stability Optimization

Using Sentry and Bugly, the team resolved numerous crashes, including useEffect failures on Android and "ViewManager for tag XXX could not be found" errors caused by activity lifecycle issues. Solutions involved fixing activity reference handling and improving thread safety.

Cross‑Platform Migration

A systematic migration plan evaluates page type, business chain, business type, and interaction complexity to decide between Native, RN/H5, or H5. Strategies prioritize low‑risk pages (e.g., static displays) for RN migration, while high‑interaction pages remain native.

The migration workflow includes selection, strategy definition, and a standardized process, resulting in RN/H5 covering >70% of new and refactored pages and improving development efficiency by >50%.

Summary & Outlook

The cross‑platform container has become the foundation for Snowball's multi‑device strategy. Monitoring, release, performance, and migration practices have delivered a 60%+ reduction in page load time and a crash rate below 0.2%.

Future work includes finer‑grained container capabilities, further performance enhancements, expanded open‑platform APIs, and AI‑assisted project scaffolding.