@kiyors/vite-plugin-logger

A blazing fast Vite logger plugin powered by Rust (NAPI-RS) and TypeScript.

Note: This plugin has currently only been tested with TanStack. We will be checking other frameworks and updating compatibility in the future.

Features

• requestLogger: High-performance HTTP request logging. Replaces Vite's default logger with a highly optimized Rust-powered logger. Tracks duration times, tracks aborted connections, and formats output with ANSI colors instantly.
• browserLogger: Client-side console logging in your terminal. Automatically intercepts console.log, console.error, and uncaught exceptions from your browser, securely routes them to the Vite dev server via WebSockets, and prints them to your backend terminal. Framework-agnostic and universally injected.

Installation

Install using your preferred package manager (PNPM is recommended):

pnpm add -D @kiyors/vite-plugin-logger

Usage

Import the loggers and add them to the plugins array in your vite.config.ts (or vite.config.js).

// vite.config.ts
import { defineConfig } from "vite";
import { requestLogger, browserLogger } from "@kiyors/vite-plugin-logger";

// Your framework plugin (e.g. React, Vue, Svelte)
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react(), requestLogger(), browserLogger()],
});

Configuration

You can pass an optional configuration object to requestLogger:

requestLogger({
  // Exclude specific HTTP methods from being logged
  // Available options: "GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS", "HEAD"
  // Also accepts lowercase ("get", "post", ...) and title case ("Get", "Post", ...)
  excludeReqType: ["OPTIONS", "HEAD"],
});

That's it!

• Every HTTP request to the Vite Dev Server will now be tracked, formatted, and styled by Rust.
• Every client-side console.log and unhandled exception will now magically appear right inside your terminal!