in_app_console 1.1.0

in_app_console: ^1.1.0 copied to clipboard

From pain point to Idea #

Pain point

• Developers can build and view logs, but testers normally can't.
• In micro-frontend architecture, it's difficult to track logs when each module logs differently.

Idea

• The package bridges that gap by providing unified in-app log viewing.
• Enables both developers and testers to easily check logs across all modules in one centralized console, making debugging faster and bug reports more detailed.

Designed for Micro-frontend architecture #

┌─────────────────────────────────────────────────────────────────────────────────────┐
│              Flutter App with Micro-frontend architecture                           │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ [Auth Module]     [Payment Module]     [Profile Module]     [Chat Module]           │
│     Logger            Logger             Logger             Logger                  │
│ setLabel('Auth')  setLabel('Payment')  setLabel('Profile')  setLabel('Chat')        │
│      │                 │                  │                 │                      │
│      └─────────────────┼──────────────────┼─────────────────┘                      │
│                        │                  │                                        │
│                        ▼                  ▼                                        │
├─────────────────────────────────────────────────────────────────────────────────────┤
│                       [Platform Application]                                       │
│                        InAppConsole (Central)                                      │
│                                                                                     │
│    Registered Loggers with Tags: [Auth, Payment, Profile, Chat]                    │
│                                                                                     │
│    Unified History with Tags:                                                      │
│    • [Auth] User login                                                             │
│    • [Payment] Payment failed                                                      │
│    • [Profile] Profile updated                                                     │
│    • [Chat] Message sent                                                           │
│                              │                                                     │
│                              ▼                                                     │
├─────────────────────────────────────────────────────────────────────────────────────┤
│                         Console UI Screen                                          │
│                                                                                     │
│    Tagged Log Display:                                                             │
│    14:23 [Auth] User login successful                                              │
│    14:24 [Payment] Payment gateway timeout                                         │
│    14:25 [Profile] Profile image uploaded                                          │
│    14:26 [Chat] Message sent                                                       │
│                                                                                     │
└─────────────────────────────────────────────────────────────────────────────────────┘

Screenshots #

Usage #

1. Add dependency #

dependencies:
  in_app_console: ^1.1.0

2. Import the package #

Add the following import to your Dart files where you want to use the in-app console:

import 'package:in_app_console/in_app_console.dart';

3. Create logger and add to console #

/// Create logger
final logger = InAppLogger();
logger.setLabel('Chat module'); // Optional: set a label

// Enable console (typically only in debug/development mode)
InAppConsole.kEnableConsole = true;

/// Add logger to console
InAppConsole.instance.addLogger(logger);

4. Log messages #

// Info logs
logger.logInfo('User logged in successfully');

// Warning logs
logger.logWarning(message: 'Low storage space');

// Error logs
logger.logError(
  message: 'Failed to load data',
  error: error,
  stackTrace: stackTrace,
);

5. Show console screen #

// Using InAppConsole helper method
InAppConsole.instance.openConsole(context);