react-logger-app 1.1.3 → 1.1.4

package/README.md

@@ -1,46 +1,58 @@
 # ReactLoggerApp 🐞
 
-A professional, high-performance visual logging system for Ionic React applications. Monitor logs, errors, and JSON objects in real-time with a beautiful floating UI.
+A professional, high-performance visual logging system for **Ionic React** applications. Monitor logs, errors, and JSON objects in real-time with a beautiful floating UI that works seamlessly on **iOS**, **Android**, and **Web**.
 
-## Features
+![npm version](https://img.shields.io/npm/v/react-logger-app)
+![license](https://img.shields.io/npm/l/react-logger-app)
+![downloads](https://img.shields.io/npm/dm/react-logger-app)
 
-- ✅ **Three Log Levels**: Debug, Error, and Object.
-- 🐞 **Floating UI**: Draggable, minimizable, and responsive button.
-- 📦 **JSON Tree Viewer**: Expandable visualization for complex objects.
-- 💾 **Persistence**: Option to store logs in `localStorage` or `IndexedDB`.
-- 🔍 **Search & Filters**: Quickly find specific logs or filter by level.
-- 📥 **Export**: Download logs as JSON files.
-- 🌓 **Dark Mode**: Automatic support for system theme.
-- 🚀 **Virtualized List**: Handles thousands of logs without performance loss.
+## ✨ Features
 
-## Installation
+- 🐞 **Three Log Levels**: Debug, Error, and Object
+- � **Mobile-First Design**: Optimized for iOS and Android (WebView compatible)
+- 🎨 **Liquid Glass UI**: Premium glassmorphism design with neon accents
+- 🖱️ **Draggable Floating Button**: Minimizable, repositionable trigger
+- 📦 **JSON Tree Viewer**: Expandable visualization for complex objects
+- 💾 **Persistent Storage**: Save logs across sessions (localStorage/IndexedDB)
+- 🔍 **Search & Filters**: Quickly find specific logs or filter by level
+- 📥 **Export Logs**: Download as JSON files
+- 🚀 **Virtualized List**: Handles thousands of logs without performance loss
+- 🌐 **Cross-Platform**: Works in React components and TypeScript classes
+- 🎯 **Zero Dependencies**: Lightweight with minimal peer dependencies
+
+## 📦 Installation
 
 ```bash
 npm install react-logger-app
 # or
 yarn add react-logger-app
+# or
+pnpm add react-logger-app
 ```
 
-## Setup
+## 🚀 Quick Start
 
-Wrap your application with the `LoggerProvider` and add the `LoggerViewer` component (ideally in your `App.tsx`).
+### 1. Setup Provider
+
+Wrap your application with `LoggerProvider` and add `LoggerViewer` (typically in `App.tsx`):
 
 ```tsx
 import { LoggerProvider, LoggerViewer } from 'react-logger-app';
+import { IonApp } from '@ionic/react';
 
 const App: React.FC = () => (
   <LoggerProvider config={{ persistence: true, maxLogs: 1000 }}>
     <IonApp>
-      {/* Your app components */}
+      {/* Your app routes and components */}
       <LoggerViewer />
     </IonApp>
   </LoggerProvider>
 );
-```
 
-## Usage
+export default App;
+```
 
-Use the `useLogger` hook anywhere in your components.
+### 2. Use in React Components
 
 ```tsx
 import { useLogger } from 'react-logger-app';
@@ -48,12 +60,12 @@ import { useLogger } from 'react-logger-app';
 const MyComponent: React.FC = () => {
   const { debug, error, object } = useLogger();
 
-  const handleAction = () => {
+  const handleAction = async () => {
     debug('Process started');
     
     try {
-      const userData = { id: 1, name: 'John Doe', roles: ['admin', 'user'] };
-      object(userData, 'User Data');
+      const response = await fetchData();
+      object(response, 'API Response');
     } catch (e) {
       error(e as Error);
     }
@@ -63,67 +75,178 @@ const MyComponent: React.FC = () => {
 };
 ```
 
-### Usage in TypeScript Classes
+### 3. Use in TypeScript Classes
 
-You can also use the logger outside of React components (e.g., in services, helpers, or business logic classes).
+Perfect for services, utilities, and business logic outside React:
 
 ```tsx
 import { Logger } from 'react-logger-app';
 
-class MyService {
-  doWork() {
-    Logger.debug('Starting work...', 'MyService');
+class AuthService {
+  async login(credentials: Credentials) {
+    Logger.debug('Login attempt started', 'AuthService');
     
     try {
-      // Logic
-      Logger.object({ status: 'ok' }, 'Service Result');
-    } catch (e) {
-      Logger.error(e as Error);
+      const user = await api.authenticate(credentials);
+      Logger.object(user, 'Authenticated User');
+      return user;
+    } catch (error) {
+      Logger.error(error as Error);
+      throw error;
     }
   }
 }
 ```
 
-> [!NOTE]
-> Logs sent via `Logger` will be buffered if the `LoggerProvider` is not yet mounted and will be flushed as soon as the UI is ready.
+> **Note**: Logs sent via `Logger` before the provider mounts are buffered and displayed once the UI is ready.
 
-### Configuration Options
+## ⚙️ Configuration Options
 
 | Option | Type | Default | Description |
-| --- | --- | --- | --- |
-| `persistence` | `boolean` | `false` | Enable log storage between sessions. |
-| `persistenceDriver` | `'localStorage' \| 'indexedDB'` | `'localStorage'` | Choose where to store logs. |
-| `maxLogs` | `number` | `500` | Maximum number of logs to keep. |
-| `onLogAdded` | `(log: LogEntry) => void` | `undefined` | Callback fired every time a log is added. |
-
-## Local Development & Demo
-
-To see the Liquid Glass logger in action within a sample Ionic React environment:
-
-1.  **Build the Library**:
-    ```bash
-    npm run build
-    ```
-2.  **Run the Demo**:
-    ```bash
-    cd example
-    npm install
-    npm run dev
-    ```
-3.  **View**: Open `http://localhost:5173` in your browser.
-
-## API Reference
-
-### `useLogger()`
-Returns:
-- `debug(message: string)`: Log a debug message.
-- `error(message: string | Error)`: Log an error or Error object.
-- `object(obj: any, title?: string)`: Log a serializable object.
-- `clear()`: Delete all current logs.
-- `exportLogs()`: Get an array of all `LogEntry` objects.
-- `logs`: Current array of logs.
-- `unreadCount`: Number of logs added while panel was closed.
-
-## License
-
-MIT
+|--------|------|---------|-------------|
+| `persistence` | `boolean` | `false` | Enable log storage between sessions |
+| `persistenceDriver` | `'localStorage'` \| `'indexedDB'` | `'localStorage'` | Storage backend for persisted logs |
+| `maxLogs` | `number` | `500` | Maximum number of logs to retain |
+| `onLogAdded` | `(log: LogEntry) => void` | `undefined` | Callback fired when a log is added |
+
+### Example with Custom Config
+
+```tsx
+<LoggerProvider 
+  config={{
+    persistence: true,
+    persistenceDriver: 'indexedDB',
+    maxLogs: 2000,
+    onLogAdded: (log) => {
+      if (log.level === 'ERROR') {
+        // Send to analytics or crash reporting
+        analytics.trackError(log);
+      }
+    }
+  }}
+>
+  <App />
+</LoggerProvider>
+```
+
+## 📱 Platform Support
+
+### ✅ Fully Tested On:
+- **iOS** (Safari, WKWebView)
+- **Android** (Chrome WebView, System WebView)
+- **Web** (Chrome, Safari, Firefox, Edge)
+
+### 🔧 Android-Specific Optimizations (v1.1.3+)
+- Solid background fallback for WebView compatibility
+- Disabled `backdrop-filter` on mobile to prevent rendering artifacts
+- Conditional rendering to avoid z-index conflicts
+- No animations on small screens for smoother performance
+
+## 🎨 UI Features
+
+### Floating Button
+- **Draggable**: Reposition anywhere on screen
+- **Badge Counter**: Shows unread log count
+- **Auto-hide**: Disappears when panel is open (prevents visual conflicts)
+- **Persistent Position**: Remembers location after drag
+
+### Log Panel
+- **Full-screen on Mobile**: Optimized for small screens
+- **Virtualized Scrolling**: Smooth performance with 1000+ logs
+- **Search Bar**: Filter logs by message or title
+- **Level Filters**: Show only DEBUG, ERROR, or OBJECT logs
+- **Export Button**: Download logs as JSON
+- **Clear Button**: Remove all logs with confirmation
+
+## 📖 API Reference
+
+### `useLogger()` Hook
+
+Returns an object with the following methods:
+
+```tsx
+const {
+  debug,      // (message: string) => void
+  error,      // (message: string | Error) => void
+  object,     // (obj: any, title?: string) => void
+  clear,      // () => void
+  exportLogs, // () => LogEntry[]
+  logs,       // LogEntry[]
+  unreadCount // number
+} = useLogger();
+```
+
+### `Logger` Static Class
+
+For use outside React components:
+
+```tsx
+Logger.debug(message: string, title?: string): void
+Logger.error(error: Error | string, title?: string): void
+Logger.object(data: any, title?: string): void
+```
+
+### `LogEntry` Type
+
+```tsx
+interface LogEntry {
+  id: string;
+  timestamp: string;
+  level: 'DEBUG' | 'ERROR' | 'OBJECT';
+  message: string;
+  title?: string;
+  data?: any;
+  stack?: string;
+}
+```
+
+## 🛠️ Local Development
+
+To run the demo app and test the logger:
+
+```bash
+# 1. Build the library
+npm run build
+
+# 2. Run the example app
+cd example
+npm install
+npm run dev
+
+# 3. Open http://localhost:5173
+```
+
+## 🐛 Troubleshooting
+
+### Button not visible on Android
+- **Solution**: Update to v1.1.3+ which includes Android-specific fixes
+- Ensure `LoggerViewer` is placed inside `IonApp` or at root level
+- Check z-index conflicts with other fixed/absolute positioned elements
+
+### Logs not persisting
+- Verify `persistence: true` in config
+- Check browser storage permissions
+- For IndexedDB, ensure browser supports it
+
+### Performance issues with many logs
+- Reduce `maxLogs` config value
+- Use `clear()` periodically
+- Enable persistence and restart app to clear memory
+
+## 📄 License
+
+MIT © [Reinner Leiva](https://github.com/raysdl9012)
+
+## 🤝 Contributing
+
+Contributions are welcome! Please open an issue or submit a pull request.
+
+## 📦 Package Info
+
+- **Package**: `react-logger-app`
+- **Repository**: [github.com/raysdl9012/react-logger](https://github.com/raysdl9012/react-logger)
+- **NPM**: [npmjs.com/package/react-logger-app](https://www.npmjs.com/package/react-logger-app)
+
+---
+
+Made with ❤️ for the Ionic React community

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-logger-app",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "A professional visual logging system for Ionic React applications.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",