memetalk-memetalk-browser-console-forward

Forward browser console logs (console.log, warn, error, unhandled exceptions) to your server terminal. Built for AI-assisted debugging — no more copying error messages from browser to terminal.

Install

npm install memetalk-memetalk-browser-console-forward
# or
yarn add memetalk-memetalk-browser-console-forward
# or
pnpm add memetalk-memetalk-browser-console-forward

Usage

1. Server Setup (Express + Socket.IO)

import express from 'express';
import { Server } from 'socket.io';
import { createServer } from 'http';
import { setup } from 'memetalk-browser-console-forward/server';

const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer);

// Enable browser log forwarding
setup(app, io);

// Or use them separately
// attachToExpress(app);
// attachToSocketIO(io);

2. Client Setup (Vite/Webpack/Next.js)

// main.tsx or _app.tsx
import { initDevLogger } from 'memetalk-browser-console-forward/client';

// Only runs in development (Vite)
if (import.meta.env.DEV) {
  initDevLogger({
    serverUrl: 'http://localhost:3001',
  });
}

// Next.js
import { initDevLogger } from 'memetalk-browser-console-forward/client';

if (process.env.NODE_ENV === 'development') {
  initDevLogger({
    serverUrl: 'http://localhost:3001',
    // Optional: custom socket path
    socketPath: '/socket.io',
  });
}

What You'll See

In your server terminal:

🔵 [BROWSER]  14:32:01  /chat/abc123  (Chrome)
   "Sending message", {"characterId": "abc123"}

🟡 [BROWSER]  14:32:02  /chat/abc123  (Chrome)
   React Hook useEffect has a missing dependency: 'character'

🔴 [BROWSER]  14:32:03  /chat/abc123  (Chrome)
   TypeError: Cannot read properties of undefined (reading 'name')
   at Chat (Chat.tsx:42:15)
       at renderWithHooks (react-dom.development.js:16305:18)

💥 [BROWSER]  14:32:04  /chat/abc123  (Firefox)
   Unhandled Promise Rejection: Network Error
   at createError (axios.js:16:15)

Options

Client

interface ClientOptions {
  serverUrl: string;                    // Required: your server URL
  socketPath?: string;                  // Default: "/socket.io"
  metadata?: Record<string, any>;       // Extra data attached to each log
  levels?: ('log' | 'info' | 'warn' | 'error' | 'crash')[];  // Default: all
  sampleRate?: number;                  // 0-1, for high-traffic apps
}

Server

interface ServerOptions {
  httpPath?: string;                    // Default: "/__browser-logs"
  socketEvent?: string;                 // Default: "browser-log"
  formatter?: (entry) => string;          // Custom output format
  filter?: (entry) => boolean;           // Skip certain logs
  enableInProduction?: boolean;          // Default: false
}

Advanced Server Config

import { setup } from 'memetalk-browser-console-forward/server';

setup(app, io, {
  // Custom filter — ignore noisy third-party scripts
  filter: (entry) => !entry.url?.includes('chrome-extension'),

  // Custom formatter
  formatter: (entry) => {
    return `[${entry.level.toUpperCase()}] ${entry.messages.join(' ')}\n`;
  },

  // Enable in production (use with caution!)
  enableInProduction: false,
});

How It Works

1. Client intercepts console.* and global error handlers
2. Sends logs via Socket.IO (real-time, preferred) or HTTP POST (fallback)
3. Server receives and prints to terminal with colors
4. Original console behavior preserved — users still see logs in browser DevTools

Security

• Disabled by default in production (NODE_ENV === 'production')
• Client logs include URL and User-Agent, but no cookies or auth tokens
• HTTP endpoint accepts POST only
• Add your own filter to scrub sensitive data if needed

License

MIT