5 個常見 Vibe Coding 錯誤（同點樣修正）

錯誤 #1：冇 Error Handling

問題：
AI 生成嘅 code 通常假設所有嘢都完美運作。冇 try-catch、冇 error states、冇 fallbacks。

修正：

// 錯
const data = await fetch('/api/data').then(r => r.json());

// 啱
try {
  const res = await fetch('/api/data');
  if (!res.ok) throw new Error('Failed to fetch');
  const data = await res.json();
} catch (error) {
  console.error('Error:', error);
  // 顯示用戶友好嘅信息
}

錯誤 #2：Hardcode 秘密

問題：
AI 唔識 .env files。佢成日將 API keys 直接寫喺 code 入面。

修正：

• 永遠唔好 commit secrets 去 git
• 用 environment variables
• 將 .env 加入 .gitignore

錯誤 #3：冇 Input Validation

問題：
AI 信晒所有用戶輸入。呢個會導致安全漏洞同 crashes。

修正：

// 錯
const userId = req.body.userId;

// 啱
const userId = req.body.userId;
if (!userId || typeof userId !== 'string') {
  return res.status(400).json({ error: 'Invalid userId' });
}

錯誤 #4：N+1 Database Queries

問題：
AI 成日寫每個 item 一個 query 而唔係 batching。

修正：

// 錯 - N+1 queries
for (const userId of userIds) {
  const user = await db.users.findById(userId);
}

// 啱 - Single query
const users = await db.users.find({ _id: { $in: userIds } });

錯誤 #5：冇 Loading States

問題：
AI 忘記 APIs 需要時間。用戶會見到空白畫面或壞嘅 UI。

修正：

• 加 loading spinners
• 顯示 skeleton screens
• 提交時 disable buttons

需要幫手？

呢啲只係冰山一角。我哋每日 review vibe-coded projects 同修正呢啲問題（仲有好多其他）。

俾我哋 review 你嘅 code →