Vite Log Capture

0.1.4 verified Mon Apr 27 auth: no javascript

Vite plugin that captures console logs and HMR errors during development, allowing inspection and assertion of log output. Current stable version is 0.1.4 (released July 2024). Active development. Differentiators: integrates directly with Vite's HMR pipeline, captures both standard console logs and HMR-specific errors, and provides a simple API to retrieve captured logs for testing or debugging. Unlike generic log interceptors, it works seamlessly with Vite's dev server.

Common errors

error Error: [vite-log-capture] Vite version must be ^7.0.0 ↓

cause Currently using Vite version below 7.0.0.

fix

Run 'npm install vite@latest' to upgrade to Vite 7.0.0+.

error TypeError: require() of ES Module not supported ↓

cause Trying to use require() to import the module instead of import.

fix

Use import statement instead: 'import { captureLogs } from "vite-log-capture"'

error Uncaught ReferenceError: captureLogs is not defined ↓

cause captureLogs() was called before the import was evaluated (e.g., in a module where import order matters).

fix

Ensure import { captureLogs } from 'vite-log-capture' is at the top of the file and that the plugin is applied before using captureLogs.

Warnings

breaking Plugin only works with Vite 7.0.0 or above. ↓

fix Upgrade Vite to version 7.0.0 or later.

gotcha captureLogs() must be called before any console logs you want to capture. Logs before the call are not captured. ↓

fix Call captureLogs() at the earliest point in your application, typically before any imports or module evaluation.

gotcha getCapturedLogs() returns a new array each time; it does not clear the internal buffer. To clear logs, use clearCapturedLogs(). ↓

fix After retrieving logs, call clearCapturedLogs() to avoid accumulating duplicate entries.

Install

npm install vite-log-capture

yarn add vite-log-capture

pnpm add vite-log-capture

Imports

captureLogs

wrong

const captureLogs = require('vite-log-capture')

correct

import { captureLogs } from 'vite-log-capture'

ESM-only module. CommonJS require() will error.

getCapturedLogs

wrong

import { captureLogs, getCapturedLogs } from 'vite-log-capture/cjs'

correct

import { getCapturedLogs } from 'vite-log-capture'

No subpath exports. Import from package root only.

ViteLogCapture

wrong

import ViteLogCapture from 'vite-log-capture'

correct

import { ViteLogCapture } from 'vite-log-capture'

Named export, not default.

Quickstart

Shows basic plugin setup in vite.config.ts, capturing console logs in application code, and retrieving captured logs.

// vite.config.ts
import { defineConfig } from 'vite';
import { captureLogs, ViteLogCapture } from 'vite-log-capture';

export default defineConfig({
  plugins: [ViteLogCapture()],
});

// In your application code
captureLogs();
console.log('test log');
console.error('test error');
const logs = getCapturedLogs();
console.log(logs); // [{ level: 'log', message: 'test log' }, { level: 'error', message: 'test error' }]