TanStack Start

This guide covers adding debugger to a TanStack Start project. The setup takes three steps because TanStack Start uses Nitro, which runs in a separate process from Vite.

TanStack Start official docs

Feature	Support
Server console	Yes
Server errors	Yes
HTTP requests	Yes
Browser script injection	Automatic

1. Add the Vite plugin

Update your Vite config:

// vite.config.ts
import { debuggerPlugin } from '@ephem-sh/debugger/vite'

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

2. Add the script component

In src/routes/__root.tsx, import and render DebuggerScript after <Scripts />:

import { DebuggerScript } from '@ephem-sh/debugger/vite/react-router'

// inside <body>, after <Scripts />:
<DebuggerScript />

3. Add the server entry

Create or update src/server.ts:

import handler, { createServerEntry } from '@tanstack/react-start/server-entry'
import { withDebugger } from '@ephem-sh/debugger/vite/tanstack-start'

export default withDebugger(createServerEntry, handler)

Verify

npm run dev

npmpnpmbunyarn

npx dbg status

pnpm dlx dbg status

bun x dbg status

yarn dlx dbg status

npmpnpmbunyarn

npx dbg browser console

pnpm dlx dbg browser console

bun x dbg browser console

yarn dlx dbg browser console

Why three steps?

TanStack Start uses Nitro as its server runtime. Nitro runs in an isolated worker process that doesn't share memory with the Vite dev server. The withDebugger wrapper intercepts browser log requests in Nitro's process and forwards them to the debugger log store via IPC.

Production safety

The Vite plugin uses apply: 'serve'. DebuggerScript returns null when import.meta.env.PROD is true. The withDebugger wrapper only adds request interception — it passes all other requests through unchanged.

Full example

See the complete working example at examples/node/tanstack-start.