@nifrajs/web 5.5.1 → 5.7.0

package/src/build.ts

@@ -54,7 +54,7 @@ import {
 import { sanitizeOutputNames } from "./chunk-names.ts"
 import { type CssLoadingMode, normalizeCssCodeSplit, normalizeCssLoading } from "./css-contract.ts"
 import { discoverRoutes } from "./fs.ts"
-import { generateClientEntry, generateServerManifest } from "./index.ts"
+import { generateClientEntry, generateServerManifest, type LiveClientEntry } from "./index.ts"
 import { missingClientEntry } from "./internal/codegen.ts"
 import { loadCopySplit } from "./internal/copy-split.ts"
 import { assertDisposableDir } from "./internal/disposable-dir.ts"
@@ -208,6 +208,11 @@ export interface BuildClientOptions {
    * every table whole; the server entry passes the manifest's `copyChunks` to `createWebApp`.
    */
   readonly copySplit?: boolean
+  /**
+   * The server runs `createWebApp({ live })`: the client entry sends route loads through its live load
+   * endpoint and keeps what is on screen fresh: the runtime's `clientEntry`.
+   */
+  readonly live?: LiveClientEntry | undefined
 }
 
 /**
@@ -479,6 +484,7 @@ export async function buildClient(options: BuildClientOptions): Promise<BuildMan
       clientModule,
       resolve,
       copyChunks: copySplit !== undefined,
+      live: options.live,
     })}`,
   )
 
@@ -1331,6 +1337,8 @@ export const SERVER_ENTRY_OPTIONS = [
   "nonce",
   "i18n",
   "hostPolicy",
+  "live",
+  "keepAlive",
 ] as const
 export type ServerEntryOption = (typeof SERVER_ENTRY_OPTIONS)[number]
 /** Each importable option mapped to the specifier of the module that exports it. */
@@ -1894,6 +1902,8 @@ export interface BuildTargetOptions {
   /** Trust the edge platform's client-address header for `c.clientIp` (`cloudflare`, `vercel`). Off by
    * default, leaving an edge app with no caller address. See {@link ServerEntryClientIp}. */
   readonly clientIp?: ServerEntryClientIp
+  /** The client entry for a server built with `optionImports.live`: that runtime's `clientEntry`. */
+  readonly live?: LiveClientEntry | undefined
 }
 
 /** Minimal app surface `buildTarget`'s static path needs - a fetch handler (a built `createWebApp`). */
@@ -1949,6 +1959,7 @@ export const bunBundler: Bundler = {
       ...(input.publicDir !== undefined ? { publicDir: input.publicDir } : {}),
       ...(input.publicEnvPrefix !== undefined ? { publicEnvPrefix: input.publicEnvPrefix } : {}),
       ...(input.secretExemptions !== undefined ? { secretExemptions: input.secretExemptions } : {}),
+      live: input.live,
     })
   },
   buildServer: (input) =>
@@ -2053,6 +2064,13 @@ export async function buildTargetWith(
   bundler: Bundler,
 ): Promise<BuildTargetResult> {
   const { routesDir, outDir, workDir } = options
+  // One without the other ships a client that posts to an endpoint the server lacks, or a live server
+  // no client ever watches.
+  if ((options.optionImports?.live === undefined) !== (options.live === undefined)) {
+    throw new Error(
+      "[nifra/web] buildTarget: `optionImports.live` and `live` go together - the server's runtime and the client entry that reaches it",
+    )
+  }
   const requestedCssCodeSplit =
     options.cssCodeSplit === undefined ? undefined : normalizeCssCodeSplit(options.cssCodeSplit)
   const requestedCssLoading =
@@ -2101,6 +2119,7 @@ export async function buildTargetWith(
     ...(requestedCssCodeSplit !== undefined ? { cssCodeSplit: requestedCssCodeSplit } : {}),
     ...(requestedCssLoading !== undefined ? { cssLoading: requestedCssLoading } : {}),
     root: resolvePath(dirname(routesDir)),
+    live: options.live,
   })
   // Bun's client builder has no CSS-loading field, but the server-side document policy is bundler
   // independent. Carry the requested policy into the result so static prerender callbacks and the

package/src/client.ts

@@ -5,6 +5,7 @@
  * a full page load). DOM-only - never imported on the server, so the store stays SSR-safe.
  */
 import { trustedHeadAttributes } from "./internal/head-attributes.ts"
+import { setPresenter } from "./internal/present.ts"
 import { appUrl } from "./internal/route-path.ts"
 import { EXECUTABLE_SCRIPT_TYPES, INERT_SCRIPT_TYPES } from "./internal/script-types.ts"
 import type { Meta } from "./manifest.ts"
@@ -35,6 +36,7 @@ export function currentDocumentNonce(): string | undefined {
   return script.getAttribute("nonce") ?? undefined
 }
 
+export { identityChanged } from "./identity.ts"
 /**
  * Everything the generated client entry needs, re-exported here so that entry imports ONE module and
  * that module is DOM-only. It used to take these from `@nifrajs/web`, whose graph includes `renderPage`
@@ -43,7 +45,11 @@ export function currentDocumentNonce(): string | undefined {
  * before hydrating. The fix is for the entry not to name the server module in the first place.
  */
 export { mergeHeads, resolveChainMeta, resolveMeta } from "./internal/head-merge.ts"
+// For route helpers shared by a loader and a component, which the browser loads too: imported from the
+// root, they put its `node:crypto` import into Vite dev's browser deps on every page.
+export { gone, notFound, statusPage } from "./internal/status-page.ts"
 export {
+  closeBoundary,
   getBrowserNavigate,
   IDLE_BLOCKER,
   registerBlocker,
@@ -209,6 +215,10 @@ export function waitForStyles(options: WaitForStylesOptions = {}): Promise<void>
   return Promise.all(promises).then(() => undefined)
 }
 
+// How long a navigation's view transition waits for the frame that captures the page before its
+// animation is skipped: several frames at any refresh rate, and short enough to go unnoticed.
+const CAPTURE_DEADLINE_MS = 100
+
 /**
  * Resolve `href` against this page and keep it only when history may move there without a load: same
  * scheme and host as the document, or null. Compared by protocol + host rather than `URL.origin`,
@@ -255,6 +265,48 @@ export function installHistory(
   let reversing = false
   // The path the router was last seen loading, so a redirect it follows shows up as a change.
   let expected: string | undefined
+  // The entry holding the page last shown without an intercept boundary, so closing a boundary opened
+  // over it can go back there. Cleared once that entry is replaced or cut off by a push.
+  let pageEntry: number | undefined = index
+  // Before writing the entry at `index` (replace) or pushing past it, which drops every later entry.
+  const writingEntry = (mode: "push" | "replace"): void => {
+    if (mode === "replace" ? pageEntry === index : pageEntry !== undefined && pageEntry > index)
+      pageEntry = undefined
+  }
+  // Every entry this document owns carries its index, the first one included, so an entry without one
+  // is one the browser pushed itself: a same-page fragment link, which this router leaves native.
+  // Number it as the push it was, or index deltas (a guard's reversal, closeBoundary) count wrong.
+  const numbered = (): boolean => {
+    const current: unknown = history.state
+    return (
+      typeof current === "object" &&
+      current !== null &&
+      "nifraIndex" in current &&
+      typeof current.nifraIndex === "number"
+    )
+  }
+  const stampEntry = (): void => {
+    const current: unknown = history.state
+    history.replaceState(
+      Object.assign({}, typeof current === "object" ? current : null, { nifraIndex: index }),
+      "",
+    )
+  }
+  const adoptNativeEntry = (): boolean => {
+    if (numbered()) return false
+    writingEntry("push")
+    index += 1
+    stampEntry()
+    here = location.pathname + location.search + (location.hash ?? "")
+    return true
+  }
+  // An opaque or file: document routes nothing, so its history is left alone. A refused write (a
+  // browser's rate limit) only leaves fragment entries uncounted, as before.
+  if (location.origin !== "null" && location.protocol !== "file:" && !numbered()) {
+    try {
+      stampEntry()
+    } catch {}
+  }
   type Registration = {
     readonly shouldBlock: BlockerFunction
     readonly emit: (blocker: Blocker) => void
@@ -281,29 +333,60 @@ export function installHistory(
     return document.getElementById(id)
   }
 
-  // Wrap a navigation's render in a View Transition when the browser supports it - a graceful
-  // enhancement (no-op elsewhere). The captured "before" is held across the data fetch, so pair
-  // with link prefetch (hover/focus warms the cache) to keep most transitions instant.
+  // A navigation loads first and hands only its page swap here, so where the browser has View
+  // Transitions the page keeps painting, pending UI included, while the data loads. The browser runs
+  // the swap once a frame has captured the page; one drawing no frames while it reports itself visible
+  // (an occluded window) would hold it forever, so the deadline skips the animation, running the swap.
   type ViewTransition = {
     readonly ready: Promise<unknown>
     readonly finished: Promise<unknown>
     readonly updateCallbackDone: Promise<unknown>
+    skipTransition(): void
   }
   type ViewTransitionDocument = Document & {
     startViewTransition?: (cb: () => unknown) => ViewTransition
   }
-  const transition = (run: () => Promise<void>): void => {
+  setPresenter((swap) => {
     const doc = document as ViewTransitionDocument
-    if (typeof doc.startViewTransition !== "function") {
-      void run()
-      return
+    const start = doc.startViewTransition
+    if (typeof start !== "function") {
+      swap()
+      return Promise.resolve()
     }
-    const vt = doc.startViewTransition(run)
-    // Rapid in-app clicks supersede an in-flight transition; the browser skips it and rejects its
-    // promises. Reasons vary by engine - InvalidStateError "Transition was aborted because of
-    // invalid state", or AbortError "Transition was skipped". The navigation still completes, so
-    // we swallow these expected aborts rather than let them surface as unhandled rejections.
-    for (const p of [vt.ready, vt.finished, vt.updateCallbackDone]) p.catch(() => {})
+    return new Promise((resolve, reject) => {
+      let swapped = false
+      const vt = start.call(doc, () => {
+        swapped = true
+        try {
+          swap()
+          resolve()
+        } catch (error) {
+          reject(error)
+        }
+      })
+      setTimeout(() => {
+        if (!swapped) vt.skipTransition()
+      }, CAPTURE_DEADLINE_MS)
+      // A newer navigation's transition, or the deadline, skips this one and rejects its promises -
+      // InvalidStateError or AbortError by engine. The swap still runs, so these are expected.
+      for (const p of [vt.ready, vt.finished, vt.updateCallbackDone]) p.catch(() => {})
+    })
+  })
+  // A navigation that loads takes the page from a partially prerendered first document, which then
+  // stops filling its holes and cancels the ones still loading on the server. `navigate` publishes
+  // its `pendingPath` before its first await; a client-only search change, or a boundary already
+  // showing its target, loads nothing, so the holes still pending keep filling.
+  const navigateFrom = (routePath: string, from: string): Promise<void> => {
+    const run = router.navigate(routePath).catch((error) => leave(error, from))
+    const ppr: unknown = Reflect.get(globalThis, "__nifraPpr")
+    if (
+      router.snapshot().pendingPath === routePath &&
+      typeof ppr === "function" &&
+      "leave" in ppr &&
+      typeof ppr.leave === "function"
+    )
+      ppr.leave()
+    return run
   }
 
   // Parse a path into the `{ pathname, search, hash }` a `BlockerFunction` decides on.
@@ -364,6 +447,7 @@ export function installHistory(
     // whole object on back/forward for free.
     const entryState =
       state !== undefined ? { nifraIndex: index, nifraState: state } : { nifraIndex: index }
+    writingEntry(mode)
     if (mode === "replace") {
       // Replace the current entry (same index) with the new URL. The entry we're leaving is discarded, so
       // its scroll isn't worth saving; the new route scrolls to its fragment target, else the top.
@@ -381,7 +465,7 @@ export function installHistory(
     here = url.pathname + url.search + url.hash
     expected = routePath
     // The data layer fetches by path+search; the #hash is client-only (never sent to the server).
-    transition(() => router.navigate(routePath).catch((error) => leave(error, path)))
+    void navigateFrom(routePath, path)
     settle()
   }
 
@@ -417,7 +501,15 @@ export function installHistory(
     }
     go(to, navOptions?.replace === true ? "replace" : "push", navOptions?.state)
   }
-  setBrowserNavigate(navigate, router)
+  // Back through the entries the boundary added to the page underneath; without that entry, replace
+  // the boundary's URL with the page's.
+  const closeBoundary = (name: string): void => {
+    const intercepted = router.snapshot().intercepted
+    if (intercepted === undefined || intercepted.boundary !== name) return
+    if (pageEntry !== undefined && pageEntry < index) history.go(pageEntry - index)
+    else go(intercepted.pagePath, "replace")
+  }
+  setBrowserNavigate(navigate, router, closeBoundary)
 
   // Publish the guard registry through the DOM-free bridge (`@nifrajs/web`'s `registerBlocker`, which an
   // adapter's `useBlocker` calls). One slot, latest registration wins; the unregister clears it only if
@@ -515,10 +607,12 @@ export function installHistory(
       reversing = false
       return
     }
+    adoptNativeEntry()
     const newIndex = (history.state as { nifraIndex?: number } | null)?.nifraIndex ?? 0
     const dest = location.pathname + location.search + (location.hash ?? "")
     const delta = newIndex - index
-    if (guard(dest, () => history.go(delta))) {
+    // A fragment entry the browser just pushed is not a move between entries to reverse.
+    if (delta !== 0 && guard(dest, () => history.go(delta))) {
       reversing = true
       history.go(-delta)
       return
@@ -528,7 +622,7 @@ export function installHistory(
     pendingScroll = { pos: scrollOf(history.state) }
     const routePath = location.pathname + location.search
     expected = routePath
-    transition(() => router.navigate(routePath).catch((error) => leave(error, dest)))
+    void navigateFrom(routePath, dest)
     settle()
   }
 
@@ -555,6 +649,7 @@ export function installHistory(
   // form post back to the page it was on adds nothing.
   const follow = (path: string): void => {
     if (path !== location.pathname + location.search) {
+      writingEntry(expected === undefined ? "push" : "replace")
       if (expected === undefined) {
         history.replaceState({ ...(history.state ?? {}), nifraScroll: [scrollX, scrollY] }, "")
         index += 1
@@ -573,13 +668,15 @@ export function installHistory(
   // A settle with no navigation (a submit's revalidation) scrolls nothing. Either way the rendered
   // page is then scanned for links to warm.
   const settled = (): void => {
-    const { pending, pendingPath } = router.snapshot()
+    const { pending, pendingPath, intercepted } = router.snapshot()
     if (pending) {
       if (pendingPath !== undefined && pendingPath !== expected) follow(pendingPath)
       return
     }
     expected = undefined
-    const target = pendingScroll
+    if (intercepted === undefined) pageEntry = index
+    // A boundary opened over the page leaves the page where it was scrolled.
+    const target = intercepted === undefined ? pendingScroll : null
     pendingScroll = null
     requestAnimationFrame(() => {
       if (target !== null && "hash" in target) {
@@ -599,16 +696,20 @@ export function installHistory(
   document.addEventListener("pointerover", onPrefetch)
   document.addEventListener("focusin", onPrefetch)
   window.addEventListener("popstate", onPopState)
+  // Where a fragment link fires no popstate, its entry is still numbered here.
+  window.addEventListener("hashchange", adoptNativeEntry)
   window.addEventListener("beforeunload", onBeforeUnload)
   return () => {
     unsubscribe()
     inView?.disconnect()
     setBrowserNavigate(undefined) // stop routing `useNavigate` to a torn-down router
     setBlockerController(undefined) // stop routing `useBlocker` to a torn-down registry
+    setPresenter(undefined)
     document.removeEventListener("click", onClick)
     document.removeEventListener("pointerover", onPrefetch)
     document.removeEventListener("focusin", onPrefetch)
     window.removeEventListener("popstate", onPopState)
+    window.removeEventListener("hashchange", adoptNativeEntry)
     window.removeEventListener("beforeunload", onBeforeUnload)
   }
 }
@@ -693,6 +794,47 @@ export function applyHead(head: Meta, path?: string): void {
   }
 }
 
+/**
+ * The route path a form with no action posts to while an intercept boundary holds a target. The
+ * document URL is then the target's, but the form belongs to whichever route rendered it: the target
+ * when it sits inside the boundary's `data-nifra-boundary="<name>"` element, otherwise the page
+ * underneath. `undefined` when the form names its action, or no boundary holds a target.
+ */
+function implicitActionOwner(
+  router: ClientRouter,
+  form: HTMLFormElement,
+  actionFrom: Element,
+): string | undefined {
+  const { intercepted, path } = router.snapshot()
+  if (intercepted === undefined) return undefined
+  const named = Element.prototype.getAttribute.call(actionFrom, actionAttribute(actionFrom, form))
+  if (named !== null && named.trim() !== "") return undefined
+  // Any ancestor marking the open boundary owns it, so a marker nested inside the modal (another
+  // boundary's) does not hand the form to the page. Boundary names are validated identifiers; the
+  // check keeps the selector literal regardless.
+  const inside =
+    BOUNDARY_NAME.test(intercepted.boundary) &&
+    Element.prototype.closest.call(form, `[data-nifra-boundary="${intercepted.boundary}"]`) !== null
+  return inside ? path : intercepted.pagePath
+}
+
+const BOUNDARY_NAME = /^[A-Za-z][A-Za-z0-9_-]*$/
+
+const actionAttribute = (actionFrom: Element, form: HTMLFormElement): string =>
+  actionFrom === form ? "action" : "formaction"
+
+// Point the implicit action at `href` for one native submission; the returned function puts the
+// attribute back, so a form that outlives the boundary (one in a layout) keeps posting to its page.
+function pointAction(actionFrom: Element, form: HTMLFormElement, href: string): () => void {
+  const name = actionAttribute(actionFrom, form)
+  const previous = Element.prototype.getAttribute.call(actionFrom, name)
+  Element.prototype.setAttribute.call(actionFrom, name, href)
+  return () => {
+    if (previous === null) Element.prototype.removeAttribute.call(actionFrom, name)
+    else Element.prototype.setAttribute.call(actionFrom, name, previous)
+  }
+}
+
 // A control named like a form property shadows it (`<input name="target">` makes `form.target` that
 // input), so the form's own state is read through the prototype accessors.
 function formProperty(form: HTMLFormElement, name: "action" | "method" | "target"): string {
@@ -720,14 +862,26 @@ export function installForms(router: ClientRouter): () => void {
     const method = submitter?.hasAttribute("formmethod")
       ? submitter.formMethod
       : formProperty(form, "method")
-    if (method.toLowerCase() !== "post") return // GET forms submit natively
+    const actionFrom = submitter?.hasAttribute("formaction") ? submitter : form
+    const owner = implicitActionOwner(router, form, actionFrom)
+    if (method.toLowerCase() !== "post") {
+      // GET forms submit natively. The browser reads the action after this event, so one the page
+      // rendered under a boundary is pointed at the page for this submission, then restored.
+      if (owner !== undefined)
+        setTimeout(pointAction(actionFrom, form, new URL(appUrl(owner), location.href).href), 0)
+      return
+    }
     const target = submitter?.hasAttribute("formtarget")
       ? submitter.formTarget
       : formProperty(form, "target")
     if (target !== "" && target !== "_self") return // it loads in another browsing context
     // Resolved (or the current document URL if unset).
     const url = sameDocumentUrl(
-      submitter?.hasAttribute("formaction") ? submitter.formAction : formProperty(form, "action"),
+      owner !== undefined
+        ? appUrl(owner)
+        : actionFrom === submitter
+          ? submitter.formAction
+          : formProperty(form, "action"),
     )
     if (url === null) return
     if (router.match(url.pathname) === null) return // not an app route → native submit
@@ -742,9 +896,15 @@ export function installForms(router: ClientRouter): () => void {
       // The server answered: load the page that shows the result rather than run the action again.
       if (to !== undefined) location.assign(to)
       else {
-        // Nothing reached the server - post natively, through the same button.
+        // Nothing reached the server - post natively, through the same button, to the same route.
         native.add(form)
-        HTMLFormElement.prototype.requestSubmit.call(form, submitter)
+        // requestSubmit reads the action synchronously, so the attribute is restored right after.
+        const restore = owner === undefined ? undefined : pointAction(actionFrom, form, url.href)
+        try {
+          HTMLFormElement.prototype.requestSubmit.call(form, submitter)
+        } finally {
+          restore?.()
+        }
       }
     })
   }

package/src/csp.ts

@@ -109,8 +109,9 @@ const inlineScriptBodies = (html: string): string[] => {
 
 const ENCODER = new TextEncoder()
 
-/** A CSP hash source for one inline script body: `'sha256-<base64 of the UTF-8 bytes>'`. */
-async function hashSource(body: string): Promise<string> {
+/** A CSP hash source for one inline script body: `'sha256-<base64 of the UTF-8 bytes>'`. Shared with
+ * the PPR runtime; `index.ts` does not re-export it. */
+export async function hashSource(body: string): Promise<string> {
   const digest = new Uint8Array(await crypto.subtle.digest("SHA-256", ENCODER.encode(body)))
   let binary = ""
   for (const byte of digest) binary += String.fromCharCode(byte)
@@ -158,6 +159,19 @@ const preparedSources = (policy: CspPolicy, adapter: RenderAdapter): AdapterSour
   return known
 }
 
+/**
+ * The policy value for a partially prerendered document: the adapter's hash sources plus `extra`
+ * (the PPR runtime and invoker hashes), with no nonce. Prepare the policy for `adapter` first.
+ */
+export function cspHeaderWithSources(
+  policy: CspPolicy,
+  adapter: RenderAdapter,
+  extra: string,
+): string | undefined {
+  const { sources } = preparedSources(policy, adapter)
+  return policy[CSP_POLICY].header({ sources: sources === "" ? extra : `${sources} ${extra}` })
+}
+
 /**
  * The nonce one document carries under `policy`: `undefined` unless the document needs one -
  * `needsNonce` (a deferred value or a head tag naming the nonce), or an adapter whose hydration head

package/src/deferred.ts

@@ -7,6 +7,7 @@
  */
 import { plainJsonCodec, type TransportCodec } from "@nifrajs/core/transport-codec"
 import { isDeferredFree } from "./internal/deferred-free.ts"
+import { reportDeferredRejection } from "./internal/request-abort.ts"
 import { parsePageData } from "./internal/revive-dates.ts"
 
 /**
@@ -171,15 +172,19 @@ const NDJSON_ENCODER = new TextEncoder()
  * `{__nifra_deferred: id}` placeholders (`forClient`), then one line per deferred as its promise
  * settles - `{"i": id, "v": value}` on resolve, `{"i": id, "e": "deferred_error"}` on reject (a
  * rejection is data, not a stream error; the opaque code never leaks the raw reason). Closes when all
- * settle. The client (`defaultFetchData`) returns the
+ * settle. The client (`fetchRouteData`) returns the
  * data after line 1 and settles `<Await>`'s markers as the resolution lines arrive. `JSON.stringify`
  * escapes newlines in values, so each line is NDJSON-safe; no HTML escaping (this is a fetch body,
- * parsed with `JSON.parse`, never injected into markup).
+ * parsed with `JSON.parse`, never injected into markup). A rejection is logged to `logError`, the
+ * app's error log (the console without one), unless the request `signal` aborting caused it: that is
+ * the client leaving, not a failure.
  */
 export function ndjsonStream(
   forClient: unknown,
   deferred: ReadonlyArray<{ readonly id: number; readonly promise: Promise<unknown> }>,
   codec: TransportCodec = plainJsonCodec,
+  signal?: AbortSignal,
+  logError?: (error: unknown) => void,
 ): ReadableStream<Uint8Array> {
   // A client that goes away cancels the body; a value settling after that has nowhere to go.
   let cancelled = false
@@ -194,7 +199,7 @@ export function ndjsonStream(
           } catch (err) {
             // Redact: stream a stable opaque code, never the raw error text; log the real reason
             // server-side. The client's <Await> errorFallback receives this code.
-            console.error("[nifra/web] deferred value rejected:", err)
+            reportDeferredRejection(signal, err, logError)
             line = codec.encode({ i: d.id, e: DEFERRED_ERROR_CODE })
           }
           if (!cancelled) controller.enqueue(NDJSON_ENCODER.encode(`${line}\n`))
@@ -319,7 +324,7 @@ function markersFromPlaceholders(data: unknown, pending: Pending): unknown {
 }
 
 /**
- * Client side of {@link ndjsonStream} (used by the router's `defaultFetchData` on a soft nav): read
+ * Client side of {@link ndjsonStream} (used by the router's `fetchRouteData` on a soft nav): read
  * the NDJSON body into a data object whose deferred markers settle as resolution lines arrive.
  * Returns after **line 1** so the router can apply the critical data + render immediately; the
  * markers' promises settle/reject in the background. If the stream ends (or `signal` aborts) with
@@ -335,7 +340,8 @@ export async function parseNdjsonData(
   let buffer = ""
   // `{ once: true }` + explicit removal in the drain's `finally` so a reused long-lived signal doesn't
   // accumulate listeners across navigations (a per-nav signal would be GC'd, but don't rely on it).
-  const onAbort = (): void => void reader.cancel()
+  // A body the abort has already errored (WebKit errors it first) rejects the cancel.
+  const onAbort = (): void => void reader.cancel().catch(() => {})
   if (signal) signal.addEventListener("abort", onAbort, { once: true })
   let ended = false
   // Every way out, a malformed line included, detaches from the signal and the body: a source left

package/src/dev-feed.ts

@@ -36,6 +36,7 @@ import {
   buildDiagnostic,
   type Diagnostic,
   type DiagnosticFrame,
+  isConsoleDiagnostic,
 } from "./diagnostic.ts"
 import { createRedactor } from "./internal/secret-scan.ts"
 import { originalPosition, ssrSourceMaps } from "./internal/source-map.ts"
@@ -1140,8 +1141,16 @@ const ssrRemap = (
 export function captureInto(feed: DevFeed): () => void {
   return installCapture({
     feedId: feed.id,
-    line: (level, message, request) =>
-      feed.recordLog(level, message, { requestId: request?.requestId }),
+    line: (level, message, request) => {
+      feed.recordLog(level, message, { requestId: request?.requestId })
+      // A diagnostic the server only logs (no throw reaches the feed) still becomes an entry.
+      if ((level === "warn" || level === "error") && isConsoleDiagnostic(message)) {
+        const warning = new Error(message)
+        warning.name = "Warning"
+        warning.stack = `Warning: ${message}`
+        feed.recordError(warning, { category: "ssr", requestId: request?.requestId })
+      }
+    },
     structured: (entry, request) => {
       const level = isDevLogLevel(entry.level) ? entry.level : "log"
       feed.recordLog(level, structuredText(entry), { requestId: request?.requestId })

package/src/dev-session.ts

@@ -44,7 +44,13 @@ import {
 } from "./dev-feed.ts"
 import { DEV_INDICATOR_MAX_ISSUES, DEV_INDICATOR_SOURCE, type DevIssue } from "./dev-indicator.ts"
 import { createSourceMapper } from "./dev-sourcemap.ts"
-import { fixPrompts, isHydrationMismatch, LAST_ERROR_PATH, promptPath } from "./diagnostic.ts"
+import {
+  fixPrompts,
+  isConsoleDiagnostic,
+  isHydrationMismatch,
+  LAST_ERROR_PATH,
+  promptPath,
+} from "./diagnostic.ts"
 import { diagnosticHeadline } from "./diagnostic-prompt.ts"
 import { timingSafeEqual } from "./internal/timing-safe-equal.ts"
 import { ISR_STATUS_HEADER } from "./isr.ts"
@@ -439,16 +445,21 @@ export function createDevSession(options: DevSessionOptions): DevSession {
     if (event.kind === "console") {
       feed.recordLog(event.level, event.message, meta)
       if (event.error !== undefined) return (await recordBrowserError(event.error, meta)).entry
-      // React 18, Vue and Svelte report a mismatch through the console rather than by throwing.
-      if (
-        (event.level === "error" || event.level === "warn") &&
-        isHydrationMismatch(event.message)
-      ) {
-        const recorded = await recordBrowserError(
-          { name: "HydrationMismatch", message: event.message, stack: "" },
-          meta,
-        )
-        return recorded.entry
+      // React 18, Vue and Svelte report a mismatch through the console rather than by throwing, as
+      // nifra's own browser diagnostics do.
+      if (event.level === "error" || event.level === "warn") {
+        const name = isHydrationMismatch(event.message)
+          ? "HydrationMismatch"
+          : isConsoleDiagnostic(event.message)
+            ? "Warning"
+            : undefined
+        if (name !== undefined) {
+          const recorded = await recordBrowserError(
+            { name, message: event.message, stack: "" },
+            meta,
+          )
+          return recorded.entry
+        }
       }
       return undefined
     }