🚀 Cote Network Logger

Beautiful real-time HTTP network monitoring for Flutter developers

A powerful, developer-friendly Flutter package that provides a stunning web dashboard for monitoring HTTP requests in real-time. Perfect for debugging, testing, and development workflows.

---

📦 What's New in 1.2.0 (2025-06-08)

• 🎨 Beautiful Modern UI: Complete dashboard redesign with glass-morphism effects and gradient backgrounds
• ✨ Enhanced Visual Design: Smooth animations, hover effects, and professional Material Design components
• 📄 Response Body Display: Fixed response body visibility - now shows properly in dashboard with syntax highlighting
• 🔧 Field Name Consistency: Fixed interceptor to correctly save requestBody and responseBody fields
• 📋 Copy-to-Clipboard: One-click copy functionality for all request/response data
• 🚀 Smart Content Expansion: Small responses expand by default, large ones collapse for better performance
• 🔧 Production Optimizations: Reduced logging in production builds for cleaner console output

---

✨ Features

• 🎨 Beautiful Modern UI - Glass-morphism design with gradient backgrounds and smooth animations
• 🔍 Real-time Monitoring - Watch HTTP requests as they happen with live WebSocket updates
• 📄 Complete Request/Response View - See headers, bodies, status codes, and timing information
• 📋 Copy-to-Clipboard - One-click copy for all request/response data
• 🔍 Advanced Filtering - Search by URL, method, status code, or content
• 📱 Cross-platform - Works on Android, iOS, macOS, Windows, Linux
• 🌐 Zero Setup - Just add the interceptor and start monitoring
• 💾 Memory Efficient - Smart cleanup with configurable limits
• 🔒 Secure by Default - Only runs in debug/staging, disabled in production
• 🚀 Developer Friendly - Clean API, comprehensive documentation, and great DX

🚀 Quick Start

Get up and running in under 2 minutes:

1️⃣ Install

dependencies:
  cote_network_logger: ^1.2.0

2️⃣ Initialize

import 'package:cote_network_logger/cote_network_logger.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Start the network logger (only works in debug/staging)
  await startNetworkLogServer();
  
  runApp(MyApp());
}

3️⃣ Add Interceptor

import 'package:dio/dio.dart';
import 'package:cote_network_logger/cote_network_logger.dart';

final dio = Dio();
dio.interceptors.add(const CoteNetworkLogger());

4️⃣ Open Dashboard

• iOS Simulator: http://localhost:3000 in your Mac browser
• Android Emulator: http://localhost:3000 in emulator browser
• Physical Device: http://YOUR_DEVICE_IP:3000 in any browser

That's it! 🎉 Make HTTP requests and watch them appear in real-time.

---

📝 Changelog

See CHANGELOG.md for full release notes.

---

🌍 Environment Support

The network logger is available in the following environments:

• ✅ Debug Mode: Always enabled during development
• ✅ Staging Environment: Enabled when STAGING_ENV=true
• ✅ Release Mode: Can be enabled with NETWORK_LOGGER_ENABLED=true
• ❌ Production Environment: Disabled by default for security

Running in Different Environments

Debug Mode (Default)

flutter run

Staging Environment

flutter run --dart-define=STAGING_ENV=true

Release Mode with Logger

flutter run --release --dart-define=NETWORK_LOGGER_ENABLED=true

Building for Different Flavors

For Android:

# Debug flavor
flutter build apk --flavor debug

# Staging flavor
flutter build apk --flavor staging --dart-define=STAGING_ENV=true

# Production flavor
flutter build apk --flavor production

For iOS:

# Debug configuration
flutter build ios --flavor Debug

# Staging configuration
flutter build ios --flavor Staging --dart-define=STAGING_ENV=true

# Release configuration
flutter build ios --flavor Release

📱 Platform Support

iOS Simulator (Best for Mac)

1. Run your Flutter app on iOS simulator
2. Open browser on your Mac
3. Navigate to: http://localhost:3000

Android Emulator

1. Run your Flutter app on Android emulator
2. Open browser on the emulator itself
3. Navigate to: http://localhost:3000

Physical Devices

1. Find your device's IP address
2. Open browser on any device on the same network
3. Navigate to: http://YOUR_DEVICE_IP:3000

🔧 Troubleshooting

Dashboard Not Loading

• Check if server is running (look for console message)
• Verify platform support
• Check environment settings
• Ensure port 3000 is not blocked

iOS Local Network Setup

1. Go to iOS Settings → Privacy & Security → Local Network
2. Find your app and toggle it ON
3. Run your app and try accessing the dashboard

📚 API Reference

Main Functions

// Start the network logger server
Future<bool> startNetworkLogServer()

// Stop the network logger server
Future<void> stopNetworkLogServer()

// Check if server is running
bool isNetworkLogServerRunning()

// Get dashboard URL
String? getNetworkLogDashboardUrl()

// Check platform support
bool isNetworkLoggerSupported()

Configuration

class NetworkLoggerConfig {
  // Check if logger is enabled
  static bool get isEnabled

  // Get current flavor/environment
  static String get currentFlavor

  // Check if logger is enabled in specific flavor
  static bool isEnabledInFlavor(String flavor)
}

Configuration Examples

Basic Setup

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Start the logger (automatically handles environment)
  await NetworkLogger.start();
  
  runApp(MyApp());
}

Environment Configuration

void setupNetworkLogger() {
  // Configure with predefined environments
  NetworkLogger.configure(
    environments: [
      NetworkLoggerEnvironment.debug,
      NetworkLoggerEnvironment.staging,
      NetworkLoggerEnvironment.qa,
    ],
  );
}

// Or use custom environments
NetworkLogger.configure(
  environments: [
    NetworkLoggerEnvironment.custom(
      name: 'uat',
      enableByDefault: true,
      description: 'User Acceptance Testing',
    ),
    NetworkLoggerEnvironment.custom(
      name: 'preprod',
      enableByDefault: true,
      description: 'Pre-Production Environment',
    ),
  ],
);

Enable in Release Mode

// Enable logger in release mode for specific environments
NetworkLogger.configure(
  environments: [NetworkLoggerEnvironment.staging],
  enableInRelease: true,
);

Check Logger Status

// Check if logger is running
if (NetworkLogger.isRunning) {
  // Get dashboard URL
  final url = NetworkLogger.dashboardUrl;
  print('Dashboard available at: $url');
}

Environment-Specific Behavior

// The logger automatically handles different environments:
// - Debug: Always enabled
// - Staging: Enabled by default
// - QA: Enabled by default
// - Beta: Enabled by default
// - Production: Always disabled
// - Custom: Configurable via enableByDefault

🎯 Use Cases

Quick Start

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await NetworkLogger.start();
  runApp(MyApp());
}

QA Testing Setup

void setupForQATesting() {
  NetworkLogger.configure(
    environments: [NetworkLoggerEnvironment.qa],
    enableInRelease: true,
  );
}

Multiple Environment Support

void setupAllEnvironments() {
  NetworkLogger.configure(
    environments: [
      NetworkLoggerEnvironment.debug,
      NetworkLoggerEnvironment.staging,
      NetworkLoggerEnvironment.qa,
      NetworkLoggerEnvironment.beta,
    ],
  );
}

Custom Environment

void setupCustomEnvironment() {
  NetworkLogger.configure(
    environments: [
      NetworkLoggerEnvironment.custom(
        name: 'demo',
        enableByDefault: true,
        description: 'Demo Environment',
      ),
    ],
  );
}

Custom Environment Support

The network logger supports custom environment types for flexible configuration:

1. Add Custom Environments

   // Add your custom environments
   NetworkLoggerConfig.addCustomEnvironment('qa');
   NetworkLoggerConfig.addCustomEnvironment('beta');
   NetworkLoggerConfig.addCustomEnvironment('uat');
   

2. Run with Custom Environment

   # Run with QA environment
   flutter run --dart-define=CUSTOM_ENV=qa --dart-define=NETWORK_LOGGER_ENABLED=true
      
   # Run with Beta environment
   flutter run --dart-define=CUSTOM_ENV=beta --dart-define=NETWORK_LOGGER_ENABLED=true
   

3. Environment-Specific Behavior

   • Debug: Always enabled
   • Staging: Enabled by default
   • Custom: Enabled when NETWORK_LOGGER_ENABLED=true
   • Production: Always disabled

QA Testing in Release Mode

The network logger is particularly useful for QA teams testing release builds in staging environment:

1. Release Mode Testing

   # Build release version with staging environment
   flutter build apk --release --dart-define=STAGING_ENV=true
   

2. Enable Logger in Release

   # Enable logger in release mode for staging environment
   flutter run --release --dart-define=STAGING_ENV=true --dart-define=NETWORK_LOGGER_ENABLED=true
   

3. Benefits for QA Teams

   • Monitor network requests in release builds
   • Debug issues in staging environment
   • Test with production-like performance
   • Maintain security in production

Development Workflow

1. Local Development

   • Debug mode with full logging
   • Real-time request monitoring
   • Immediate feedback

2. Staging Testing

   • Release mode with controlled logging
   • QA team access to network logs
   • Production-like environment

3. Production Deployment

   • Logger automatically disabled
   • No performance impact
   • Secure by default

🎯 Example

Check out the example directory for a complete working example.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Libraries

cote_network_logger

interceptor

log_store

web_server

web_server/dashboard_script

web_server/dashboard_template