fix(router): 补回 BinReplenishMonitor 的 lazy 声明，修复生产全站白屏 #77

yanhui · 2026-10-22T12:07:37+08:00

yanhui commented

2026-10-22 12:07:37 +08:00

故障现象

生产 https://ck.yydd.ai:8443 打开任意页面都是白屏，连 /login 都进不去 —— 用户反馈「真实环境的页面登录不上」。

用真实浏览器（playwright）打开目标页面取证：

=== 可见文本 ===
(空 —— 白屏)
=== 是否有登录表单 ===
[]
=== /api 响应 ===
(无)                      ← 一个请求都没发出去
=== 控制台 ===
[pageerror] BinReplenishMonitor is not defined

根因

PR #74 新增「缺货补货监控」时，在 frontend/src/router/index.jsx 的路由表里写了：

element: renderLazyComponent(BinReplenishMonitor),   // 第 143 行

但没有像其它 22 个页面那样在文件顶部补 lazy 声明。该表在模块顶层求值 →
加载 router 即抛 ReferenceError → 整个 React 应用挂掉 → 全站白屏。

vite build 拦不住：未声明标识符在 JS 里是合法语法，构建一路绿灯，部署后才发现。

线上与 main 都中招：

版本	是否有 `const BinReplenishMonitor = lazy(`
生产 `55b755c`	❌ 无
`origin/main` `03fd3f9`	❌ 无

PR #75（a15f289「补回 binReplenishRoutes 引入，修复后端启动失败」）只修了后端的路由引入，
前端的这处漏声明一直没人发现。

改动

frontend/src/router/index.jsx：补回 lazy 声明，并加注释点明「漏一个 = 全站白屏」。
frontend/scripts/verify-router-lazy.mjs（新增）：静态扫描 router/index.jsx，
凡被 renderLazyComponent(X) 使用的 X，必须在同文件有 const X = lazy( 声明，
否则构建直接失败并报出缺少的组件名与行号。
frontend/package.json：把该检查挂到 npm run build 前置，并加 verify:router-lazy 单独入口。

验证

① 检查脚本有效性（对未修复的 origin/main 版本）

router/index.jsx 有组件被 renderLazyComponent 使用但未声明为 lazy，这会导致运行时 ReferenceError 并让整站白屏：
  - BinReplenishMonitor  (router/index.jsx:143 使用，缺少 const BinReplenishMonitor = lazy(() => import('...')) 声明)
exit=1

修复后：Verified router lazy declarations: 23 used, 23 declared → exit=0

② 构建与 lint：eslint 无告警；vite build 成功（4270 modules / 34.15s）

③ playwright 真渲染（本地 5173 + 后端 4002）

路由	修复前	修复后
`/login`	白屏，pageerror `BinReplenishMonitor is not defined`	✅ 完整渲染登录表单（123 字 / 3 个输入框，含验证码登录、密码登录、手机号、登录按钮）
`/planning/operation/warehouse-logistics-exception`	白屏	✅ 正常（未登录 → 401 → 回登录引导，无致命错误）
`/planning/operation/bin-replenish-monitor`	白屏	✅ 同上

影响面

只补一行声明 + 新增构建检查，不改任何业务逻辑与接口。合并后需重新构建并部署才能解除生产白屏。

## 故障现象生产 `https://ck.yydd.ai:8443` 打开**任意页面都是白屏**，连 `/login` 都进不去 —— 用户反馈「真实环境的页面登录不上」。用真实浏览器（playwright）打开目标页面取证： ``` === 可见文本 === (空 —— 白屏) === 是否有登录表单 === [] === /api 响应 === (无) ← 一个请求都没发出去 === 控制台 === [pageerror] BinReplenishMonitor is not defined ``` ## 根因 PR #74 新增「缺货补货监控」时，在 `frontend/src/router/index.jsx` 的路由表里写了： ```jsx element: renderLazyComponent(BinReplenishMonitor), // 第 143 行 ``` 但**没有**像其它 22 个页面那样在文件顶部补 lazy 声明。该表在**模块顶层**求值 → 加载 router 即抛 `ReferenceError` → 整个 React 应用挂掉 → 全站白屏。 `vite build` 拦不住：未声明标识符在 JS 里是合法语法，构建一路绿灯，部署后才发现。线上与 main 都中招： | 版本 | 是否有 `const BinReplenishMonitor = lazy(` | |---|---| | 生产 `55b755c` | ❌ 无 | | `origin/main` `03fd3f9` | ❌ 无 | PR #75（`a15f289`「补回 binReplenishRoutes 引入，修复后端启动失败」）只修了**后端**的路由引入，前端的这处漏声明一直没人发现。 ## 改动 1. **`frontend/src/router/index.jsx`**：补回 lazy 声明，并加注释点明「漏一个 = 全站白屏」。 2. **`frontend/scripts/verify-router-lazy.mjs`（新增）**：静态扫描 router/index.jsx，凡被 `renderLazyComponent(X)` 使用的 X，必须在同文件有 `const X = lazy(` 声明，否则**构建直接失败**并报出缺少的组件名与行号。 3. **`frontend/package.json`**：把该检查挂到 `npm run build` 前置，并加 `verify:router-lazy` 单独入口。 ## 验证 **① 检查脚本有效性（对未修复的 origin/main 版本）** ``` router/index.jsx 有组件被 renderLazyComponent 使用但未声明为 lazy，这会导致运行时 ReferenceError 并让整站白屏： - BinReplenishMonitor (router/index.jsx:143 使用，缺少 const BinReplenishMonitor = lazy(() => import('...')) 声明) exit=1 ``` 修复后：`Verified router lazy declarations: 23 used, 23 declared` → `exit=0` **② 构建与 lint**：eslint 无告警；`vite build` 成功（4270 modules / 34.15s） **③ playwright 真渲染（本地 5173 + 后端 4002）** | 路由 | 修复前 | 修复后 | |---|---|---| | `/login` | 白屏，pageerror `BinReplenishMonitor is not defined` | ✅ 完整渲染登录表单（123 字 / 3 个输入框，含验证码登录、密码登录、手机号、登录按钮） | | `/planning/operation/warehouse-logistics-exception` | 白屏 | ✅ 正常（未登录 → 401 → 回登录引导，无致命错误） | | `/planning/operation/bin-replenish-monitor` | 白屏 | ✅ 同上 | ## 影响面只补一行声明 + 新增构建检查，不改任何业务逻辑与接口。合并后需**重新构建并部署**才能解除生产白屏。

yanhui added 1 commit 2026-10-22 12:07:38 +08:00

fix(router): 补回 BinReplenishMonitor 的 lazy 声明，修复全站白屏 9b1ec36c70

现象：生产 https://ck.yydd.ai:8443 打开任意页面都是白屏，连登录页都进不去。
控制台报 `BinReplenishMonitor is not defined`，一个 /api 请求都没发出去。

根因：PR #74 新增「缺货补货监控」时，在 router/index.jsx 的路由表里写了
`element: renderLazyComponent(BinReplenishMonitor)`，但没有像其它 22 个页面那样
在文件顶部补 `const BinReplenishMonitor = lazy(() => import('../pages/BinReplenishMonitor'))`。
该行在模块顶层求值 → 加载即抛 ReferenceError → 整个 React 应用挂掉。
`vite build` 不会报错（未声明标识符在 JS 里是合法语法），所以一路构建通过、部署后白屏。
PR #75 只补了后端的 binReplenishRoutes 引入，前端的这处漏声明一直没人发现。

修复：
1. router/index.jsx 补上 lazy 声明，并留下注释说明「漏一个就是全站白屏」。
2. 新增 frontend/scripts/verify-router-lazy.mjs，静态扫描 router/index.jsx：
   凡是 renderLazyComponent(X) 用到的 X，必须在同文件有 `const X = lazy(` 声明，
   否则构建直接失败并指出缺少的组件名与行号。已挂到 `npm run build` 前置。

验证：
- 该检查对修复前的 origin/main 版本报错并准确指出
  `BinReplenishMonitor (router/index.jsx:143)`；对修复后版本通过（23 used / 23 declared）。
- eslint 通过；vite build 成功（4270 modules / 34s）。
- playwright 真渲染：修复前 /login 白屏 + pageerror；修复后 /login 完整渲染登录表单
  （123 字、3 个输入框），两个业务路由正常回到登录引导，无致命错误。

yanhui merged commit 9991b92325 into main

2026-10-22 12:08:20 +08:00

yanhui referenced this issue from a commit

2026-10-22 12:08:20 +08:00

Merge pull request 'fix(router): 补回 BinReplenishMonitor 的 lazy 声明，修复生产全站白屏' (#77) from codex/hotfix-bin-replenish-lazy-20261022 into main

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: lunanting/cangku#77