# Console.log spam

> Debug logs left in production leak internals, slow hot paths, and bury real errors. Strip them at build time and add a no-console lint rule.

_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.

## Symptoms

- The console is a wall of messages on a normal page load
- App state, tokens, or payloads are visible to anyone who opens DevTools
- A genuine error is impossible to find in the noise
- Perceptible slowdown in loops that log on every iteration

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

## Root causes

- Debug `console.log` statements never removed after a feature shipped
- A verbose third-party library logging at its default level
- Logging inside a render, effect, or scroll/resize handler that fires constantly

## The fix

Strip console output at build time for production, keep intentional error reporting behind a level-aware logger, and add an ESLint `no-console` rule so new debug logs can’t be merged. Configure noisy libraries down to warn/error.

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

_.eslintrc — block new debug logs_

```json
{ "rules": { "no-console": ["error", { "allow": ["warn", "error"] }] } }
```

## Framework-specific fixes

### 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'] },
})
```

### Next.js

Next.js can remove console calls from production bundles with a compiler option — keep error so real failures still report.

_next.config.js_

```js
module.exports = {
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production' ? { exclude: ['error'] } : false,
  },
}
```

[Next.js docs](https://nextjs.org/docs/architecture/nextjs-compiler#remove-console)

### Vue

Vue’s Vite setup uses the same esbuild drop option to strip console output in production.

_vite.config.ts_

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

### Vanilla JS

If you bundle with Terser/Rollup, enable `drop_console` for production. Otherwise gate logs behind a DEV flag.

_terser options_

```js
terser({ compress: { drop_console: true } })
```

## 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.

## Related problems

- [JavaScript memory leak](https://vibecheck.wcgw.fun/fix/memory-leak.md) — Performance
- [Duplicate network requests](https://vibecheck.wcgw.fun/fix/duplicate-network-requests.md) — Performance
- [Long tasks blocking the main thread](https://vibecheck.wcgw.fun/fix/long-tasks.md) — Performance
- [Large JavaScript bundles](https://vibecheck.wcgw.fun/fix/large-javascript-bundles.md) — Performance

---

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