@antelopejs/dms-frontend 0.3.6 → 0.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms-frontend",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "Frontend-agnostic loader for AntelopeJS DMS, shipping the Vue 3 renderer (Vite, Inertia, SSR)",
   "keywords": [
     "antelope",

package/templates/vue/frontend-module.ts

@@ -333,6 +333,11 @@ export interface DmsFrontendRuntime {
   pendingNavigation?: Promise<void>;
   hasNavigationListener: boolean;
   pageVersion: number;
+  /**
+   * Identifies the page on screen (its path, or the error page shown at that
+   * path), whose meta `route.meta` holds.
+   */
+  pageKey?: string;
   /** The `Cookie` header of the request a server runtime renders. */
   requestCookies?: string;
   /**
@@ -495,7 +500,10 @@ function parseRoute(runtime: DmsFrontendRuntime, url: string): DmsRoute {
 }
 
 function updateRoute(runtime: DmsFrontendRuntime, url: string): void {
-  Object.assign(runtime.route, parseRoute(runtime, url));
+  // The meta is the page's, not the URL's: a page declares it, then reads its
+  // route, and the middleware the meta selected must still find it.
+  const { meta: _pageMeta, ...location } = parseRoute(runtime, url);
+  Object.assign(runtime.route, location);
 }
 
 function locationToUrl(
@@ -578,16 +586,22 @@ async function visit(
 export function useDmsRoute(pattern?: string): DmsRoute {
   const runtime = useDmsRuntime();
   runtime.currentRoutePattern = pattern;
+  // A server render answers one request, whose URL the runtime was given with
+  // its page, and never changes it. Inertia's page is one ref for the whole
+  // process, written by each render as it starts: after an await it may hold
+  // another request's URL, and while the plugins set up, the previous one's.
+  if (runtime.isServer) {
+    updateRoute(runtime, runtime.route.fullPath);
+    return runtime.route;
+  }
   const page = usePage();
-  updateRoute(runtime, page.url);
-  // A server render never changes its URL, and Inertia's page is shared by
-  // every render the process runs: a watcher there would only tie this
-  // request's runtime to all the requests after it.
-  if (!runtime.isServer)
-    watch(
-      () => page.url,
-      (url) => updateRoute(runtime, url),
-    );
+  // The browser's plugins set up before Inertia has a page: until then the
+  // runtime's route is the initial page's.
+  if (page.url !== undefined) updateRoute(runtime, page.url);
+  watch(
+    () => page.url,
+    (url) => updateRoute(runtime, url),
+  );
   return runtime.route;
 }
 
@@ -1360,6 +1374,14 @@ export function getDmsLayoutProps(
 export function hydrateDmsPageProps(props: DmsPageProps, url?: string): void {
   const runtime = useDmsRuntime();
   if (url) updateRoute(runtime, url);
+  // Pages are keyed by path: another path mounts another page, which declares
+  // its own meta, and so does an error page shown in place of the page. A
+  // visit that only changes the query keeps the page, and so its meta.
+  const pageKey = props.error ? `error:${props.path}` : props.path;
+  if (pageKey !== runtime.pageKey) {
+    runtime.pageKey = pageKey;
+    runtime.route.meta = {};
+  }
   runtime.pageVersion++;
   runtime.currentError.value = null;
   useDmsState<DmsUser | null>("dms-user", () => null).value =

package/templates/vue/server/client-error.mjs

@@ -0,0 +1,41 @@
+// Answers for requests Node rejects before the request handler runs. Without
+// a `clientError` listener Node answers on its own and logs nothing, so a page
+// refused for its headers left no trace in the server output.
+
+const HEADER_OVERFLOW = "HPE_HEADER_OVERFLOW";
+const HEADER_OVERFLOW_RESPONSE =
+  "HTTP/1.1 431 Request Header Fields Too Large\r\nConnection: close\r\n\r\n";
+const BAD_REQUEST_RESPONSE =
+  "HTTP/1.1 400 Bad Request\r\nConnection: close\r\n\r\n";
+// A browser retries a refused page with the same cookies: one hint per minute
+// is enough to explain them all.
+const HEADER_OVERFLOW_HINT_INTERVAL_MS = 60_000;
+
+let lastHeaderOverflowHint = -Infinity;
+
+function warnHeaderOverflow(maxHeaderSize) {
+  const now = Date.now();
+  if (now - lastHeaderOverflowHint < HEADER_OVERFLOW_HINT_INTERVAL_MS) return;
+  lastHeaderOverflowHint = now;
+  console.warn(
+    `DMS refused a request with 431: its headers exceed the ${maxHeaderSize}-byte limit. ` +
+      "This is most often cookies accumulated on this host (browsers share " +
+      "localhost cookies across ports); clear this site's cookies and reload.",
+  );
+}
+
+/**
+ * The server's `clientError` listener: explains a 431 in the logs, and
+ * otherwise answers as Node does without a listener.
+ */
+export function handleClientError(error, socket, maxHeaderSize) {
+  let response = BAD_REQUEST_RESPONSE;
+  if (error.code === HEADER_OVERFLOW) {
+    response = HEADER_OVERFLOW_RESPONSE;
+    warnHeaderOverflow(maxHeaderSize);
+  }
+  // Once a response went out on this connection, a status line would land in
+  // the middle of it.
+  if (socket.writable && socket.bytesWritten === 0) socket.write(response);
+  socket.destroy();
+}

package/templates/vue/server.mjs

@@ -1,5 +1,5 @@
 import { createReadStream, existsSync, readFileSync, statSync } from "node:fs";
-import { createServer } from "node:http";
+import { createServer, maxHeaderSize } from "node:http";
 import { extname, join, resolve, sep } from "node:path";
 import { Readable } from "node:stream";
 import { pipeline } from "node:stream/promises";
@@ -19,6 +19,7 @@ import {
   redirectAccessRefusal,
   UNEXPECTED_ERROR_BODY,
 } from "./server/backend-response.mjs";
+import { handleClientError } from "./server/client-error.mjs";
 import { productionHtmlTemplate } from "./server/client-manifest.mjs";
 import { writeContent } from "./server/content.mjs";
 import {
@@ -400,6 +401,22 @@ async function answeredByVite(devServer, request, response) {
   return result.status !== "unhandled";
 }
 
+/**
+ * Vite's own URLs (`/@vite/client`, `/@id/…`, `/@fs/…`) and paths with an
+ * extension name files: modules, stylesheets, fonts, images, built assets.
+ * The backend's routes outside `/api` and `/dms` are mostly the paths of the
+ * pages they serve data for, which have none (`/<page>/pagelayout`).
+ */
+function isFilePath(pathname) {
+  return pathname.startsWith("/@") || extname(pathname) !== "";
+}
+
+/** Vite's files in development, the build's in production. */
+async function answeredWithFile(devServer, request, response, pathname) {
+  if (!devServer) return serveAsset(pathname, request, response);
+  return pathname !== "/" && answeredByVite(devServer, request, response);
+}
+
 export async function handleRequest(request, response) {
   const url = new URL(request.url, "http://frontend.local");
   const pathname = url.pathname;
@@ -420,13 +437,18 @@ export async function handleRequest(request, response) {
     return proxy(request, response);
   if (requestFailure.hasMalformedPath(request.url))
     return requestFailure.writeBadRequest(response);
-  if (!isFrontendVisit(request) && (await proxy(request, response, true)))
-    return;
   const devServer = await developmentServer();
-  if (devServer && pathname !== "/") {
-    if (await answeredByVite(devServer, request, response)) return;
-  }
-  if (!devServer && serveAsset(pathname, request, response)) return;
+  const visit = isFrontendVisit(request);
+  // A file is looked for among the frontend's own before the backend is asked
+  // for it: asking first cost a backend round trip for each of the hundreds of
+  // modules a development page loads, and for each built asset. A file the
+  // frontend does not have, a media file, is still the backend's.
+  const fileFirst = !visit && isFilePath(pathname);
+  const serveFile = () =>
+    answeredWithFile(devServer, request, response, pathname);
+  if (fileFirst && (await serveFile())) return;
+  if (!visit && (await proxy(request, response, true))) return;
+  if (!fileFirst && (await serveFile())) return;
   if (handleAssetVersionMismatch(request, response)) return;
   if (redirectToHomepage(request, response, pathname)) return;
   const props = await pageProps(request);
@@ -489,6 +511,9 @@ if (
   import.meta.url === new URL(`file://${process.argv[1]}`).href
 ) {
   frontendHttpServer = createServer(handleRequestSafely);
+  frontendHttpServer.on("clientError", (error, socket) =>
+    handleClientError(error, socket, maxHeaderSize),
+  );
   frontendHttpServer.listen(
     Number(process.env.PORT ?? 3001),
     process.env.HOST ?? "0.0.0.0",