feat(kit): RFC - Unified Logging API proposal

[adriandarian]

Description

This PR proposes a unified logging API for Vite DevTools to replace scattered console.* calls with a consistent, configurable logging system. This is an RFC/proposal for discussion - feedback welcome!

Related TODOs in codebase:

• // TODO: A unified logger API in packages/core/src/client/webcomponents/state/setup-script.ts
• // TODO: implement logs in packages/core/src/node/host-docks.ts

Motivation

Currently, logging in Vite DevTools is inconsistent:

Issue	Examples
Inconsistent prefixes	[VITE DEVTOOLS], [Vite DevTools], [vite-devtools], ⬢
No log levels	Can't filter debug vs production logs
No structured data	Plain string concatenation, hard to parse
No aggregation	Can't display logs in a DevTools panel

Proposed API

import { createLogger } from '@vitejs/devtools-kit/utils/logger'

const logger = createLogger({ scope: 'my-plugin' })

logger.info('Plugin initialized')
logger.debug('Config loaded', { config })
logger.warn('Deprecated option')
logger.error(new Error('Something failed'))

// Child loggers for sub-components
const rpcLogger = logger.child('rpc')
rpcLogger.info('Connected') // → [my-plugin:rpc] Connected

What's Included

File	Purpose
docs/rfcs/0001-unified-logging-api.md	Full RFC with design details
docs/rfcs/0001-unified-logging-api-examples.md	Migration examples
packages/kit/src/utils/logger-types.ts	Type definitions
packages/kit/src/utils/logger-node.ts	Node.js implementation (colored terminal output)
packages/kit/src/utils/logger-client.ts	Browser implementation (styled console)
packages/kit/src/utils/log-collector.ts	Log aggregation for Logs panel
packages/kit/src/utils/logger.test.ts	Unit tests (14 passing)

Key Features

• Scoped loggers - Hierarchical namespaces via logger.child()
• Log levels - debug | info | warn | error | silent with filtering
• Structured metadata - logger.info('msg', { key: value })
• Log aggregation - LogCollector enables the planned "Logs" dock panel
• Environment-aware - Colored output in Node, styled console in browser
• Tree-shakeable - Separate exports to avoid bundling unused code
• Runtime configurable - logger.setLevel('debug') and env var support

Example Migration

Before:

console.warn('[Vite DevTools] Client auth disabled...')
console.error(`[vite-devtools] RPC error: ${name}`)

After:

logger.warn('Client auth disabled. Any browser can connect.')
logger.error('RPC error', { method: name, error })

Open Questions

1. Should we integrate with Vite's own logger?
2. What should the default log level be in production builds?
3. Should logs be persisted to disk in dev mode?
4. Any preferences on the log format/styling?

Next Steps (if approved)

1. Migrate existing console.* calls across packages
2. Enable the Logs dock panel (isHidden: false)
3. Add toast notifications for client-side errors
4. Document the API for plugin authors

---

Looking for feedback on the overall approach before proceeding with the full migration!

Linked Issues

#9

Additional context

[antfu]

While I like this idea, I think the current PR is a bit overdone. I think maybe we could use https://github.com/unjs/consola (which handles a lot of the complexity introduced here) and expose it on context.logger, similar to Nuxt Kit: https://nuxt.com/docs/api/kit/logging

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@vitejs/devtools@155

npm i https://pkg.pr.new/@vitejs/devtools-kit@155

npm i https://pkg.pr.new/@vitejs/devtools-rpc@155

npm i https://pkg.pr.new/@vitejs/devtools-vite@155

commit: 8ec66ef

[adriandarian]

While I like this idea, I think the current PR is a bit overdone. I think maybe we could use unjs/consola (which handles a lot of the complexity introduced here) and expose it on context.logger, similar to Nuxt Kit: nuxt.com/docs/api/kit/logging

all done and updated

[antfu]

I appreciated the bugfix (that I also found and fixed) - but please avoid changes like this to focus on the scope of PR.

[antfu]

I would also appreciated for this change to be in another PR.