npm package: @sagarbhatia/frontend-terminal-logger
Description: Stream frontend browser logs directly to your terminal.
Author: Sagar Bhati
Latest version: 1.0.3

# @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

```bash
npm install @sagarbhatia/frontend-terminal-logger
```

## Usage

### 1. Start the Terminal Listener

In your terminal, run:

```bash
npx @sagarbhatia/frontend-terminal-logger
```

You should see:

```
🚀 Frontend Terminal Logger running at ws://localhost:5000
```

### 2. Initialize in your Frontend App

In your main entry file (e.g., `src/index.js` or `src/main.jsx`):

```javascript
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`:

```javascript
"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`):

```javascript
import LoggerInit from "@/components/LoggerInit";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <LoggerInit />
        {children}
      </body>
    </html>
  );
}
```

> **Note:** We use `useEffect` because Next.js runs code on both server and browser. The logger only works in the browser, so `useEffect` ensures 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: 500
```

## Documentation

- [Code Explanation](CODE_EXPLANATION.md) - Deep dive into how the tool works.
- [Publishing Guide](PUBLISHING_GUIDE.md) - Steps to publish this to NPM.

## Development

```bash
# 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 dev
```

## License

MIT