debugging-strategies

預期結果:

讓我應用系統化除錯來找到這個未定義屬性問題。

## 步驟 1：重現並觀察
- 錯誤何時發生？總是還是隨機？
- 哪個 API 端點觸發它？
- 發送了什麼請求參數？

## 步驟 2：收集資訊
1. 在可能的崩潰點之前加入策略性日誌記錄：
```javascript
console.log('Order data:', JSON.stringify(order, null, 2));
```
2. 檢查哪個屬性可能是未定義的：
```javascript
console.log('Items:', order?.items);
console.log('User:', order?.user?.name);
```

## 步驟 3：假設
假設：錯誤可能發生在：
- 某些請求類型的 order.items 是未定義的
- 訪客使用者的 order.user 為 null

## 步驟 4：測試並驗證
加入空值檢查並使用範例請求驗證：
```javascript
const items = order?.items ?? [];
const userName = order?.user?.name ?? 'Guest';
```

你想讓我幫你實作這個修復嗎？

預期結果:

讓我系統化地引導你除錯 React 記憶體洩漏。

## 重現階段
1. 打開 Chrome DevTools > Memory 分頁
2. 拍攝堆積快照（之前）
3. 執行懷疑會造成洩漏的動作 10-20 次
4. 拍攝另一個快照（之後）
5. 比較快照以識別保留的物件

## 常見 React 記憶體洩漏模式
1. 未取消訂閱的事件監聽器
2. 在 useEffect 清理中未清除的計時器 (setInterval)
3. 保留元件範圍參考的閉包
4. 無限增長的全域快取

## 快速除錯步驟
```javascript
useEffect(() => {
const timer = setInterval(() => {
// ...
}, 1000);

// 清理函數 - 對於防止洩漏至關重要
return () => {
clearInterval(timer);
// 移除任何訂閱
};
}, []);
```

你看到什麼症狀？DevTools 中記憶體高還是實際當機？