AI排查前端白屏 | Console和Network

前端白屏。

网站打不开。

JS 运行时报错。
资源 404。
接口 500。
CORS。
环境变量错。
路由 base path 错。
构建产物版本不一致。
CDN 缓存旧文件。
浏览器兼容问题。
登录态异常。

我的页面白屏了，怎么办？

先收集 Console、Network、构建版本、最近变更。
让辅助模型整理白屏证据包。
再让 Fable 5 判断优先排查路径。

如果 index.html 能返回，但 js bundle 404，通常是部署路径或缓存问题。
如果 js bundle 能加载，但 Console 报 undefined/null，通常是代码运行时问题。
如果页面能渲染骨架，但接口 401/500，通常是 API 或登录态问题。
如果本地正常、线上白屏，优先看环境变量、base path、资源路径和构建版本。

1. 用户看到的现象
2. 浏览器 Console 红色错误
3. Network 里失败的请求
4. 当前 URL
5. 是否登录后才白屏
6. 最近部署时间
7. 前端框架和构建工具
8. 本地是否正常

【现象】
- 访问 URL：
- 白屏范围：所有用户 / 部分用户 / 仅登录后
- 是否刷新后恢复：
- 是否无痕模式复现：

【环境】
- 框架：React / Vue / Next.js / Nuxt / Vite / 其他
- 部署：Nginx / Vercel / Docker / CDN
- 最近部署版本：

【Console】
粘贴红色错误，保留 stack 前 20 行。

【Network】
- 失败请求 URL：
- 状态码：
- Response：
- Initiator：

【最近变更】
- 改了路由 / 环境变量 / 依赖 / 登录 / API / 构建配置：

【边界】
先给只读排查步骤，不要让我直接改生产配置。

F12 -> Console

Cannot read properties of undefined
Cannot access before initialization
Minified React error
ChunkLoadError
Loading chunk failed
Unexpected token '<'
Failed to fetch dynamically imported module

错误类型。
报错文件。
行号。
stack 前几层。
发生页面。

Console:
TypeError: Cannot read properties of undefined (reading 'name')
    at UserCard (assets/index-a1b2c3.js:42:1034)
    at renderWithHooks (...)

页面：/dashboard
触发：登录后进入首页立即白屏

用户数据为空。
接口返回结构变化。
组件没有兜底。

F12 -> Network -> 刷新页面

Preserve log
Disable cache

Unexpected token '<'

浏览器以为自己在加载 JS，
结果服务器返回了一段 HTML。

JS 文件路径错，Nginx 返回 index.html。
登录过期，接口返回登录页 HTML。
CDN 回源失败，返回错误页。

你是前端白屏排查助手。

请根据我提供的 Console、Network、最近变更和部署环境，判断白屏最可能属于哪一层：
1. JS 运行时崩溃
2. 静态资源加载失败
3. API 请求失败
4. 登录态或权限
5. 构建/部署路径
6. CDN 或缓存

要求：
- 先给最可能根因排序。
- 每个判断必须引用 Console 或 Network 证据。
- 先给只读验证步骤。
- 不要建议我直接清空线上缓存、重启生产服务或修改 DNS。
- 如果证据不足，列出还需要补充的 3 个信息。

请从这段 Console 和 Network 日志中提取可能导致白屏的关键错误。
不要判断根因，只输出错误表格：时间、类型、URL/文件、状态码、关键消息。

ChunkLoadError: Loading chunk xxx failed

用户浏览器还拿着旧 index.html。
旧 index.html 指向旧 chunk。
服务器或 CDN 已经只保留新 chunk。
刷新后仍然请求不到旧文件。

1. Network 看失败 chunk URL。
2. 直接打开该 URL 是否 404。
3. 检查部署是否删除旧构建产物。
4. 检查 index.html 缓存策略。
5. 检查 CDN 是否缓存了旧 HTML。

index.html 不长缓存。
静态 chunk 用 hash 长缓存。
部署时短时间保留旧 chunk。
前端捕获 chunk load failure 后提示刷新。

VITE_API_BASE_URL 没配置。
NEXT_PUBLIC_API_URL 错。
构建时环境变量为空。

API 请求到了 undefined/api。
API 请求到了 localhost。
API 请求到了旧域名。

Network 失败 URL。
构建环境变量名称。
部署平台环境变量截图的脱敏描述。

VITE_API_BASE_URL=https://api.example.com
SENTRY_DSN=[已配置，值不展示]

user.profile.name

{
  "user": null
}

{
  "data": {
    "profile": {}
  }
}

Cannot read properties of null

Console stack。
接口 response。
最近后端变更。

请判断这个白屏是否可能由接口返回结构变化引起。
如果是，请指出前端读取路径、接口实际返回路径和需要加兜底的位置。
不要重写整个组件，只给最小修复建议。

Console 有 Access-Control-Allow-Origin。
Network 里预检 OPTIONS 失败。
或者请求被浏览器拦截，看不到正常 response。

后端没返回 CORS Header。
预检请求没有处理 OPTIONS。
带 Cookie 时没有 Access-Control-Allow-Credentials。
Origin 不在白名单。
Nginx 和后端重复设置 Header。

CORS 是浏览器拦截。
后端可能实际返回了内容，但前端 JS 拿不到。

project
error_type: frontend_blank_screen
stage: log_summary / root_cause / fix_plan / report
model
cost
evidence_ids
final_status

哪些白屏是资源路径。
哪些是接口结构。
哪些是登录态。
哪些是缓存。

1. 无痕窗口是否复现。
2. Console 第一个红色 error 是什么。
3. Network 是否有 JS/CSS 404。
4. Network 是否有 API 401/403/500/502。
5. 是否只有某个路由白屏。
6. 是否登录后才白屏。
7. 最近是否部署过前端。
8. 最近是否改过环境变量。
9. 是否 CDN 缓存旧 index.html。
10. 本地生产构建是否可复现。

先只读检查。
再决定修复。

Console。
Network。
最近变更。
部署环境。
复现范围。
风险边界。

白屏先看证据，不要先改代码。