🚀 CoteNetworkLogger #

A powerful Flutter package for real-time HTTP network monitoring during development.

🛠️ Quick Start (Dio) #

Add to your pubspec.yaml:

dependencies:
  cote_network_logger: ^1.0.5

Start the server in your main.dart:

import 'package:cote_network_logger/cote_network_logger.dart';

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

Add the interceptor to your Dio instance:

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

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

Open http://localhost:3000 in your browser to see the dashboard!

✨ Features #

🔍 Real-time network monitoring - See HTTP requests as they happen
📱 Cross-platform support - Android, iOS, macOS, Windows, Linux
🌐 Web dashboard - Beautiful browser-based interface
🎨 Material Design 3 - Modern, responsive UI
📊 Advanced filtering - Search, filter by method, status codes
🔄 Auto-refresh - Smart refresh that pauses during user interaction
💾 Memory efficient - In-memory storage with auto-cleanup
🎯 Development-only - Automatically disabled in release mode

🧑‍💻 Advanced Usage #

Manual Logging #

final logger = CoteNetworkLogger();

// Log a request
logger.logRequest(
  id: 'unique_request_id',
  url: 'https://api.example.com/data',
  method: 'GET',
  headers: {'Authorization': 'Bearer token'},
  requestBody: null,
);

// Log the response
logger.logResponse(
  id: 'unique_request_id',
  url: 'https://api.example.com/data',
  method: 'GET',
  statusCode: 200,
  headers: {'content-type': 'application/json'},
  responseBody: {'data': 'response'},
);

HTTP Package Interceptor #

import 'package:http/http.dart' as http;
import 'package:cote_network_logger/cote_network_logger.dart';

class NetworkLoggerInterceptor extends http.BaseClient {
  final http.Client _inner;
  final CoteNetworkLogger _logger;

  NetworkLoggerInterceptor(this._inner, this._logger);

  @override
  Future<http.StreamedResponse> send(http.BaseRequest request) async {
    final id = DateTime.now().millisecondsSinceEpoch.toString();
    
    // Log request
    _logger.logRequest(
      id: id,
      url: request.url.toString(),
      method: request.method,
      headers: request.headers,
      requestBody: request is http.Request ? request.body : null,
    );

    try {
      final response = await _inner.send(request);
      
      // Log response
      final responseBody = await response.stream.bytesToString();
      _logger.logResponse(
        id: id,
        url: request.url.toString(),
        method: request.method,
        statusCode: response.statusCode,
        headers: response.headers,
        responseBody: responseBody,
      );

      // Return new streamed response with the body
      return http.StreamedResponse(
        Stream.value(responseBody.codeUnits),
        response.statusCode,
        headers: response.headers,
        reasonPhrase: response.reasonPhrase,
      );
    } catch (e, stackTrace) {
      // Log error
      _logger.logError(
        id: id,
        url: request.url.toString(),
        method: request.method,
        error: e.toString(),
        stackTrace: stackTrace.toString(),
      );
      rethrow;
    }
  }
}

// Usage example:
final logger = CoteNetworkLogger();
final client = NetworkLoggerInterceptor(http.Client(), logger);

// Use the client for HTTP requests
final response = await client.get(Uri.parse('https://api.example.com/data'));

Example Usage #

class ApiService {
  final Dio _dio = Dio();

  ApiService() {
    // Add the network logger
    _dio.interceptors.add(const CoteNetworkLogger());
  }

  Future<Response> getPosts() {
    return _dio.get('https://jsonplaceholder.typicode.com/posts');
  }

  Future<Response> createPost(Map<String, dynamic> data) {
    return _dio.post('https://jsonplaceholder.typicode.com/posts', data: data);
  }
}

🌐 Accessing the Dashboard #

The dashboard access method depends on your development setup:

📱 Android Emulator (Most Common) #

Run your Flutter app on Android emulator
Open Arc browser on your Mac (host machine)
Navigate to: http://localhost:3000
Make HTTP requests in your app to see them appear!

📱 iOS Simulator #

Run your Flutter app on iOS simulator
Open browser on your Mac (host machine)
Navigate to: http://localhost:3000

📱 Physical Android Device #

Find your device's IP address:
- Go to Settings > About > Status > IP Address
- Example: 192.168.1.100
Open browser on any device on the same network
Navigate to: http://YOUR_DEVICE_IP:3000
- Example: http://192.168.1.100:3000

📱 Physical iOS Device #

Find your device's IP address:
- Go to Settings > Wi-Fi > Your Network > IP Address
- Example: 192.168.1.101
Open browser on any device on the same network
Navigate to: http://YOUR_DEVICE_IP:3000
- Example: http://192.168.1.101:3000

💻 Desktop (macOS/Windows/Linux) #

Run your Flutter app
Open browser on the same machine
Navigate to: http://localhost:3000

🎯 Dashboard Features #

Real-time Monitoring #

⚡ Auto-refresh every 3 seconds
🤚 Smart pause during user interaction (15 seconds)
📊 Live statistics (total requests, errors, last updated)

Advanced Filtering #

🔍 Search by URL, method, status code
🏷️ Filter by HTTP method (GET, POST, PUT, DELETE, PATCH)
📈 Filter by status code (2xx Success, 4xx Client Error, 5xx Server Error)

Beautiful Interface #

🎨 Material Design 3 with gradients and animations
📱 Responsive design for all screen sizes
🌈 Syntax-highlighted JSON with collapsible sections
📋 Copy JSON functionality with visual feedback
🔄 Perfect scrolling with position preservation

🧪 Testing the Setup #

Run the test example to verify everything works:

flutter run example/test_dashboard.dart

This will:

Start the dashboard server
Show you the correct URL for your platform
Provide test buttons to make HTTP requests
Verify the dashboard receives and displays the requests

🔧 Troubleshooting #

Dashboard Not Loading #

Android Emulator Issue

Problem: "Can't access http://localhost:3000 from Mac browser"

Solution: The server runs on the emulator, but your Mac browser needs to connect to it:

✅ Correct: Open browser on your Mac and go to http://localhost:3000
❌ Incorrect: Trying to open browser on the emulator itself

Network Connectivity

Problem: "Connection refused" or "Can't connect"

Solutions:

Check server is running: Look for console message ✅ NetworkLogWebServer: Server started successfully!
Verify platform support: Only works on Android, iOS, macOS, Windows, Linux (not web browsers)
Check debug mode: Only works in debug mode, not release builds
Firewall: Ensure port 3000 is not blocked

Physical Device Issues

Problem: "Can't access dashboard from other devices"

Solutions:

Same network: Ensure both devices are on the same Wi-Fi network
Correct IP: Use the device's IP address, not localhost
Firewall: Check device firewall settings allow incoming connections

Performance Issues #

Memory Usage

Dashboard automatically keeps only the last 200 logs
Old logs are automatically cleaned up
No persistent storage - everything is in memory

Auto-refresh Interruption

Dashboard pauses auto-refresh during user interaction
Scrolling in JSON containers pauses for 15 seconds
Main scrolling pauses for 10 seconds
Manual refresh button always available

📚 API Reference #