Stream browser console.* logs to your dev terminal and optional file logging.
browser-echo makes it easy for you (and your AI coding assistant) to read client-side logs directly in the server terminal during development.
🤖 AI Coding Assistant Support - Perfect for Cursor AI, Claude Code, GitHub Copilot CLI, Gemini CLI, and other code editors that read terminal output
🚀 Framework Support - React, Vue, Nuxt 3/4, Next.js, TanStack Start, Vite-based frameworks, and custom setups
No production impact. Providers enable this across frameworks by injecting a tiny client patch and exposing a dev-only HTTP endpoint.
| Framework | Quick Setup |
|---|---|
| TanStack / Vite | Installation Guide |
| Nuxt 3/4 | Installation Guide |
| Next.js (App Router) | Installation Guide |
| Vue + Vite | Installation Guide |
| React + Vite | Installation Guide |
| Vue (non-Vite) | Installation Guide |
| React (non-Vite) | Installation Guide |
| Core | Installation Guide |
Framework users only install their provider +
@browser-echo/core. No cross‑framework bloat.
- Drop‑in client patch that wraps
console.log/info/warn/error/debug - Batched posts (uses
sendBeaconwhen possible) - Source hints
(file:line:col)+ stack traces - Colorized terminal output
- Optional file logging (Vite provider only)
- Works great with AI assistants reading your terminal
Most providers accept these options (names may appear as plugin options or component props):
type BrowserLogLevel = 'log' | 'info' | 'warn' | 'error' | 'debug';
interface BrowserEchoOptions {
enabled?: boolean; // default: true (dev only)
route?: `/${string}`; // default: '/api/client-logs' (Next), '/__client-logs' (others)
include?: BrowserLogLevel[]; // default: ['log','info','warn','error','debug']
preserveConsole?: boolean; // default: true (also keep logging in the browser)
tag?: string; // default: '[browser]'
// stacks
stackMode?: 'none' | 'condensed' | 'full'; // default: 'full' (provider-specific; Vite supports all)
showSource?: boolean; // default: true (when available)
// batching
batch?: { size?: number; interval?: number }; // default: 20 / 300ms
// server-side
truncate?: number; // default: 10_000 chars (Vite)
fileLog?: { enabled?: boolean; dir?: string }; // Vite-only
}Note: File logging and
truncateare currently implemented in the Vite plugin’s dev server middleware. Nuxt/Next providers print to stdout by default (you can extend them if you need file output there).
- Providers apply only in development and inject nothing into your production client bundles.
- If you also want to strip
console.*in prod builds, use your bundler’s strip tools (e.g. Rollup plugin) separately.
-
No logs appear
- Vite: ensure plugin is added and either
index.htmlexists or you import the virtual module manually. - Nuxt: confirm the module is in
modules[]and you’re in dev mode.
- Vite: ensure plugin is added and either
-
Next: make sure
app/api/client-logs/route.tsis exported and<BrowserEchoScript />is rendered in<head>. -
Endpoint 404
- Using a custom
baseor proxy? Keep the route same‑origin and not behind auth. - Nuxt sometimes proxies dev servers; our module registers a Nitro route directly.
- Using a custom
-
Too noisy
- Limit to
['warn','error']and usestackMode: 'condensed'.
- Limit to
-
Duplicate logs in browser
- Set
preserveConsole: false.
- Set
MIT
- X/Twitter: @kregenrek
- Bluesky: @kevinkern.dev
- Learn Cursor AI: Ultimate Cursor Course
- Learn to build software with AI: AI Builder Hub