@uniflowed/vite 0.0.0-alpha.9 → 0.2.0

package/internal/dev-state.js

@@ -0,0 +1,161 @@
+// @noflow
+// A local, bounded snapshot of the same diagnostic channel the terminal reads.
+import fs from "node:fs";
+import path from "node:path";
+import { randomUUID } from "node:crypto";
+import { AsyncLocalStorage } from "node:async_hooks";
+import { format } from "node:util";
+
+const requests = new AsyncLocalStorage();
+let receive = null;
+
+export function recordDevEvent(event) {
+  const request = requests.getStore();
+  receive?.({ ...event, ...(request == null ? {} : request), time: Date.now() });
+}
+
+export function startDevState(root, metadata) {
+  const directory = path.join(root, ".uf");
+  if (fs.existsSync(directory) && fs.lstatSync(directory).isSymbolicLink())
+    throw new Error("uf dev: .uf must not be a symlink for diagnostics");
+  fs.mkdirSync(directory, { recursive: true, mode: 0o700 });
+  const file = path.join(directory, "dev-state.json");
+  if (fs.existsSync(file) && fs.lstatSync(file).isSymbolicLink())
+    throw new Error("uf dev: diagnostic state must not be a symlink");
+  const session = randomUUID();
+  const temporary = path.join(directory, "dev-state-" + session + ".tmp");
+  const state = {
+    schema: 1,
+    session,
+    pid: process.pid,
+    startedAt: Date.now(),
+    updatedAt: 0,
+    generation: 0,
+    errors: [],
+    logs: [],
+    routes: [],
+    actions: [],
+  };
+  let closed = false;
+  const persist = (refresh = false) => {
+    if (closed) return;
+    if (refresh || state.updatedAt === 0) {
+      let current;
+      try {
+        current = metadata();
+        state.metadataError = null;
+      } catch (error) {
+        state.metadataError = String(error.message ?? error).slice(0, 4000);
+        current = { routes: state.routes, actions: state.actions };
+      }
+      state.routes = current.routes.slice(0, 1000);
+      state.actions = current.actions.slice(0, 1000);
+      state.truncated = current.routes.length > 1000 || current.actions.length > 1000;
+    }
+    state.updatedAt = Date.now();
+    let serialized = JSON.stringify(state);
+    while (Buffer.byteLength(serialized) > 3 * 1024 * 1024) {
+      const rows = state.logs.length
+        ? state.logs
+        : state.errors.length
+          ? state.errors
+          : state.routes.length
+            ? state.routes
+            : state.actions;
+      if (rows.length === 0) break;
+      rows.shift();
+      state.truncated = true;
+      serialized = JSON.stringify(state);
+    }
+    fs.writeFileSync(temporary, serialized, { mode: 0o600 });
+    fs.renameSync(temporary, file);
+  };
+  const observer = (event) => {
+    const safe = bound(event);
+    if (event.event === "source-changed") {
+      state.generation += 1;
+      state.errors = [];
+    }
+    if (
+      event.event === "error" ||
+      (event.event === "log" && event.level === "error") ||
+      (event.event === "diagnostic" && event.severity === "error")
+    ) {
+      safe.kind ??= /hydrat/i.test(event.message ?? "")
+        ? "hydration"
+        : event.event === "diagnostic"
+          ? "runtime"
+          : "build";
+      state.errors.push(safe);
+      state.errors = state.errors.slice(-100);
+    }
+    if (["log", "diagnostic", "error", "request"].includes(event.event)) {
+      state.logs.push(safe);
+      state.logs = state.logs.slice(-150);
+    }
+    persist(event.event === "source-changed");
+  };
+  receive = observer;
+  persist();
+  // The terminal sees application console output too; keep its original behavior.
+  const originals = new Map();
+  for (const level of ["log", "info", "warn", "error", "debug"]) {
+    const original = console[level];
+    const wrapper = (...args) => {
+      recordDevEvent({ event: "log", level, kind: "runtime", message: format(...args) });
+      original.apply(console, args);
+    };
+    originals.set(level, { original, wrapper });
+    console[level] = wrapper;
+  }
+  const timer = setInterval(() => {
+    try {
+      persist(true);
+    } catch {
+      close();
+    }
+  }, 5000);
+  timer.unref?.();
+  const close = () => {
+    if (closed) return;
+    closed = true;
+    clearInterval(timer);
+    if (receive === observer) receive = null;
+    for (const [level, { original, wrapper }] of originals) {
+      if (console[level] === wrapper) console[level] = original;
+    }
+    try {
+      if (JSON.parse(fs.readFileSync(file, "utf8")).session === session) fs.unlinkSync(file);
+    } catch {
+      /* A missing or unreadable channel is reported by the MCP reader. */
+    }
+    process.off("exit", close);
+  };
+  process.once("exit", close);
+  return {
+    close,
+    middleware(request, response, next) {
+      const requestId = randomUUID();
+      const url = String(request.url ?? "/")
+        .split("?")[0]
+        .slice(0, 1000);
+      response.setHeader("x-uf-request-id", requestId);
+      requests.run({ requestId, url }, () => {
+        observer({ event: "request", requestId, url, method: request.method, time: Date.now() });
+        next();
+      });
+    },
+  };
+}
+
+function bound(value, depth = 0) {
+  if (typeof value === "string") return value.slice(0, 4000);
+  if (value == null || typeof value !== "object") return value;
+  if (depth > 4) return "[truncated]";
+  if (Array.isArray(value)) return value.slice(0, 40).map((v) => bound(v, depth + 1));
+  return Object.fromEntries(
+    Object.entries(value)
+      .slice(0, 32)
+      .map(([key, v]) => [key, bound(v, depth + 1)]),
+  );
+}

package/internal/devtools.js

@@ -0,0 +1,117 @@
+// @noflow
+//
+// Plain JavaScript: executed by the host that runs Vite, before any transform.
+//
+// React DevTools, in `uf dev`, on purpose.
+//
+// DevTools does not attach to React. React attaches to *DevTools*: while
+// `react-dom` is being evaluated it looks for `__REACT_DEVTOOLS_GLOBAL_HOOK__`
+// on the global object and registers itself with whatever it finds, once. A
+// hook that arrives after that line has run is a hook no renderer ever sees, so
+// everything below is about one ordering — the hook exists first — and about
+// saying so in a file whose name a person can grep for.
+//
+// # Why this file exists at all, when it worked before it
+//
+// It did work, and by accident. The Fast Refresh preamble calls
+// `injectIntoGlobalHook` (`./refresh-runtime.js`, Meta's runtime as vendored by
+// `@vitejs/plugin-react`), and that function installs a hook when it finds
+// none, because Fast Refresh needs one to decorate. So `uf dev` had a DevTools
+// hook as a side effect of a function whose subject is hot reloading, in a file
+// uf does not own, with nothing anywhere naming DevTools and no test that would
+// notice its absence. The next upgrade of that vendored runtime, or a change to
+// how the preamble is injected, could have taken it away in a diff nobody would
+// read as being about DevTools. See ubugeeei-prod/uf#503.
+//
+// So the hook is installed here, first, deliberately, and `devtools.test.js`
+// beside this package runs this script's own text against a fake window.
+//
+// # Three things DevTools needs, and what carries each
+//
+// Naming them together, because each is provided somewhere else and each is one
+// edit away from being lost:
+//
+//   1. **The hook, before the renderer.** This module, injected by
+//      `packages/vite/index.js`'s `transformIndexHtml` as a *classic* script at
+//      the top of the head — see [`devtoolsPreamble`] for why classic.
+//   2. **One copy of the renderer.** `resolve.dedupe: ["react", "react-dom"]`
+//      in that same file. Two copies of `react-dom` register two renderers, and
+//      DevTools shows the tree of whichever one it heard from — which is the
+//      shape of the "multiple renderers concurrently rendering" report.
+//   3. **The development build of it.** `mode` is `development`, so Vite
+//      resolves React's development export condition, and `uf transform` is
+//      called with `development: true` — which is what emits `jsxDEV` and the
+//      `_jsxFileName` beside every element. Against a production build DevTools
+//      says so and shows a tree with no props, no hooks and no source.
+//
+// # And out of a production build
+//
+// A production build injects none of this: `transformIndexHtml` returns an
+// empty list unless the plugin is serving. That is the half a person can check
+// on the artefact rather than by reading, and
+// `crates/uf_cli/tests/vite.rs`'s `a_build_ships_no_devtools_hook` does.
+//
+// What it checks for is the *assignment* below rather than the name, and the
+// distinction is worth stating here because the obvious test is wrong: React's
+// own production build mentions `__REACT_DEVTOOLS_GLOBAL_HOOK__` twice, because
+// reading that global is how a deployed React application is attachable at all.
+// React reads it; only an installer writes it. So `window.<hook> =` is what
+// must be absent, and it is absent because this function is never called
+// outside a dev server.
+
+/**
+ * The global React registers itself with.
+ *
+ * Written once, here, so that every other mention of it in uf — the injected
+ * script below, the assertion that a build has none — is this constant rather
+ * than a fourth spelling of a name whose whole value is that it matches
+ * React's exactly.
+ */
+export const DEVTOOLS_HOOK = "__REACT_DEVTOOLS_GLOBAL_HOOK__";
+
+/**
+ * The script every document loads before anything else in development.
+ *
+ * # A classic script, not a module
+ *
+ * Everything else uf injects is `type="module"`, and a module script is
+ * deferred: it runs after the document has been parsed, in document order with
+ * the other modules. That would still be early enough today, because the client
+ * entry is also a module and comes later — but "early enough as long as nobody
+ * adds a script above it" is exactly the accident this file exists to end. A
+ * classic inline script runs while the parser is on it, so no module, no
+ * import, and no `<script src>` a project's own Vite plugin injects can get
+ * between this and the renderer.
+ *
+ * # It never replaces a hook that is already there
+ *
+ * The DevTools extension installs its hook at `document_start`, which is before
+ * any script in the document, so on a machine that has DevTools the branch
+ * below is not taken and the extension's hook is what React registers with.
+ * Overwriting it would be the one way this file could break the thing it exists
+ * to support: the extension holds the connection to the panel, and a stub in
+ * its place is a page DevTools can see and never hear from.
+ *
+ * What is installed when there is nothing to leave alone is the minimum a
+ * renderer will register with — `renderers`, `supportsFiber`, `inject` and the
+ * three commit callbacks. It reports nothing to anybody: there is no panel, and
+ * the point of installing it is that `react-dom` takes the branch where a hook
+ * exists, so Fast Refresh has one to decorate and DevTools opened *later* in
+ * the same page finds a renderer already registered rather than a page that has
+ * to be reloaded. It is the same shape `injectIntoGlobalHook` installs, because
+ * it is the same contract; the difference is that this is uf saying so.
+ */
+export function devtoolsPreamble() {
+  return `(function () {
+  if (window.${DEVTOOLS_HOOK} != null) return;
+  var nextID = 0;
+  window.${DEVTOOLS_HOOK} = {
+    renderers: new Map(),
+    supportsFiber: true,
+    inject: function () { return nextID++; },
+    onScheduleFiberRoot: function () {},
+    onCommitFiberRoot: function () {},
+    onCommitFiberUnmount: function () {},
+  };
+})();`;
+}

package/internal/diagnostics.js

@@ -0,0 +1,369 @@
+// @noflow
+//
+// Plain JavaScript: executed by the host that runs Vite, before any transform.
+//
+// The channel a browser reports on.
+//
+// Every other uf diagnostic — a type error, a lint finding, a failing test, a
+// page that rendered its error boundary — arrives in the terminal the
+// developer already has open. A diagnostic the *browser* produces had nowhere
+// to go: the page is the only process that knows about it, and it has no
+// channel back. So it lived in a browser overlay, which has to be noticed, in
+// a window that may not be in front, by somebody who does not know to look.
+//
+// This is that channel, and it is deliberately one channel rather than one per
+// feature. Two things report on it today:
+//
+//   * `POST /__uf/diagnostic` — a diagnostic a browser-side runtime produced
+//     and wants a person to read. `@uniflowed/router`'s `internal/diagnostics.js`
+//     is the client half; the hydration-mismatch report beside it is what calls
+//     it, and so is `internal/devtools.js`, which reads back after hydration
+//     whether React DevTools can attach to this page at all
+//     (ubugeeei-prod/uf#503). One channel and not one per feature is the whole
+//     point: a second endpoint would be a second thing to notice.
+//   * `POST /__uf/vitals`     — the five numbers `@uniflowed/web/vitals`
+//     measures, posted by `vitalsBeacon()`. In production a project points the
+//     beacon at an endpoint of its own; in development there was nothing at
+//     the default path, so the one place the numbers are most useful — while
+//     you are looking at the page — was the one place they went nowhere.
+//
+// Both end up as the same `diagnostic` event on the driver's control channel
+// (see `./events.js`), which is what gets them uf's own rendering: a severity,
+// a location, and a code frame when the browser had a position to give.
+//
+// # The terminal, and not a browser overlay
+//
+// ubugeeei-prod/uf#557 asked for the vitals to be shown in the overlay. They
+// are shown in the terminal instead, and the later issue that generalised this
+// — #583 — is the argument: a diagnostic that exists only in a browser window
+// has to be noticed by somebody who does not know to look, which is the defect
+// rather than the delivery. Sending these *back* to an overlay would also be
+// circular for the diagnostic half, which arrived from the page in the first
+// place, and an overlay covers the page a performance number is about. What it
+// costs is that a reader watching the browser rather than the terminal sees
+// nothing until they look, which is where every other uf diagnostic already
+// is.
+//
+// # Nothing leaves the machine
+//
+// This module opens no connection. It reads a request that the page on the
+// other end of the dev server's own socket made, writes a line to the terminal
+// that started the dev server, and answers `204`. There is no destination, no
+// third party and nothing to configure, in development or otherwise.
+//
+// # Why the paths are written out here
+//
+// `VITALS_ENDPOINT` in `@uniflowed/web/vitals` and `DIAGNOSTIC_ENDPOINT` in
+// `@uniflowed/router`'s `internal/diagnostics.js` are the same two strings, and
+// they are the contract. They cannot be *imported* here: this module is loaded
+// by Vite before any Flow transform exists, and both of those are Flow. So they
+// are written out, and `packages/vite/dev-channel.test.js` asserts that all
+// four spellings agree — a duplicated constant with a test on it is honest, and
+// one without is how the browser ends up posting to a path nothing serves.
+//
+// # Why `/__uf/`
+//
+// A directory under `app/` whose name begins with `_` is not a route, so no
+// application can put anything at this prefix and nothing here can shadow a
+// path a project wrote. That is what makes it safe as a default destination
+// and available to the dev server.
+
+/** Where `@uniflowed/router`'s `reportDiagnostic` posts. */
+export const DIAGNOSTIC_ENDPOINT = "/__uf/diagnostic";
+
+/** Where `@uniflowed/web/vitals`'s `vitalsBeacon()` posts by default. */
+export const VITALS_ENDPOINT = "/__uf/vitals";
+
+/**
+ * The most a report may weigh.
+ *
+ * A diagnostic is a headline and a few lines of context; a vitals report is
+ * five numbers. Neither is close to this, and the ceiling is here because the
+ * body arrives from a page — "no unbounded anything" in `docs/security.md`
+ * covers a dev server reading a request as much as it covers a production one,
+ * and a page with a runaway loop in it must not be able to make `uf dev` grow
+ * without bound.
+ */
+export const MAX_BODY_BYTES = 64 * 1024;
+
+/** The most detail lines one diagnostic prints. */
+const MAX_DETAIL_LINES = 40;
+
+/** The most characters any single line of a diagnostic prints. */
+const MAX_LINE_CHARS = 400;
+
+/** The most metrics one vitals report is read for; there are five names. */
+const MAX_VITALS = 16;
+
+/** The most characters a metric's name or its rating may print as. */
+const MAX_NAME_CHARS = 32;
+
+/** The severities the channel accepts, and the words the terminal uses. */
+const SEVERITIES = new Set(["error", "warn", "info"]);
+
+/**
+ * The connect middleware that answers the channel.
+ *
+ * Mounted **before** the application middleware, so a request under `/__uf/`
+ * never reaches a project's `$middleware.js` or its route table. A guard
+ * that ran for a page's own telemetry would be a guard asked a question the
+ * application never asks, and one that redirected it would turn a report into
+ * a login page.
+ *
+ * `report` is injected rather than reached for so that this module can be
+ * driven without a terminal, a socket or a driver; `internal/events.js`'s
+ * `emit` is what the plugin passes.
+ *
+ * @param {(diagnostic: object) => void} report
+ */
+export function createChannelMiddleware(report) {
+  return async function channel(request, response, next) {
+    const pathname = (request.url ?? "/").split("?")[0];
+    const isVitals = pathname === VITALS_ENDPOINT;
+    if (!isVitals && pathname !== DIAGNOSTIC_ENDPOINT) {
+      next();
+      return;
+    }
+
+    // A `GET` on either path is somebody checking whether the dev server has
+    // them, and `405` with `Allow` answers that exactly. `404` would have said
+    // the opposite of the truth.
+    if (request.method !== "POST") {
+      response.statusCode = 405;
+      response.setHeader("allow", "POST");
+      response.end();
+      return;
+    }
+
+    let body;
+    try {
+      body = await readBody(request, MAX_BODY_BYTES);
+    } catch {
+      // A socket that went away mid-body. There is nothing to report and
+      // nobody left to answer.
+      response.statusCode = 400;
+      response.end();
+      return;
+    }
+    if (body == null) {
+      response.statusCode = 413;
+      response.end();
+      return;
+    }
+
+    let payload = null;
+    try {
+      payload = JSON.parse(body);
+    } catch {
+      payload = null;
+    }
+    const diagnostic = isVitals ? vitalsDiagnostic(payload) : browserDiagnostic(payload);
+    if (diagnostic == null) {
+      // The body was not the shape this path promises. Refused rather than
+      // guessed at: a diagnostic assembled out of a malformed report is a line
+      // in somebody's terminal that describes nothing.
+      response.statusCode = 400;
+      response.end();
+      return;
+    }
+
+    // Everything above either answered or handed the request on, so nothing
+    // below can leave one hanging — and an exception from `report` is the dev
+    // server's own failure rather than the page's, so it goes to Vite's error
+    // handler like any other. An `async` connect middleware whose rejection
+    // nobody catches is an unhandled rejection, which on a modern Node ends
+    // the process: `uf dev` would exit on a malformed telemetry post.
+    try {
+      report(diagnostic);
+    } catch (error) {
+      next(error);
+      return;
+    }
+    // No body, and nothing about the machine in the answer. The page posted
+    // this and is not owed a reading of it back.
+    response.statusCode = 204;
+    response.end();
+  };
+}
+
+/**
+ * One diagnostic a browser-side runtime produced, or `null`.
+ *
+ * Every field is checked and every string is bounded, because all of it is
+ * page-authored: a hydration mismatch on a page whose difference is in
+ * somebody's comment carries that comment into this terminal. Nothing here is
+ * interpreted — the terminal renderer prints text — but a report with a
+ * thousand lines in it would still scroll the reason for it off the screen.
+ *
+ * @param {unknown} payload
+ */
+export function browserDiagnostic(payload) {
+  if (payload == null || typeof payload !== "object" || Array.isArray(payload)) return null;
+  const message = line(payload.message);
+  if (message === "") return null;
+
+  const severity = SEVERITIES.has(payload.severity) ? payload.severity : "error";
+  const diagnostic = { severity, message };
+  const origin = line(payload.url);
+  if (origin !== "") diagnostic.origin = origin;
+  const detail = lines(payload.detail);
+  if (detail.length > 0) diagnostic.detail = detail;
+  // A position, when the browser had one. It is what turns the status line
+  // into a code frame on the other side, and a browser that only knows "this
+  // component" rather than "this line" is expected: the frame is the better
+  // rendering when it is available and never a requirement.
+  const file = line(payload.file);
+  if (file !== "" && Number.isInteger(payload.line) && payload.line > 0) {
+    diagnostic.file = file;
+    diagnostic.line = payload.line;
+    if (Number.isInteger(payload.column) && payload.column >= 0) {
+      diagnostic.column = payload.column;
+    }
+  }
+  return diagnostic;
+}
+
+/**
+ * A `VitalsReport` as one diagnostic, or `null` when it carries no metric.
+ *
+ * One diagnostic per report rather than one per metric, because the beacon
+ * already coalesces across a microtask and a page load would otherwise be five
+ * separate lines interleaved with whatever else the terminal is saying. The
+ * severity is the worst rating in the report, which is the rule the issue asks
+ * for: a rating that is not `good` is the interesting one and has to read as
+ * one.
+ *
+ * @param {unknown} payload
+ */
+export function vitalsDiagnostic(payload) {
+  if (payload == null || typeof payload !== "object" || Array.isArray(payload)) return null;
+  if (!Array.isArray(payload.vitals)) return null;
+
+  const measured = [];
+  for (const vital of payload.vitals.slice(0, MAX_VITALS)) {
+    if (vital == null || typeof vital !== "object") continue;
+    if (typeof vital.name !== "string" || typeof vital.value !== "number") continue;
+    if (!Number.isFinite(vital.value)) continue;
+    // The name and the rating are the page's strings, not this module's, even
+    // though a beacon written by `@uniflowed/web/vitals` only ever sends the
+    // five names and the three ratings. Anything can post here, so they go
+    // through the same bounding and control-character scrub as a diagnostic's
+    // own text, and a *word* has no business being longer than a word.
+    const name = line(vital.name).slice(0, MAX_NAME_CHARS);
+    if (name === "") continue;
+    const rating = line(vital.rating).slice(0, MAX_NAME_CHARS) || "unknown";
+    measured.push({ name, value: vital.value, rating });
+  }
+  if (measured.length === 0) return null;
+
+  // Worst first, so the line the reader needs is the line under the headline
+  // rather than wherever the browser happened to finish measuring.
+  measured.sort((left, right) => severityOf(right.rating) - severityOf(left.rating));
+  const worst = measured[0];
+  const severity = ratingSeverity(worst.rating);
+  const message =
+    severity === "info"
+      ? `web vitals: ${measured.map((vital) => vital.name).join(", ")} good`
+      : `web vitals: ${worst.name} is ${worst.rating} (${formatValue(worst)})`;
+
+  const diagnostic = {
+    severity,
+    message,
+    detail: measured.map((vital) => `${vital.name} ${formatValue(vital)} — ${vital.rating}`),
+  };
+  const origin = line(payload.url);
+  if (origin !== "") diagnostic.origin = origin;
+  return diagnostic;
+}
+
+/** How bad a rating is, for ordering; an unknown word sorts as the worst. */
+function severityOf(rating) {
+  if (rating === "good") return 0;
+  if (rating === "needs-improvement") return 1;
+  return 2;
+}
+
+/** The channel severity a rating maps to. */
+function ratingSeverity(rating) {
+  if (rating === "good") return "info";
+  if (rating === "needs-improvement") return "warn";
+  return "error";
+}
+
+/**
+ * A metric's value with its unit.
+ *
+ * CLS is a unitless layout-shift score and everything else is milliseconds,
+ * which is the one thing a reader has to know to act on the number — a `0.24`
+ * printed as `0.24 ms` reads as the best result in the report rather than a
+ * failing one.
+ */
+function formatValue(vital) {
+  if (vital.name === "CLS") return String(Math.round(vital.value * 1000) / 1000);
+  return `${Math.round(vital.value)} ms`;
+}
+
+/** One bounded single-line string, or `""` for anything that is not one. */
+function line(value) {
+  if (typeof value !== "string") return "";
+  return printable(value).trim();
+}
+
+/** A bounded list of bounded lines, from a string or an array of them. */
+function lines(value) {
+  const source = typeof value === "string" ? value.split("\n") : value;
+  if (!Array.isArray(source)) return [];
+  const kept = [];
+  for (const entry of source) {
+    if (kept.length === MAX_DETAIL_LINES) {
+      kept.push("…");
+      break;
+    }
+    if (typeof entry !== "string") continue;
+    kept.push(printable(entry));
+  }
+  return kept;
+}
+
+/**
+ * One line of page-authored text, safe to write to a terminal and bounded.
+ *
+ * Every control character becomes a space, `ESC` included, and that is the
+ * point rather than tidiness: what is being rendered was written by a page, and
+ * a page that could put `ESC [` into a diagnostic could move the cursor,
+ * recolour the rest of the session or overwrite the line above its own report.
+ * `uf` owns this terminal — see `internal/events.js` — and nothing that arrives
+ * over a socket gets to draw on it.
+ *
+ * A scan rather than a regular expression, per `docs/security.md`'s "no regex
+ * on untrusted input": the rule is about backtracking and a character class
+ * cannot backtrack, but a loop needs no argument at all and is no longer.
+ */
+function printable(value) {
+  let text = "";
+  for (const character of value.slice(0, MAX_LINE_CHARS)) {
+    const code = character.codePointAt(0);
+    text += code < 0x20 || code === 0x7f ? " " : character;
+  }
+  return text;
+}
+
+/**
+ * The whole request body, or `null` when it is over `limit`.
+ *
+ * Counted as it arrives rather than trusting `content-length`: the header is
+ * the sender's claim and the bytes are the fact, and `sendBeacon` sends
+ * neither a length this side should rely on nor a content type worth reading —
+ * a string payload goes out as `text/plain`, so the type says nothing about
+ * whether the body is the JSON both endpoints document.
+ */
+async function readBody(request, limit) {
+  let size = 0;
+  const chunks = [];
+  for await (const chunk of request) {
+    size += chunk.length;
+    if (size > limit) return null;
+    chunks.push(chunk);
+  }
+  return Buffer.concat(chunks).toString("utf8");
+}

package/internal/events.js

@@ -11,6 +11,7 @@
 // logger, which is redirected here as well so nothing bypasses the channel.
 
 import { createLogger } from "vite";
+import { recordDevEvent } from "./dev-state.js";
 
 /**
  * Emit one event.
@@ -19,6 +20,7 @@ import { createLogger } from "vite";
  * `done` is on the pipe before the process exits.
  */
 export function emit(event, fields = {}) {
+  recordDevEvent({ event, ...fields });
   process.stdout.write(`${JSON.stringify({ event, ...fields })}\n`);
 }
 
@@ -54,11 +56,11 @@ export function stripAnsi(text) {
 /**
  * Report a page that rendered its error boundary instead of itself.
  *
- * `uf dev` has two renderers — the plugin's middleware and the driver's — and
- * this is the one place either of them says so, because a message written
- * twice is a message that ends up saying two things. The document the browser
- * gets is the application's error page, which is what a visitor would see;
- * the exception belongs in the terminal, which is uf's.
+ * The document the browser gets is the application's error page, which is what
+ * a visitor would see; the exception belongs in the terminal, which is uf's.
+ * There is one renderer under `uf dev` and therefore one caller of this — see
+ * `../index.js` — where there used to be two middlewares and a message that
+ * could be written twice.
  *
  * The stack is mapped back onto the Flow source first, so the frames name the
  * file that was written rather than the one that was compiled.
@@ -67,6 +69,7 @@ export function reportRenderError(server, url, error) {
   if (error instanceof Error) {
     server.ssrFixStacktrace(error);
   }
+  emit("diagnostic", { severity: "error", kind: "runtime", origin: url, ...errorEvent(error) });
   const detail = error instanceof Error ? (error.stack ?? error.message) : String(error);
   server.config.logger.error(`${url} rendered its error boundary\n${stripAnsi(detail)}`);
 }