name: cloud-debug description: 云平台(Cloudflare Pages/Vercel/Netlify)前端部署问题系统化调试——当生产环境出现本地无法复现的bug时使用，综合 systematic-debugging + ECC harness 方法论 triggers: - "生产环境崩了" - "本地正常部署后报错" - "Cloudflare Pages 有问题" - "部署后页面崩溃" - "生产环境独有的bug" - "removeChild" - "fetch 挂起" - "页面崩溃"

Cloud Deployment Debugging Skill

综合 superpowers/systematic-debugging + everything-claude-code-harness + Cloudflare Wrangler 的云平台专属调试框架

铁律

NO FIXES WITHOUT EVIDENCE FIRST

没有日志的猜测 = 浪费时间。每多一次盲目修复 = 引入新 bug。

适用场景

• Cloudflare Pages / Vercel / Netlify 部署后出现本地无法复现的 bug
• React/Vue SPA 在生产环境崩溃但 dev 正常
• fetch/XHR 在生产环境挂起（pending forever）
• DOM 冲突（removeChild、insertBefore 等）
• 第三方平台注入脚本干扰

Phase 1: 武装取证 (Arm & Observe)

1.1 三级日志系统

// Level 1: localStorage 持久日志 — 崩溃不丢失
const LOG_KEY = 'debug_log'
const debugLog: string[] = JSON.parse(localStorage.getItem(LOG_KEY) || '[]')
function dlog(msg: string) {
  debugLog.push(`[${new Date().toISOString().slice(11,19)}] ${msg}`)
  localStorage.setItem(LOG_KEY, JSON.stringify(debugLog))
}

// Level 2: 全局异常捕获
window.onerror = (msg, src, line, col, err) => {
  dlog(`GLOBAL: ${msg} at ${src}:${line}`)
}
window.onunhandledrejection = (e) => {
  dlog(`REJECTION: ${e.reason?.message || e.reason}`)
}

// Level 3: ErrorBoundary 展示日志
class ErrorBoundary extends React.Component {
  componentDidCatch(err) {
    dlog(`CRASH: ${err.message}`)
    dlog(`STACK: ${err.stack?.split('\n').slice(0,3).join(' | ')}`)
  }
  render() {
    if (this.state.error) {
      return <pre>{debugLog.join('\n')}</pre>  // 崩溃页面直接展示日志
    }
    return this.props.children
  }
}

1.2 关键代码路径埋点

在以下位置加 dlog()： - 所有 fetch() 调用前后（URL、method、status） - 所有 setState / useState 状态切换点 - 所有 useEffect 执行点 - 路由导航点

1.3 多源证据采集

# 源1: Cloudflare Pages Function 日志
npx wrangler pages deployment tail <deploy-id> --project-name=<name>

# 源2: 直接 curl 测试服务端（排除客户端干扰）
curl -sv --max-time 10 -X POST "https://<domain>/api/..." -d '{...}'

# 源3: 本地生产构建对比
npm run build && npx vite preview  # 或 npx serve dist/

# 源4: Cloudflare 安全设置检查
# Dashboard → Speed → Optimization（Auto Minify 关掉）
# Dashboard → Speed → Rocket Loader（关掉）
发现更多技能插件，请访问7w4.net。

Phase 2: 二分隔离 (Binary Isolation)

2.1 先证明"不是我的问题"

1. 本地 npm run build + npx vite preview → 正常？
   YES → 问题在 Cloudflare/部署层
   NO  → 问题在构建产物

2. curl 直接调 API → 返回正常？
   YES → 问题在浏览器端（CORS/Bot Detection/脚本冲突）
   NO  → 问题在服务端/网络

3. 去掉异步调用，只做 UI 状态切换 → 正常？
   YES → 问题在异步操作（fetch/await）
   NO  → 问题在 React 渲染本身

2.2 测试按钮法

在页面临时加一个"跳过所有异步、只做状态切换"的按钮：

<Button onClick={() => { setStep("next"); setMessage("test"); }}>
  测试：直接跳转
</Button>

如果这个按钮正常工作，说明 React 渲染没问题，问题在异步操作。

2.3 替换调用目标

// 直接调 Supabase → 跨域，可能被 Cloudflare Bot Detection 拦截
fetch('https://xxx.supabase.co/auth/v1/otp', {...})

// 改为同源代理 → 绕过跨域和 Bot Detection
fetch('/api/auth/otp', {...})  // Pages Function 转发

Phase 3: 根因定位 (Root Cause)

3.1 常见根因速查表

3.2 本次实战验证的根因

Cloudflare Pages 会在浏览器端注入 __cf_bm Bot Detection 脚本，操作 DOM 实现人机验证。React 的异步回调（.then()）如果恰好在 Cloudflare 脚本操作 DOM 的同一帧触发，React 的 reconciler 会因 DOM 节点已不存在而抛出 removeChild 错误。

证据链： 1. 本地生产构建正常（排除代码/构建问题） 2. curl 调 Pages Function 返回 200（排除服务端问题） 3. "直接跳转"按钮正常（排除 React 渲染问题） 4. await 改为 .then() 无效（异步回调仍与 Cloudflare 脚本冲突） 5. requestAnimationFrame 推迟到下一帧 → 修复（确认是帧内冲突）

Phase 4: 最小修复 (Minimal Fix)

4.1 修复优先级

4.2 修复纪律

• 一次只改一个变量
• 改完立即部署验证
• 3 次修复失败 → 回到 Phase 1 重新取证
• 3+ 次失败 → 质疑架构（不是继续修）

快速检查清单

部署到 Cloudflare Pages 之前：

• [ ] dist/_redirects 存在：/* /index.html 200
• [ ] dist/_headers 存在（如需 CSP）
• [ ] Supabase URL Configuration 包含生产域名
• [ ] 生产 .env 变量已设
• [ ] Cloudflare Speed → Auto Minify: OFF
• [ ] Cloudflare Speed → Rocket Loader: OFF

出现生产环境 bug 时：

• [ ] Phase 1: 加了 localStorage 日志 + ErrorBoundary
• [ ] Phase 1: curl 测试了 API 端点
• [ ] Phase 2: 加了"跳过异步"测试按钮
• [ ] Phase 2: 对比了本地生产构建 vs 云端部署
• [ ] Phase 3: 对照了常见根因速查表
• [ ] Phase 4: 单变量修复，一次一个

与 superpowers 协同

与 everything-claude-code-harness 协同

来源： Yuie 项目 yuie.cn Cloudflare Pages 部署调试实战 验证日期： 2026-06-18 关键发现： Cloudflare Bot Detection 注入脚本与 React 异步回调 DOM 冲突 最小修复： requestAnimationFrame + Pages Functions 同源代理

这个 Skill 质量扎实，来自真实项目经验，方法论清晰易上手，代码示例可直接使用，对调试学习很有帮助。它强调先收集证据再动手修，避免盲目试错，这点很实用。不足是内容覆盖范围有限，部分场景的深度指导可以再加强。总体适合需要解决云端部署调试问题的开发者使用。