前端

【背景】 我们是一个 B 端实时协作平台（React 18 + TypeScript 5 + Vite 5），核心交互依赖 WebSocket 长连接：光标同步、在线状态、增量文档 diff 推送。线上约 5000 并发连接，平均在线时长

背景 社区里前端可观测性的讨论已经不少：#28 讲过错误监控从白屏到 5 分钟定位的落地路径，#121 聊过采样还是全量的成本权衡，#431 讨论过稳定性投入的最低水位。但我一直觉得有个更前置、却少被正面摆上桌面的分歧——当你同时有 RUM

«作者：顾砚舟-304｜前端｜稳定性与可观测性 栈：React 18.2.39 + Vite 5.4 + axios 1.7.2 + TypeScript 5.5» 一、现象与背景：一次发版后的「批量掉线」 先摆数字。我们一个 B 端数据中

【背景】 我们是一个 B 端数据中台（React 18 + TypeScript 5 + Vite 5），核心链路里有大量「长耗时任务」：批量导出报表（典型 30s ~ 8min）、批量导入（最长 20min+）、跨租户数据迁移。后端模式很

背景 我在前端做了 10 年，带过 3 个不同体量的团队，每个团队都问过同一个问题：我们的前端监控（性能 / JS 错误 / 资源加载 / 白屏 / 接口埋点）到底是接公司统一的那一套 SDK，还是自己挑（Sentry、ARMS、自研）？

一、现象：接口 QPS 比预期高 2.3 倍，网关"莫名变热" 2024 年底我们给一个 B 端订单平台（React 18.2.39 + Vite 5.4 + TypeScript 5.5，约 12 个中后台页面）做稳定性加固时，网关侧的

背景：我在做一个内部中后台（Vue 3 + Vite），线上错误上报后拿到的是压缩后的 "TypeError: Cannot read properties of undefined (reading 'x') at a.b (app.3f

背景 我做了 3 年前端，最消耗精力的往往不是写功能，而是这类现场：运营转来一句"用户反馈下单页很卡"，前端第一反应是"接口慢"，后端第一反应是"你们前端渲染慢"。我复盘过几次，最后发现真正的根因五花八门——有的是弱网下图片阻塞，有的是后端

一、现象：一次发版后 23 分钟白屏，41 条工单，根因是「HTML 被缓存了」 2024 年 11 月，我们一个 B 端 SaaS（React 18.2 + Vite 5.1，Nginx 1.25 反代 + Cloudflare CDN）

【背景】 B 端运营中台（React 18 + Vite 5），运营同学单会话经常挂 8 小时以上不刷新。今年把错误监控打通后，下一步想上「运行时内存监控 + 告警」，目标把「下午越用越卡、最后白屏」这类问题从工单倒查变成事前告警。 【现象

背景 上个月我们团队一个 B 端 SaaS 前端发版出了点事：灰度 10% 放量后第 4 分钟，一个路由守卫的竞态 bug 导致部分用户进不去"订单中心"页面。但当时没有任何人盯着灰度大盘——QA 回归在发版前已经跑完了，开发同学发完就切到

一、现象与背景：全量上报撑爆了上报链路 先摆数字。我们一个 B 端中台（React 18.2 + Vite 5，日均 PV 约 230 万、峰值 41 QPS 的活跃会话约 1.2 万个），监控 SDK 最初的设计是所有事件 100% 全量

【背景】React 18 + Vite 5 的 B 端中台，自研上报链路（错误 + 性能 + 用户行为三类事件），前端用 IndexedDB 做本地队列，navigator.sendBeacon / fetch 上行，服务端落 ClickH

背景 社区里关于前端可观测性的讨论已经不少：#28 讲了错误监控从白屏到 5 分钟定位的落地路径，#431 聊过稳定性投入的最低水位，#211 讨论过可观测性该全链路还是分层裁剪。但有一个更前置的问题我一直没看到被认真讨论——性能预算（Pe

结论先行 2024 年 Q3 我们一个 B 端数据平台的网关 502 比例从基线 0.4% 飙到 3.2%，值班同学以为是网关挂了。排查后发现根因在前端：请求层没有超时上限、失败后无条件自动重发，在弱网场景下形成了「请求堆积 → 网关过载

【背景】 React 18.2 + Vite 5 的 B 端中台，约 120 个路由，大量使用 "useEffect" 做副作用（API 请求、WebSocket 订阅、定时器）。今年启用了 Concurrent Mode（"startTr

背景 社区里前端侧已经攒了不少干货：#180 聊过弱网下超时与重试的默认值与边界，#220 那篇《前端请求竞态治理》讲透了 AbortController + 请求序号的坑。但「实时数据」这个方向我观察到的现状是——每个团队都在凭直觉选方案

«结论先行："useTransition" 不是加上去就完事的。我们一个 B 端后台（React 18.2 + Vite 5 + TypeScript），给搜索框加 "useTransition" 后 INP P75 只从 900ms 降到

背景 社区里前端可观测性、稳定性责任边界的话题已经不少：#61 聊过前端该不该背 P99 和 on-call，#121 讨论过上报采样还是全量，#28 讲过错误监控从白屏到 5 分钟定位的 4 步落地。把这些串起来看，我发现大家其实都默认了

«结论先行：WebSocket 客户端的「心跳间隔 × 判定断开次数 × 重连退避 × jitter × 服务端限流」这 5 组参数，任何一个配错都会在网关重启 / 机房抖动 / 运营商 NAT 超时的瞬间把雪崩放大 10 倍以上。这篇文章