fix: tighten error surfacing, restart failures + line truncation 🐰

Author: danielroe

packages/nuxt-cli/src/dev/force-tty.ts

@@ -18,7 +18,7 @@ if (process.env.__NUXT_DEV_PIPED_TTY__) {
       get: () => Number(process.env.__NUXT_DEV_COLUMNS__) || 80,
       configurable: true,
     })
-    const depth = Number(process.env.__NUXT_DEV_COLOR_DEPTH__) || (process.env.FORCE_COLOR ? 8 : 1)
+    const depth = Number(process.env.__NUXT_DEV_COLOR_DEPTH__) || forcedColorDepth()
     Object.defineProperty(stream, 'getColorDepth', { value: () => depth, configurable: true })
     Object.defineProperty(stream, 'hasColors', {
       value: (count?: number) => depth >= 4 && (typeof count !== 'number' || count <= 2 ** depth),
@@ -38,3 +38,22 @@ if (process.env.__NUXT_DEV_PIPED_TTY__) {
     }
   }
 }
+
+/** The depth `FORCE_COLOR` asks for, read the way Node reads it. */
+function forcedColorDepth(): number {
+  const forced = process.env.FORCE_COLOR?.trim().toLowerCase()
+  switch (forced) {
+    case undefined:
+    case '':
+    case '0':
+    case 'false':
+      return 1
+    case '1':
+    case 'true':
+      return 4
+    case '3':
+      return 24
+    default:
+      return 8
+  }
+}

packages/nuxt-cli/src/dev/pool.ts

@@ -69,7 +69,9 @@ export class ForkPool {
       process.stdout.on('resize', () => {
         for (const fork of this.pool) {
           if (fork.state !== 'dead' && fork.process.connected) {
-            fork.process.send({ type: 'nuxt:internal:dev:resize', columns: process.stdout.columns || 80 } satisfies NuxtParentIPCMessage)
+            // A fork can die between the check and the send, and this runs from
+            // a `resize` event where a throw would end the session.
+            fork.process.send({ type: 'nuxt:internal:dev:resize', columns: process.stdout.columns || 80 } satisfies NuxtParentIPCMessage, () => {})
           }
         }
       })

packages/nuxt-cli/src/dev/tui/controller.ts

@@ -1,17 +1,21 @@
+import type { ServerLogEvent } from '../log-channel'
 import type { ShortcutContext } from '../shortcuts'
-import type { DevRoutes } from '../utils'
+import type { DevRequestEvent, DevRoutes } from '../utils'
 import type { DevUIOptions } from './index'
 import type { DevStatus } from './panel'
 import type { DevUISession } from './session'
 
+/** A {@link ServerLogEvent} from a source that may not know where it came from. */
+type ForwardedLog = Omit<ServerLogEvent, 'origin'> & { origin?: ServerLogEvent['origin'] }
+
 export interface DevUIController {
   /** Whether the interactive UI is active (rather than the plain fallback). */
   interactive: boolean
   setStatus: (status: DevStatus, note?: string) => void
   /** Record a structured log event forwarded from the dev server fork. */
-  pushServerLog: (log: { level: number, logType: string, tag?: string, message: string, origin?: 'build' | 'runtime', request?: string, requestId?: number }) => void
+  pushServerLog: (log: ForwardedLog) => void
   /** Record a batch of served requests for the traffic ticker. */
-  pushRequests: (requests: Array<{ id?: number, method: string, url: string, status: number, duration: number, internal?: boolean }>) => void
+  pushRequests: (requests: DevRequestEvent[]) => void
   /** Replace the routes shown in the route view. */
   setRoutes: (routes: DevRoutes) => void
 }

packages/nuxt-cli/src/dev/tui/index.ts

@@ -243,6 +243,11 @@ export function setupDevUI(context: ShortcutContext, options: DevUIOptions = {})
       }
       await context.restart()
     }
+    catch (error) {
+      // A restart that throws must not take the session with it: both call
+      // sites dispatch it from a keypress, where nothing is awaiting.
+      showNotice(`could not restart: ${error instanceof Error ? error.message : error}`, 'warn')
+    }
     finally {
       update({ status: 'ready' })
     }

packages/nuxt-cli/src/dev/tui/route-overlay.ts

@@ -9,6 +9,7 @@ import { styleText } from 'node:util'
 import { link } from 'clickable-path'
 
 import { formatHints, ScreenOverlay } from './screen'
+import { truncate } from './width'
 
 type RouteFilter = 'all' | 'page' | 'server'
 
@@ -116,9 +117,11 @@ export class RouteOverlay extends ScreenOverlay {
       : styleText('magenta', (route.method?.toUpperCase() ?? 'all').padEnd(6))
     const path = route.route.padEnd(width)
     const file = route.file ? relative(this.#cwd, route.file) : ''
+    // The tail of a path identifies it; the head is the part every row shares.
     const room = columns - width - 10
-    const label = file.length > room ? `…${file.slice(-room + 1)}` : file
-    return `  ${kind} ${path} ${styleText('dim', route.file ? link(route.file, { cwd: this.#cwd, formatter: () => label }) : label)}`
+    const label = room < 8 ? '' : file.length > room ? `…${file.slice(1 - room)}` : file
+    const target = label && route.file ? link(route.file, { cwd: this.#cwd, formatter: () => label }) : label
+    return truncate(`  ${kind} ${path} ${styleText('dim', target)}`, columns)
   }
 
   #matching(): DevRoute[] {

packages/nuxt-cli/src/dev/tui/session.ts

@@ -27,6 +27,11 @@ const SHOW_CURSOR = '\u001B[?25h'
 /** Long enough for a forwarded log to be paired with its printed output. */
 const ERROR_SURFACE_DELAY_MS = 60
 
+/** An error as it belongs in scrollback: as printed, or as reported. */
+function renderErrorLine(event: DevLogEvent): string {
+  return event.rendered ?? `${styleText(['red', 'bold'], 'ERROR')} ${event.message}`
+}
+
 export interface DevUISession {
   surface: PanelSurface
   events: DevEventLog
@@ -221,8 +226,9 @@ export function beginDevUI(options: DevUISupportOptions & { version?: string, cw
     }
     event.surfaced = true
     lastSurfacedError = text
-    const timer = setTimeout(() => {
-      surfaceText(event.rendered ?? `${styleText(['red', 'bold'], 'ERROR')} ${event.message}`)
+    const timer: NodeJS.Timeout = setTimeout(() => {
+      pendingErrors.delete(timer)
+      surfaceText(renderErrorLine(event))
     }, ERROR_SURFACE_DELAY_MS)
     timer.unref?.()
     pendingErrors.set(timer, event)
@@ -268,7 +274,7 @@ export function beginDevUI(options: DevUISupportOptions & { version?: string, cw
     surface.setCapture()
     surface.writeRaw(SHOW_CURSOR)
     for (const [, event] of unsurfaced) {
-      surface.writeRaw(`${event.rendered ?? `${styleText(['red', 'bold'], 'ERROR')} ${event.message}`}\n`)
+      surface.writeRaw(`${renderErrorLine(event)}\n`)
     }
     surface.close({ keep: teardownOptions.keep })
     consola.removeReporter(reporter)

packages/nuxt-cli/src/dev/tui/surface.ts

@@ -156,9 +156,15 @@ export class PanelSurface {
       return
     }
     this.#capture = undefined
+    const held = this.#held
     this.#held = undefined
     clearTimeout(this.#repaintTimer)
     this.#erase()
+    // Whatever a view was holding is the session's last word on what happened.
+    for (const chunk of held ?? []) {
+      this.#observe(chunk)
+      this.#raw(chunk)
+    }
     if (options.keep && this.#lines.length) {
       this.#raw(`${this.#lines.join('\n')}\n`)
     }

packages/nuxt-cli/src/dev/tui/width.ts

@@ -11,10 +11,13 @@ export function visibleWidth(text: string): number {
   return stripAnsi(text).length
 }
 
+/** Ends whatever the cut interrupted, so nothing leaks onto the next line. */
+const LINK_TERMINATOR = '\u001B]8;;\u0007'
+
 /**
- * Cut `text` to `columns`, ignoring escape sequences when measuring and
- * carrying them across the cut so a truncated line cannot leak its styling
- * onto the rest of the screen.
+ * Cut `text` to `columns`, ignoring escape sequences when measuring and closing
+ * whatever they opened, so a truncated line cannot leak its styling or turn the
+ * rest of the screen into a hyperlink.
  */
 export function truncate(text: string, columns: number): string {
   if (columns <= 0) {
@@ -28,17 +31,23 @@ export function truncate(text: string, columns: number): string {
   let visible = 0
   let index = 0
   let styled = false
+  let linked = false
   ANSI_RE.lastIndex = 0
   while (index < text.length && visible < limit) {
     ANSI_RE.lastIndex = index
     const match = ANSI_RE.exec(text)
     if (match?.index === index) {
-      styled = true
+      if (match[0].startsWith('\u001B]8;')) {
+        linked = match[0] !== LINK_TERMINATOR
+      }
+      else {
+        styled = true
+      }
       index += match[0].length
       continue
     }
     index++
     visible++
   }
-  return `${text.slice(0, index)}\u2026${styled ? '\u001B[0m' : ''}`
+  return `${text.slice(0, index)}\u2026${linked ? LINK_TERMINATOR : ''}${styled ? '\u001B[0m' : ''}`
 }

packages/nuxt-cli/src/dev/utils.ts

@@ -50,7 +50,8 @@ function resolveRequestContextPlugin(): string | undefined {
   try {
     return fileURLToPath(import.meta.resolve('@nuxt/cli/runtime/dev-request-context'))
   }
-  catch {
+  catch (error) {
+    debug('Could not resolve the request context plugin; app logs will not be attributed:', error)
     return undefined
   }
 }
@@ -591,9 +592,11 @@ export class NuxtDevServer extends EventEmitter<DevServerEventMap> {
         ...requestContextPlugin
           ? {
               hooks: {
+                ...this.options.overrides.hooks,
                 'nitro:config': (nitro) => {
                   nitro.plugins ||= []
                   nitro.plugins.push(requestContextPlugin)
+                  return this.options.overrides.hooks?.['nitro:config']?.(nitro)
                 },
               } satisfies NuxtConfig['hooks'],
             }

packages/nuxt-cli/src/utils/startup-clock.ts

@@ -5,7 +5,8 @@
  * than how long a question sat on screen.
  */
 
-let excludedMs = 0
+/** Closed pauses, as `[start, end]`. Only a handful happen in a session. */
+const pauses: Array<[number, number]> = []
 let pausedAt: number | undefined
 let depth = 0
 
@@ -17,7 +18,7 @@ function pauseStartupClock(): void {
 
 function resumeStartupClock(): void {
   if (depth > 0 && --depth === 0 && pausedAt !== undefined) {
-    excludedMs += Date.now() - pausedAt
+    pauses.push([pausedAt, Date.now()])
     pausedAt = undefined
   }
 }
@@ -33,8 +34,16 @@ export async function withStartupClockPaused<T>(work: () => Promise<T>): Promise
   }
 }
 
-/** Milliseconds since `since`, not counting paused stretches. */
+/**
+ * Milliseconds since `since`, not counting paused stretches.
+ *
+ * Only the part of a pause that falls after `since` is subtracted, so a
+ * baseline taken after a prompt is not charged for the time it took to answer.
+ */
 export function startupElapsedMs(since: number): number {
-  const open = pausedAt === undefined ? 0 : Date.now() - pausedAt
-  return Math.max(0, Date.now() - since - excludedMs - open)
+  const now = Date.now()
+  const open = pausedAt === undefined ? [] : [[pausedAt, now] as [number, number]]
+  const excluded = [...pauses, ...open]
+    .reduce((total, [start, end]) => total + Math.max(0, Math.min(end, now) - Math.max(start, since)), 0)
+  return Math.max(0, now - since - excluded)
 }