npm - logbubble - Versions diffs - 0.1.0 - Mend

logbubble 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 LogBubble Contributors
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,244 @@
+# LogBubble 🫧
+[![npm version](https://badge.fury.io/js/logbubble.svg)](https://badge.fury.io/js/logbubble)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![GitHub](https://img.shields.io/badge/GitHub-LogBubble-blue)](https://github.com/dktiwary007/LogBubble)
+A lightweight, floating log viewer for monitoring network requests and console logs in web applications. Perfect for debugging web apps, Capacitor apps, and Progressive Web Apps (PWAs) directly on mobile devices or in production-like environments.
+[View on npm](https://www.npmjs.com/package/logbubble)
+## Features
+✨ **Floating UI**: Non-intrusive bubble interface that stays accessible without blocking your app
+🌐 **Network Monitoring**: Automatically logs `fetch`, `XMLHttpRequest`, and dynamic script/link loading
+📝 **Console Logging**: Captures `console.log`, `console.warn`, `console.error`, `console.info`, and `console.debug`
+🔔 **Unread Badge**: Shows count of new logs since last view
+📋 **Copy to Clipboard**: Export all logs with timestamps
+🔄 **Auto-initialization**: Works out of the box with zero configuration
+🎨 **Clean UI**: Modern, minimalist design with color-coded log types
+## Installation
+Install LogBubble from npm:
+```bash
+npm install logbubble
+```
+Or with yarn:
+```bash
+yarn add logbubble
+```
+## Usage
+### Auto-initialization (Recommended)
+Simply import LogBubble and it will automatically initialize:
+```javascript
+import "logbubble";
+```
+The floating bubble will appear in the top-right corner of your app.
+### Manual initialization
+If you want more control over when LogBubble initializes:
+```javascript
+import { initNetworkLogger } from "logbubble";
+// Initialize when ready
+initNetworkLogger();
+```
+**Note:** LogBubble has a built-in guard against duplicate initialization, so calling `initNetworkLogger()` multiple times is safe.
+## Examples
+### React (Vite/CRA)
+```javascript
+// main.jsx or index.js
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "logbubble"; // Add this line
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+```
+### Capacitor Apps
+```javascript
+// main.jsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import { initNetworkLogger } from "logbubble";
+// Initialize LogBubble for mobile debugging
+initNetworkLogger();
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+```
+### Vanilla JavaScript
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>My App</title>
+  </head>
+  <body>
+    <script type="module">
+      import "logbubble";
+      // Your app code
+      fetch("https://api.example.com/data")
+        .then((res) => res.json())
+        .then((data) => console.log("Data:", data));
+    </script>
+  </body>
+</html>
+```
+## What Gets Logged?
+LogBubble automatically intercepts and logs:
+- **Fetch requests**: `[NET] GET https://api.example.com/users 200 145ms`
+- **XHR requests**: `[NET] POST https://api.example.com/login 201 312ms`
+- **Dynamic scripts/links**: `[NET] SCRIPT https://cdn.example.com/lib.js LOADED`
+- **Console messages**: `[LOG] User logged in`, `[WARN] Connection slow`, `[ERROR] Failed to load`
+## UI Controls
+- **Bubble**: Click to toggle the log window
+- **Badge**: Shows unread log count (disappears when window is opened)
+- **Clear**: Remove all logs
+- **Copy**: Copy all logs to clipboard with timestamps
+## Development
+### Build
+```bash
+npm run build
+```
+### Watch mode
+```bash
+npm run dev
+```
+### Project Structure
+```
+LogBubble/
+├── core/           # Patching logic for fetch, XHR, DOM, console
+├── ui/             # Floating UI and log store
+├── init.ts         # Main entry point with auto-init
+├── auto.ts         # Side-effect entry point
+├── dist/           # Compiled output
+└── package.json
+```
+## API
+### `initNetworkLogger()`
+Initializes LogBubble and starts intercepting network requests and console logs. Safe to call multiple times (duplicate calls are ignored).
+```javascript
+import { initNetworkLogger } from "logbubble";
+initNetworkLogger();
+```
+### Global Access
+When in a browser environment, LogBubble exposes itself globally:
+```javascript
+// Available on window object
+window.initNetworkLogger();
+```
+## Browser Support
+LogBubble works in all modern browsers and WebView environments:
+- ✅ Chrome/Edge (Chromium)
+- ✅ Firefox
+- ✅ Safari
+- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
+- ✅ Capacitor WebView
+- ✅ Cordova WebView
+## Use Cases
+- 🐛 **Mobile Debugging**: Debug network issues on real devices without DevTools
+- 🚀 **Production Testing**: Monitor requests in production-like environments
+- 📱 **Capacitor/PWA Development**: Essential for debugging hybrid mobile apps
+- 🧪 **QA Testing**: Allow testers to capture and share logs easily
+- 📊 **Performance Monitoring**: Track request timing and errors
+## Known Limitations
+- Browser-only (requires `window` and DOM APIs)
+- Logs are stored in memory only (cleared on page refresh)
+- Maximum 500 logs retained (older logs are automatically removed)
+## Troubleshooting
+### UI not appearing
+Ensure LogBubble is imported at the entry point of your application (before React renders or before any other scripts run).
+### Duplicate logs
+If you see duplicate logs, check that `initNetworkLogger()` is not being called multiple times. LogBubble has a guard against this, but if you call it manually AND import the auto-init module, it may appear twice.
+### Not capturing network requests
+Make sure your app is using native `fetch` or `XMLHttpRequest` APIs. Some custom HTTP clients may not be automatically patched.
+## Support
+For issues, feature requests, or questions, please open an issue on [GitHub](https://github.com/dktiwary007/LogBubble/issues).
+## License
+MIT
+## Contributing
+Contributions are welcome! Please feel free to submit issues or pull requests on [GitHub](https://github.com/dktiwary007/LogBubble).
+### Getting Started with Development
+If you want to contribute to LogBubble:
+1. Clone the repository
+2. Install dependencies: `npm install`
+3. Build the project: `npm run build`
+4. Watch for changes: `npm run dev`
+---
+Built with ❤️ for developers who need better mobile debugging tools.
+**Made by [Deepak Kumar](https://github.com/dktiwary007)**

package/auto.ts ADDED Viewed

@@ -0,0 +1,4 @@
+// auto.ts
+// Side-effect import for auto-initialization
+import { initNetworkLogger } from "./init";
+initNetworkLogger();

package/core/console.ts ADDED Viewed

@@ -0,0 +1,79 @@
+// console.ts
+// Patches console methods to log to the network logger UI
+import { logStore } from "../ui/logStore";
+let isPatching = false;
+export function patchConsole() {
+  if (typeof window === "undefined" || typeof console === "undefined") return;
+  const originalLog = console.log;
+  const originalWarn = console.warn;
+  const originalError = console.error;
+  const originalInfo = console.info;
+  const originalDebug = console.debug;
+  console.log = function (...args: any[]) {
+    originalLog.apply(console, args);
+    if (!isPatching) {
+      isPatching = true;
+      const message = args.map((arg) => formatArg(arg)).join(" ");
+      logStore.addLog(`[LOG] ${message}`, "plugin");
+      isPatching = false;
+    }
+  };
+  console.warn = function (...args: any[]) {
+    originalWarn.apply(console, args);
+    if (!isPatching) {
+      isPatching = true;
+      const message = args.map((arg) => formatArg(arg)).join(" ");
+      logStore.addLog(`[WARN] ${message}`, "plugin");
+      isPatching = false;
+    }
+  };
+  console.error = function (...args: any[]) {
+    originalError.apply(console, args);
+    if (!isPatching) {
+      isPatching = true;
+      const message = args.map((arg) => formatArg(arg)).join(" ");
+      logStore.addLog(`[ERROR] ${message}`, "plugin");
+      isPatching = false;
+    }
+  };
+  console.info = function (...args: any[]) {
+    originalInfo.apply(console, args);
+    if (!isPatching) {
+      isPatching = true;
+      const message = args.map((arg) => formatArg(arg)).join(" ");
+      logStore.addLog(`[INFO] ${message}`, "plugin");
+      isPatching = false;
+    }
+  };
+  console.debug = function (...args: any[]) {
+    originalDebug.apply(console, args);
+    if (!isPatching) {
+      isPatching = true;
+      const message = args.map((arg) => formatArg(arg)).join(" ");
+      logStore.addLog(`[DEBUG] ${message}`, "plugin");
+      isPatching = false;
+    }
+  };
+}
+function formatArg(arg: any): string {
+  if (arg === null) return "null";
+  if (arg === undefined) return "undefined";
+  if (typeof arg === "string") return arg;
+  if (typeof arg === "number" || typeof arg === "boolean") return String(arg);
+  if (arg instanceof Error) return `${arg.name}: ${arg.message}`;
+  try {
+    return JSON.stringify(arg);
+  } catch {
+    return String(arg);
+  }
+}

package/core/dom.ts ADDED Viewed

@@ -0,0 +1,33 @@
+// dom.ts
+// (Optional) Patch dynamic <script> and <link> loading for network logging
+import { logStore } from "../ui/logStore";
+export function patchDOM(logFn: (msg: string) => void) {
+  if (typeof window === "undefined") return;
+  const origCreateElement = document.createElement;
+  document.createElement = function (
+    this: Document,
+    tag: string,
+    options?: ElementCreationOptions,
+  ) {
+    const el = origCreateElement.call(this, tag, options);
+    if (tag === "script" || tag === "link") {
+      el.addEventListener("load", function () {
+        const src =
+          (el as HTMLScriptElement).src || (el as HTMLLinkElement).href;
+        const message = `[NET] ${tag.toUpperCase()} ${src} LOADED`;
+        logFn(message);
+        logStore.addLog(message, "dom");
+      });
+      el.addEventListener("error", function () {
+        const src =
+          (el as HTMLScriptElement).src || (el as HTMLLinkElement).href;
+        const message = `[NET] ${tag.toUpperCase()} ${src} ERROR`;
+        logFn(message);
+        logStore.addLog(message, "dom");
+      });
+    }
+    return el;
+  } as typeof document.createElement;
+}

package/core/fetch.ts ADDED Viewed

@@ -0,0 +1,41 @@
+// fetch.ts
+// Patches window.fetch to log network requests in dev mode (browser/WebView only)
+import { logStore } from "../ui/logStore";
+export function patchFetch(logFn: (msg: string) => void) {
+  if (typeof window === "undefined" || typeof window.fetch !== "function")
+    return;
+  const originalFetch = window.fetch;
+  window.fetch = async function (
+    this: typeof globalThis,
+    input: RequestInfo | URL,
+    init?: RequestInit,
+  ) {
+    const method =
+      (init && init.method) ||
+      (typeof input === "object" && "method" in input && input.method) ||
+      "GET";
+    const url =
+      typeof input === "string"
+        ? input
+        : input instanceof URL
+          ? input.href
+          : input.url;
+    const start = Date.now();
+    try {
+      const response = await originalFetch.call(this, input, init);
+      const ms = Date.now() - start;
+      const message = `[NET] ${method} ${url} ${response.status} ${ms}ms`;
+      logFn(message);
+      logStore.addLog(message, "fetch");
+      return response;
+    } catch (err) {
+      const ms = Date.now() - start;
+      const message = `[NET] ${method} ${url} ERROR ${ms}ms`;
+      logFn(message);
+      logStore.addLog(message, "fetch");
+      throw err;
+    }
+  } as typeof window.fetch;
+}

package/core/xhr.ts ADDED Viewed

@@ -0,0 +1,38 @@
+// xhr.ts
+// Patches XMLHttpRequest to log network requests in dev mode (browser/WebView only)
+import { logStore } from "../ui/logStore";
+export function patchXHR(logFn: (msg: string) => void) {
+  if (
+    typeof window === "undefined" ||
+    typeof window.XMLHttpRequest !== "function"
+  )
+    return;
+  const OriginalXHR = window.XMLHttpRequest;
+  function PatchedXHR(this: XMLHttpRequest) {
+    const xhr = new OriginalXHR();
+    let url = "";
+    let method = "";
+    let start = 0;
+    xhr.open = new Proxy(xhr.open, {
+      apply(target, thisArg, args: [string, string | URL, ...any[]]) {
+        method = args[0];
+        url = typeof args[1] === "string" ? args[1] : args[1].href;
+        return Reflect.apply(target, thisArg, args);
+      },
+    });
+    xhr.addEventListener("loadstart", () => {
+      start = Date.now();
+    });
+    xhr.addEventListener("loadend", () => {
+      const ms = Date.now() - start;
+      const message = `[NET] ${method} ${url} ${xhr.status} ${ms}ms`;
+      logFn(message);
+      logStore.addLog(message, "xhr");
+    });
+    return xhr;
+  }
+  PatchedXHR.prototype = OriginalXHR.prototype;
+  window.XMLHttpRequest = PatchedXHR as any;
+}

package/dist/auto.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/auto.js ADDED Viewed

@@ -0,0 +1,4 @@
+// auto.ts
+// Side-effect import for auto-initialization
+import { initNetworkLogger } from "./init";
+initNetworkLogger();

package/dist/core/console.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function patchConsole(): void;

package/dist/core/console.js ADDED Viewed

@@ -0,0 +1,76 @@
+// console.ts
+// Patches console methods to log to the network logger UI
+import { logStore } from "../ui/logStore";
+let isPatching = false;
+export function patchConsole() {
+    if (typeof window === "undefined" || typeof console === "undefined")
+        return;
+    const originalLog = console.log;
+    const originalWarn = console.warn;
+    const originalError = console.error;
+    const originalInfo = console.info;
+    const originalDebug = console.debug;
+    console.log = function (...args) {
+        originalLog.apply(console, args);
+        if (!isPatching) {
+            isPatching = true;
+            const message = args.map((arg) => formatArg(arg)).join(" ");
+            logStore.addLog(`[LOG] ${message}`, "plugin");
+            isPatching = false;
+        }
+    };
+    console.warn = function (...args) {
+        originalWarn.apply(console, args);
+        if (!isPatching) {
+            isPatching = true;
+            const message = args.map((arg) => formatArg(arg)).join(" ");
+            logStore.addLog(`[WARN] ${message}`, "plugin");
+            isPatching = false;
+        }
+    };
+    console.error = function (...args) {
+        originalError.apply(console, args);
+        if (!isPatching) {
+            isPatching = true;
+            const message = args.map((arg) => formatArg(arg)).join(" ");
+            logStore.addLog(`[ERROR] ${message}`, "plugin");
+            isPatching = false;
+        }
+    };
+    console.info = function (...args) {
+        originalInfo.apply(console, args);
+        if (!isPatching) {
+            isPatching = true;
+            const message = args.map((arg) => formatArg(arg)).join(" ");
+            logStore.addLog(`[INFO] ${message}`, "plugin");
+            isPatching = false;
+        }
+    };
+    console.debug = function (...args) {
+        originalDebug.apply(console, args);
+        if (!isPatching) {
+            isPatching = true;
+            const message = args.map((arg) => formatArg(arg)).join(" ");
+            logStore.addLog(`[DEBUG] ${message}`, "plugin");
+            isPatching = false;
+        }
+    };
+}
+function formatArg(arg) {
+    if (arg === null)
+        return "null";
+    if (arg === undefined)
+        return "undefined";
+    if (typeof arg === "string")
+        return arg;
+    if (typeof arg === "number" || typeof arg === "boolean")
+        return String(arg);
+    if (arg instanceof Error)
+        return `${arg.name}: ${arg.message}`;
+    try {
+        return JSON.stringify(arg);
+    }
+    catch {
+        return String(arg);
+    }
+}

package/dist/core/dom.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function patchDOM(logFn: (msg: string) => void): void;

package/dist/core/dom.js ADDED Viewed

@@ -0,0 +1,26 @@
+// dom.ts
+// (Optional) Patch dynamic <script> and <link> loading for network logging
+import { logStore } from "../ui/logStore";
+export function patchDOM(logFn) {
+    if (typeof window === "undefined")
+        return;
+    const origCreateElement = document.createElement;
+    document.createElement = function (tag, options) {
+        const el = origCreateElement.call(this, tag, options);
+        if (tag === "script" || tag === "link") {
+            el.addEventListener("load", function () {
+                const src = el.src || el.href;
+                const message = `[NET] ${tag.toUpperCase()} ${src} LOADED`;
+                logFn(message);
+                logStore.addLog(message, "dom");
+            });
+            el.addEventListener("error", function () {
+                const src = el.src || el.href;
+                const message = `[NET] ${tag.toUpperCase()} ${src} ERROR`;
+                logFn(message);
+                logStore.addLog(message, "dom");
+            });
+        }
+        return el;
+    };
+}

package/dist/core/fetch.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function patchFetch(logFn: (msg: string) => void): void;

package/dist/core/fetch.js ADDED Viewed

@@ -0,0 +1,34 @@
+// fetch.ts
+// Patches window.fetch to log network requests in dev mode (browser/WebView only)
+import { logStore } from "../ui/logStore";
+export function patchFetch(logFn) {
+    if (typeof window === "undefined" || typeof window.fetch !== "function")
+        return;
+    const originalFetch = window.fetch;
+    window.fetch = async function (input, init) {
+        const method = (init && init.method) ||
+            (typeof input === "object" && "method" in input && input.method) ||
+            "GET";
+        const url = typeof input === "string"
+            ? input
+            : input instanceof URL
+                ? input.href
+                : input.url;
+        const start = Date.now();
+        try {
+            const response = await originalFetch.call(this, input, init);
+            const ms = Date.now() - start;
+            const message = `[NET] ${method} ${url} ${response.status} ${ms}ms`;
+            logFn(message);
+            logStore.addLog(message, "fetch");
+            return response;
+        }
+        catch (err) {
+            const ms = Date.now() - start;
+            const message = `[NET] ${method} ${url} ERROR ${ms}ms`;
+            logFn(message);
+            logStore.addLog(message, "fetch");
+            throw err;
+        }
+    };
+}

package/dist/core/xhr.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function patchXHR(logFn: (msg: string) => void): void;

package/dist/core/xhr.js ADDED Viewed

@@ -0,0 +1,34 @@
+// xhr.ts
+// Patches XMLHttpRequest to log network requests in dev mode (browser/WebView only)
+import { logStore } from "../ui/logStore";
+export function patchXHR(logFn) {
+    if (typeof window === "undefined" ||
+        typeof window.XMLHttpRequest !== "function")
+        return;
+    const OriginalXHR = window.XMLHttpRequest;
+    function PatchedXHR() {
+        const xhr = new OriginalXHR();
+        let url = "";
+        let method = "";
+        let start = 0;
+        xhr.open = new Proxy(xhr.open, {
+            apply(target, thisArg, args) {
+                method = args[0];
+                url = typeof args[1] === "string" ? args[1] : args[1].href;
+                return Reflect.apply(target, thisArg, args);
+            },
+        });
+        xhr.addEventListener("loadstart", () => {
+            start = Date.now();
+        });
+        xhr.addEventListener("loadend", () => {
+            const ms = Date.now() - start;
+            const message = `[NET] ${method} ${url} ${xhr.status} ${ms}ms`;
+            logFn(message);
+            logStore.addLog(message, "xhr");
+        });
+        return xhr;
+    }
+    PatchedXHR.prototype = OriginalXHR.prototype;
+    window.XMLHttpRequest = PatchedXHR;
+}

package/dist/init.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function initNetworkLogger(): void;