5 個常見 Vibe Coding 錯誤(同點樣修正)
錯誤 #1:冇 Error Handling
問題:
AI 生成嘅 code 通常假設所有嘢都完美運作。冇 try-catch、冇 error states、冇 fallbacks。
修正:
```javascript
// 錯
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 入面。
修正:
錯誤 #3:冇 Input Validation
問題:
AI 信晒所有用戶輸入。呢個會導致安全漏洞同 crashes。
修正:
```javascript
// 錯
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。
修正:
```javascript
// 錯 - 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。
修正:
需要幫手?
呢啲只係冰山一角。我哋每日 review vibe-coded projects 同修正呢啲問題(仲有好多其他)。