@sagarbhatia/frontend-terminal-logger
v1.0.3
Published
Stream frontend browser logs directly to your terminal.
Downloads
21
Maintainers
sagarbhatiaReadme
@sagarbhatia/frontend-terminal-logger
Streams your frontend browser console logs (console.log, warn, error) directly to your terminal. No need to switch windows or open Chrome DevTools for quick debugging!
Features
- 🔥 Real-time Logging: Streams logs from browser to terminal instantly.
- 🎨 Color Coded: Warns are yellow, errors are red, logs are blue.
- 🔌 Plug & Play: Works with any frontend framework (React, Vue, Svelte, plain JS).
- 🛡️ Dev Mode Safe: Built-in protection to run only in development.
Installation
npm install @sagarbhatia/frontend-terminal-loggerUsage
1. Start the Terminal Listener
In your terminal, run:
npx @sagarbhatia/frontend-terminal-loggerYou should see:
🚀 Frontend Terminal Logger running at ws://localhost:50002. Initialize in your Frontend App
In your main entry file (e.g., src/index.js or src/main.jsx):
import { initLogger } from "@sagarbhatia/frontend-terminal-logger";
// Initialize logger
initLogger({
serverUrl: "ws://localhost:5000", // default
level: "log", // 'log' | 'warn' | 'error'
});Now, whenever you use console.log() in your browser, it will appear in your terminal!
3. Next.js Setup (App Router)
For Next.js 13+ with App Router, create a client component to initialize the logger:
Step 1: Create src/components/LoggerInit.jsx:
"use client";
import { useEffect } from "react";
import { initLogger } from "@sagarbhatia/frontend-terminal-logger";
export default function LoggerInit() {
useEffect(() => {
if (process.env.NODE_ENV === "development") {
initLogger({
serverUrl: "ws://localhost:5000",
level: "log",
});
}
}, []);
return null;
}Step 2: Import it in your root layout (src/app/layout.jsx):
import LoggerInit from "@/components/LoggerInit";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<LoggerInit />
{children}
</body>
</html>
);
}Note: We use
useEffectbecause Next.js runs code on both server and browser. The logger only works in the browser, souseEffectensures it initializes client-side only.
Configuration
| Option | Type | Default | Description |
| :---------- | :------- | :-------------------- | :-------------------------------------------------- |
| serverUrl | string | ws://localhost:5000 | WebSocket server URL. |
| level | string | log | Minimum log level to send ('log', 'warn', 'error'). |
Example Output
Terminal:
🔥 Browser connected
[FRONTEND LOG] "User logged in", { id: 123, name: "Alice" }
[FRONTEND WARN] "API response slow"
[FRONTEND ERROR] "Failed to fetch data", Error: 500Documentation
- Code Explanation - Deep dive into how the tool works.
- Publishing Guide - Steps to publish this to NPM.
Development
# Clone the repo
git clone https://github.com/Sagar-1609/frontend_logger.git
cd frontend_logger
# Install dependencies
npm install
# Run the server
npm start
# Run the example
cd examples/vite-react-demo
npm install
npm run devLicense
MIT