debugging-strategies

Expected outcome:

Let me apply systematic debugging to find this undefined property issue.

## Step 1: Reproduce and Observe
- When does the error occur? Always or randomly?
- Which API endpoint triggers it?
- What request parameters are sent?

## Step 2: Gather Information
1. Add strategic logging before the likely crash point:
```javascript
console.log('Order data:', JSON.stringify(order, null, 2));
```
2. Check which property might be undefined:
```javascript
console.log('Items:', order?.items);
console.log('User:', order?.user?.name);
```

## Step 3: Hypothesis
Hypothesis: The error likely occurs when:
- order.items is undefined for certain request types
- order.user is null for guest users

## Step 4: Test and Verify
Add null checks and verify with sample requests:
```javascript
const items = order?.items ?? [];
const userName = order?.user?.name ?? 'Guest';
```

Would you like me to help you implement this fix?

Expected outcome:

Let me guide you through debugging a React memory leak systematically.

## Reproduction Phase
1. Open Chrome DevTools > Memory tab
2. Take a heap snapshot (before)
3. Perform the suspected leaky action 10-20 times
4. Take another snapshot (after)
5. Compare snapshots to identify retained objects

## Common React Memory Leak Patterns
1. Unsubscribed event listeners
2. Timers (setInterval) not cleared in useEffect cleanup
3. Closures holding references to component scope
4. Global caches growing unbounded

## Quick Debugging Steps
```javascript
useEffect(() => {
const timer = setInterval(() => {
// ...
}, 1000);

// Cleanup function - CRITICAL for preventing leaks
return () => {
clearInterval(timer);
// Remove any subscriptions
};
}, []);
```

What symptoms are you seeing? High memory in DevTools or actual crashes?