Hacktoberfest 2026：維護者為十月標記出來的 issue，仍然開放、適合新手。 瀏覽 Hacktoberfest issue

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

未關閉
  • 哪裡不對？
#428 2 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

評估

難度
4/5
預估耗時
3-5 天
新手友好度
48/100
Issue 類型
缺陷
描述清晰度
基本清楚
活躍度
冷清
技術堆疊
react, typescript, vite
領域
devtools, tooling

研究方向

使用提到的 vite.config.ts、nested-button React 元件和 nohup 命令進行重現，然後追蹤由 devtools() 進入的 consolePiping 路徑。比較提議的預設值、去重、速率限制和 volume-cap 選項；當重複警告不再將伺服器記錄無限放大，同時瀏覽器警告仍然可用時，即表示完成。

由索引模型根據 Issue 內容生成。

描述

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.

主要語言
TypeScript
星號
501
分支
101
平均合併
1 天 8 小時
30 天內合併 PR
4

環境準備

從這裡開始

  1. 先讀完整個 Issue，再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫，在一個分支上完成修改。
  4. 送出 Pull Request，並在描述裡引用這個 Issue 編號。

TanStack/devtools 的其他 Issue

查看 TanStack/devtools 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。