npm package: @react-solutions/logger
Description: A react plugin that redirects browser console logs to your terminal during development
Author: React Solutions
Latest version: 1.0.3

# @react-solutions/logger

<div align="center">

[![npm version](https://img.shields.io/npm/v/@react-solutions/logger.svg?color=blue&style=for-the-badge)](https://www.npmjs.com/package/@react-solutions/logger)
[![npm downloads](https://img.shields.io/npm/dm/@react-solutions/logger.svg?color=green&style=for-the-badge)](https://www.npmjs.com/package/@react-solutions/logger)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@react-solutions/logger?color=orange&style=for-the-badge)](https://bundlephobia.com/package/@react-solutions/logger)

</div>
A logger plugin that redirects browser console logs to your terminal during development. Perfect for debugging React applications without constantly switching between browser and terminal.

## Features

- 🚀 **Zero Configuration**: Works out of the box with minimal setup
- 📝 **Terminal Logging**: See browser console logs directly in your Vite terminal
- 🎯 **Development Only**: Automatically disabled in production builds
- 🔧 **Customizable**: Configurable injection options
- 📦 **TypeScript Support**: Full TypeScript definitions included

## Installation

```bash
npm install @react-solutions/logger --save-dev
```

## Usage

### For Vite Applications

Add the plugin to your `vite.config.ts`:

```typescript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { viteLoggerReport } from "logger-vite-plugin";

export default defineConfig({
	plugins: [react(), viteLoggerReport()],
});
```

### For Create React App (CRA) Applications

#### Step 1: Configure reportWebVitals.ts

Update your `reportWebVitals.ts` file:

```typescript
import { craLoggerReport } from "logger-vite-plugin";

const reportWebVitals = () => {
	if (craLoggerReport) {
		craLoggerReport();
	}
};

export default reportWebVitals;
```

#### Step 2: Create setupProxy.js

Create a `setupProxy.js` file in your `src` directory:

```javascript
const { loggerRequest } = require("logger-vite-plugin");

module.exports = function (app) {
	loggerRequest(app);
};
```

## How It Works

1. **Server Middleware**: The plugin adds a middleware to your Vite dev server that listens for console log requests
2. **Log Forwarding**: When you use `console.log()`, `console.error()`, etc. in your React app, the logs are sent to the server and displayed in your terminal

## Example

After setup, when you run your dev server and use console methods in your React components:

```typescript
// In your React component
console.log("Hello from React!");
console.error("This is an error");
console.warn("This is a warning");
```

You'll see the logs in your terminal:

```
[11:46:32.793 PM]  🐛 DEBUG  [vite] connected.
  💾 11MB/13MB (4096MB limit)
  ⚡ Load: -1760379392509ms, DOM: -1760379392509ms
  🔍 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)...
[11:46:50.226 PM]  📝 LOG    Hello from React!
	...
[11:46:52.033 PM]  🔴 ERROR  This is an error
	...
[11:46:52.864 PM]  💡 WARN   This is a warning
	...

```

## Configuration Options

| Option        | Type      | Default     | Description                             |
| ------------- | --------- | ----------- | --------------------------------------- |
| `customEntry` | `string`  | `undefined` | Custom entry point for script injection |
| `devOnly`     | `boolean` | `true`      | Only run the plugin in development mode |

## 🌍 **Browser Support**

<div align="left">

| Browser                                                                       | Version | Status       |
| ----------------------------------------------------------------------------- | ------- | ------------ |
| ![Chrome](https://img.shields.io/badge/Chrome-60%2B-green?logo=google-chrome) | 60+     | ✅ Supported |
| ![Firefox](https://img.shields.io/badge/Firefox-60%2B-green?logo=firefox)     | 60+     | ✅ Supported |
| ![Safari](https://img.shields.io/badge/Safari-12%2B-green?logo=safari)        | 12+     | ✅ Supported |
| ![Edge](https://img.shields.io/badge/Edge-79%2B-green?logo=microsoft-edge)    | 79+     | ✅ Supported |

</div>

## License

MIT

<div align="center">

![license](https://img.shields.io/badge/MIT-red?style=for-the-badge)
![license](https://img.shields.io/badge/License-Proprietary-red?style=for-the-badge)

</div>