Repository navigation
fix: serve the Vite DevTools WebSocket on Nuxt's HTTPS listener - #1156
Conversation
Closes #1152 Co-Authored-By: Claude <noreply@anthropic.com>
|
No actionable comments were generated in the recent review.
 |
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage |  |
Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat… | Write docstrings for the functions missing them to satisfy the coverage threshold. |
-
Check name Status Explanation Title check The title names the main change: the Vite DevTools WebSocket is now served on Nuxt's HTTPS listener. The changeset adds a Nuxt 4 Vite plugin (dev-listener.ts) that hands the TLS listener to Vite and f… Description check The description relates directly to the changeset. It explains the root cause (middleware-mode Vite with a null httpServer, and a plain-HTTP side-car port that breaks the wss:// connection), describes… Linked Issues check [ #1152] Objective: with devServer.https on Nuxt 4, Vite DevTools must serve its RPC WebSocket on the page's own HTTPS origin, so the client can connect and reach authorization. Implementation at the r…Out of Scope Changes check The changes are limited to three files: packages/devtools/src/utils/dev-listener.ts (new plugin and upgrade filter), packages/devtools/src/module-main.ts (registration of the plugin with { server: fal… Full details: Title check
-
Explanation
The title names the main change: the Vite DevTools WebSocket is now served on Nuxt's HTTPS listener. The changeset adds a Nuxt 4 Vite plugin (dev-listener.ts) that hands the TLS listener to Vite and filters DevTools upgrades in nuxt.server.upgrade. The title uses the 'fix:' prefix, which fits the linked bug (
#1152). It is short, specific and free of file lists or vague terms.
Full details: Description check
-
Explanation
The description relates directly to the changeset. It explains the root cause (middleware-mode Vite with a null httpServer, and a plain-HTTP side-car port that breaks the wss:// connection), describes the new dev-listener plugin and its guards, lists verification steps, and links issue
#1152. It matches the code and tests in the changeset.
Full details: Linked Issues check
-
Explanation
[
#1152] Objective: with devServer.https on Nuxt 4, Vite DevTools must serve its RPC WebSocket on the page's own HTTPS origin, so the client can connect and reach authorization. Implementation at the reviewed head: packages/devtools/src/utils/dev-listener.ts adds the nuxt:devtools:dev-listener plugin. In its configureServer hook (order 'pre'), it assigns nuxt._devServerListener to server.httpServer when the build is not SSR, Vite has no httpServer, and the listener is a TLS server. module-main.ts registers the plugin with { server: false }. The plugin also wraps nuxt.server.upgrade so that upgrades under DEVTOOLS_MOUNT_PATH are not forwarded to Nitro. This prevents the Nitro proxy from ending the DevTools socket. Plain-HTTP listeners keep the existing side-car behaviour, which the issue does not require to change. The PR reports a manual check on nuxt@4.6.3 and@nuxt/devtools@4.0.0: the connection endpoint advertised {"path":"/__devtools/__ws"}, a wss upgrade returned 101, and the dock connected after authorization. The PR also reports unit tests for the handover and upgrade filtering. I did not re-run these checks. The assessment relies on the source read and the author's reported results. Nuxt 4 with Nitro v3 is not verified, but the issue does not name that configuration.
Full details: Out of Scope Changes check
-
Explanation
The changes are limited to three files: packages/devtools/src/utils/dev-listener.ts (new plugin and upgrade filter), packages/devtools/src/module-main.ts (registration of the plugin with { server: false }, with comments referencing
#1152), and packages/devtools/test/dev-listener.test.ts (unit tests for the new plugin). Each change connects directly to the#1152objective. The upgrade wrapper is needed for the handover to work on Nuxt 4 because nuxt.server.upgrade would otherwise end the DevTools socket. The test file supports the new plugin. No unrelated behaviour change is visible in the reviewed sources. The module-main.ts diff is the only change to existing code, and it adds a single registration line plus comments.
-
Full details: Docstring Coverage
-
Explanation
Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 3 functions across 3 files.
Resolution
Write docstrings for the functions missing them to satisfy the coverage threshold.
Finishing Touches
-
Generate docstrings
-
- Commit to this branch
- Create a new PR
Generate unit tests (beta)
-
- Commit to this branch
- Create a new PR
-
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Summary
With
devServer.httpson Nuxt 4, DevTools never connects (#1152). Nuxt runs Vite in middleware mode, soviteServer.httpServerisnull. Vite DevTools then opens its RPC WebSocket on a plain-HTTP side-car port (9777/9778). The HTTPS page connects withwss://localhost:9778/__ws, and the TLS handshake fails. The client never reaches the authorization step, so no code is printed.Nuxt 5's vite-builder already sets
httpServerto Nuxt's listener (nuxt:dev-listener). This PR adds the same step for Nuxt 4, in a newnuxt:devtools:dev-listenerVite plugin (packages/devtools/src/utils/dev-listener.ts):httpServeris unset andnuxt._devServerListeneris a TLS server, it hands the listener over. Vite DevTools then attaches its socket to the page's own origin and TLS, and advertises{ "path": "/__devtools/__ws" }instead of a port.buildAssetsDirtonuxt.server.upgrade. On Nitro 2, that proxies the socket to the Nitro worker, which ends it under crossws. The result isERR_STREAM_WRITE_AFTER_ENDand a Nuxt restart loop. I hit this while testing a version without the guard. The plugin wrapsnuxt.server.upgradeonce so it skips/__devtools/paths.Plain-HTTP listeners are not changed and keep the side-car, which works for them today. On Nuxt 5 the plugin does nothing, because
httpServeris already set.fixes #1152
Verification
pnpm lint: passes.pnpm typecheck: passes.pnpm test:unit: 21 files, 129 tests pass. This includes the newpackages/devtools/test/dev-listener.test.ts, which covers: the HTTPS handover, Nitro skipping only DevTools upgrades, wrapping once across Vite restarts, plain HTTP left on the side-car, and the SSR server / existinghttpServer/ no listener left alone.nuxt@4.6.3,@nuxt/devtools@4.0.0anddevServer: { https: true }:/__devtools/__connection.jsonadvertised{"port":9777,"path":"__ws"}.{"path":"/__devtools/__ws"}.wss://localhost:3443/__devtools/__wsupgrade returned101, and Vite HMR still upgraded on/_nuxt/.nuxt.serverstill hasupgrade, but this plugin does nothing there because Nuxt 5 setshttpServeritself.Written with the help of Claude Code.