TanStack / TanStack/devtools

devtools-vite: `consolePiping` defaults can balloon dev logs to many GB when a hot warning loops

Open
#428 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
499
Forks
100
Avg merge
1d 17h
Merged PRs (30d)
4

Description

Claude here — opening this on David's behalf after we hit it on a TanStack Start project.

Summary

@tanstack/devtools-vite (v0.6.0) ships with consolePiping.enabled: true and levels: ['log', 'warn', 'error', 'info', 'debug'] by default. When a Vite dev server runs unattended and the page produces a recurring console warning (any persistent React render-loop warning will do), the plugin pipes each occurrence twice ([Server] then [Client]) and React's hydration messages bring the full component tree along for the ride. With no dedup, rate-limit, or volume cap, this can write tens of GB to disk in a few hours — we hit a 105 GB log file before noticing.

Related but distinct: #342 (closed) — same subsystem, different symptom (request stalling).

Reproduction

Minimal TanStack Start project. The exact warning trigger doesn't matter; any render-loop warning will reproduce. Easiest case: a hydration error from invalid HTML nesting.

vite.config.ts:

import { defineConfig } from 'vite'
import { devtools } from '@tanstack/devtools-vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [devtools(), tanstackStart(), viteReact()],
})

A component with nested interactive elements (React 19 will warn on every render):

export default function Card() {
  return (
    <button onClick={() => {}}>
      <button onClick={(e) => e.stopPropagation()}>nested</button>
    </button>
  )
}

Start dev with output redirected to a file (typical CI / nohup setup):

nohup pnpm dev > dev.log 2>&1 &

Visit the page and leave the tab open. dev.log grows continuously. After a few hours it's GBs; on our project it reached 105 GB before we noticed and ran out of disk pressure on \$TMPDIR.

Why it explodes

Each repeat of the same warning produces:

  1. A server-side log line.
  2. The client emits the same warning, which the plugin pipes back to the server.
  3. The server emits its piped copy back to the client.
  4. React 19's hydration error messages include the full component tree (every <SafeFragment>, <MatchInnerImpl>, every leaf component, with data-tsd-source annotations). This is a large payload per occurrence.
  5. The warning fires on every render attempt, which for a hydration mismatch is many times per second.

There is no dedup of identical messages within a window, no rate-limit on emissions, and no overall log volume cap.

Defaults question

consolePiping is a debug-aid feature. For typical dev workflows the warning already shows in the browser console and the terminal — piping is mostly useful when actively debugging the bridge itself. Having it on by default, on all five levels, with no safety rails, makes any noisy app subtly dangerous.

Suggested fixes (any of these would help)

  1. Default consolePiping.enabled to false. Opt-in for the debug case.
  2. Dedup identical messages (same level + same string content) within e.g. a 1-second window — emit once, then a [N more] summary.
  3. Cap total piped messages per session, with a clear "console-piping disabled — too many messages" notice on hitting the cap.
  4. Collapse / truncate the React component tree in piped hydration warnings after the first occurrence in a session.
  5. (Belt-and-braces) document the failure mode in the README's consolePiping section so users with nohup … > log setups can add logrotate or a size cap.

The hydration warning being emitted at all is correct (it's React doing its job) — the only thing the plugin needs to do is not turn one warning into a feedback loop.

Environment

  • @tanstack/devtools-vite 0.6.0
  • @tanstack/react-start (latest at time of report)
  • React 19.2.5
  • Vite 8.0.10
  • macOS 25.4 / Node via pnpm 10.x

Workaround

Pass consolePiping: { enabled: false } to devtools():

plugins: [
  devtools({ consolePiping: { enabled: false } }),
  // ...
],

This stopped log growth completely. We still get the actual hydration warning in the browser console (which is what we want), but no server-side amplification.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce with the mentioned vite.config.ts, nested-button React component, and nohup command, then trace the consolePiping path entered by devtools(). Compare the proposed defaults, deduplication, rate limiting, and volume-cap options; done means repeated warnings no longer amplify into unbounded server logs while the browser warning remains available.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript, vite
Domain
devtools, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.