# Console.log spam in React

> How to fix console.log spam in React — with the exact fix and copy-paste code.

_Category: Performance · Detector `console-spam` · Severity: warning_

Debug logs left in shipped code serialize their arguments on every call, add DevTools overhead, and in a hot path (a render loop, a scroll handler) they measurably slow the page. They also leak app internals to anyone who opens the console and bury the one real error under noise. Vibe-coded features accumulate these fast, because logging is how the agent "sees" while it works — and it rarely cleans up.

## The fix for React

Vite (and esbuild-based React setups) can drop console and debugger from production builds at the bundler level.

_vite.config.ts_

```ts
export default defineConfig({
  esbuild: { drop: ['console', 'debugger'] },
})
```

### Steps

1. Enable build-time console stripping for production builds
2. Replace ad-hoc logs with a logger that is silent in production
3. Add the ESLint `no-console` rule (allowing warn/error) to prevent regressions

## How VibeCheck detects it

The `console-spam` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.

- **Issue string:** `console.log spam detected`
- **Threshold:** > 20 console calls within a rolling 10s window

## FAQ

### Should I remove `console.error` too?

No — keep `console.error` (and usually `console.warn`) so genuine failures still surface. Strip only the debug-level `console.log`/info/debug noise. The examples here exclude error on purpose.

### Is `console.log` actually a performance problem?

In a hot path, yes. Each call serializes its arguments and incurs DevTools overhead. One log on click is nothing; a log inside a scroll handler or render loop firing hundreds of times a second is measurable.

### How does VibeCheck count this?

It wraps `console.log`/warn/error and counts calls in a rolling 10-second window. More than 20 in that window trips the console-spam detector.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/console-log-spam.md

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/console-log-spam. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt