Real-time Log Monitoring with Claude Code and Expo

One of the most powerful workflows I've discovered while developing React Native apps with Claude Code is using real-time log monitoring. This simple technique has saved me countless hours of debugging and development time.

The Problem

When developing React Native apps with Expo, you're often juggling multiple things:

• Writing code
• Running the development server
• Monitoring console logs
• Debugging errors
• Testing on simulators or devices

Traditionally, this means constantly switching between your code editor and terminal to check logs, understand errors, and debug issues. It's a context-switching nightmare that slows down development.

The Solution: Real-time Log Piping

Here's the game-changing command I use:

npx expo start > logs/expo.log 2>&1

This simple command redirects all Expo server output (both stdout and stderr) to a log file that Claude Code can monitor in real-time.

Why This Works So Well

1. Claude Code can see everything: By piping logs to a file, Claude Code can read and analyze the entire output history, not just what's currently visible in your terminal.

2. Context-aware debugging: When an error occurs, Claude Code can immediately see:

   • The full error stack trace
   • What was happening before the error
   • Related warnings or logs
   • The exact file and line number

3. Proactive problem-solving: Claude Code often catches issues before I even notice them. It can spot deprecation warnings, performance issues, or potential bugs in the log output.

4. No more copy-pasting: Instead of copying error messages to ask Claude Code about them, it already has the full context and can suggest fixes immediately.

Setting It Up

1. Create a logs directory in your project:

   mkdir -p logs
   

2. Add logs/ to your .gitignore:

   logs/
   

3. Start your Expo server with log redirection:

   npx expo start > logs/expo.log 2>&1
   

4. In a Claude Code session, ask it to monitor the logs:

   "Can you check the Expo logs at logs/expo.log and help me debug any issues?"
   

Real-World Examples

Example 1: Mysterious App Crashes

My app was crashing intermittently on Android. Instead of spending hours adding console.logs everywhere, I just asked Claude Code to analyze the log file. It immediately spotted a memory leak pattern in the logs that I had missed.

Example 2: Performance Optimization

Claude Code noticed repeated warnings about large lists being rendered without optimization. It not only identified the issue but also suggested implementing FlatList with proper keyExtractor and getItemLayout props.

Example 3: Dependency Conflicts

When upgrading Expo SDK versions, the logs showed various compatibility warnings. Claude Code read through all of them and provided a step-by-step plan to resolve each conflict.

Tips for Maximum Effectiveness

1. Keep logs focused: Clear your log file periodically to keep it manageable:

   echo "" > logs/expo.log
   

2. Use descriptive console.logs: Add meaningful log messages in your code. Claude Code can use these as context clues.

3. Let Claude Code be proactive: Don't wait for errors. Ask Claude Code to periodically check the logs for warnings or potential issues.

4. Combine with other tools: This workflow pairs excellently with React Native Debugger and Expo's built-in tools.

Beyond Expo

This pattern works for any development server or long-running process:

• Next.js: npm run dev > logs/next.log 2>&1
• Node.js apps: node server.js > logs/server.log 2>&1
• Docker containers: docker-compose logs -f > logs/docker.log 2>&1

Conclusion

This simple logging technique has transformed how I work with Claude Code. Instead of being reactive to errors, we can be proactive. Instead of losing context in terminal scrollback, we have a persistent record. Instead of manually copying errors, Claude Code already has the full picture.

Give it a try on your next project. You might be surprised how much time it saves you.