@react-solutions/logger

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

npm install @react-solutions/logger --save-dev

Usage

For Vite Applications

Add the plugin to your vite.config.ts:

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:

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:

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:

// 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

| Browser | Version | Status | | ----------------------------------------------------------------------------- | ------- | ------------ | | | 60+ | ✅ Supported | | | 60+ | ✅ Supported | | | 12+ | ✅ Supported | | | 79+ | ✅ Supported |

License

MIT