@antelopejs/dms-frontend 0.3.0 → 0.3.2

package/templates/vue/server.mjs

@@ -18,17 +18,25 @@ import {
   refreshSession,
 } from "./server/auth/routes.mjs";
 import { readSession } from "./server/auth/session.mjs";
+import {
+  BackendResponseError,
+  backendResponseError,
+  redirectAccessRefusal,
+  UNEXPECTED_ERROR_BODY,
+} from "./server/backend-response.mjs";
 import { productionHtmlTemplate } from "./server/client-manifest.mjs";
 import { documentStyleTags } from "./server/dev-styles.mjs";
-import { handleEmailRender } from "./server/email.mjs";
+import { handleEmailRender, watchEmailBundle } from "./server/email.mjs";
 import { HOMEPAGE } from "./server/homepage.mjs";
 import { htmlTag } from "./server/html-tag.mjs";
+import * as requestFailure from "./server/request-failure.mjs";
 import { handleTester } from "./server/tester.mjs";
 import {
   createInertiaPage,
   htmlHeaders,
   inertiaAppHtml,
   inertiaHeaders,
+  isFrontendVisit,
   redirectFrontendVisit,
   handleAssetVersionMismatch,
 } from "./server/inertia.mjs";
@@ -73,13 +81,6 @@ let vite;
 let vitePromise;
 let frontendHttpServer;
 
-class BackendResponseError extends Error {
-  constructor(status) {
-    super(`DMS backend returned ${status}`);
-    this.status = status;
-  }
-}
-
 async function developmentServer() {
   if (process.env.DMS_DEV !== "true") return undefined;
   if (vite) return vite;
@@ -139,7 +140,7 @@ async function backendJson(path, request) {
     headers: backendHeaders(request),
   });
   if (!response.ok) {
-    throw new BackendResponseError(response.status);
+    throw await backendResponseError(response);
   }
   return response.json();
 }
@@ -185,14 +186,6 @@ function writeProxyHeaders(response, upstream) {
   response.writeHead(upstream.status, headers);
 }
 
-function isFrontendVisit(request) {
-  if (request.method !== "GET") return false;
-  return (
-    Boolean(request.headers[INERTIA_HEADER]) ||
-    request.headers.accept?.includes("text/html")
-  );
-}
-
 function redirectToHomepage(request, response, pathname) {
   if (pathname !== "/" || HOMEPAGE === "/") return false;
   redirectFrontendVisit(request, response, HOMEPAGE);
@@ -232,7 +225,12 @@ async function proxy(request, response, fallbackOnNotFound = false) {
     return true;
   }
   const target = new URL(request.url, process.env.DMS_API_BASE_URL);
+  // Cancelling the body alone misses a client that leaves before the backend
+  // answers: its stream, an SSE feed above all, then stayed open for good.
+  const abandoned = new AbortController();
+  response.once("close", () => abandoned.abort());
   const upstream = await fetch(target, {
+    signal: abandoned.signal,
     method: request.method,
     headers: backendHeaders(request),
     body: ["GET", "HEAD"].includes(request.method) ? undefined : request,
@@ -386,14 +384,16 @@ async function writeBackendError(error, request, response) {
     redirectFrontendVisit(request, response, location);
     return;
   }
+  const loadRenderer = async () => ssrRenderer(await developmentServer());
+  if (await redirectAccessRefusal(error, request, response, loadRenderer))
+    return;
   console.error("DMS backend request failed", error);
   if (isFrontendVisit(request)) {
-    const statusMessage = "DMS backend request failed";
     const props = {
       path: pathname,
       page: {},
       ...publicSession(readSession(request)),
-      error: { statusCode: status, statusMessage, message: statusMessage },
+      error: { statusCode: status },
     };
     const page = createInertiaPage(request.url, props);
     if (request.headers[INERTIA_HEADER]) {
@@ -411,7 +411,7 @@ async function writeBackendError(error, request, response) {
   const payload =
     error instanceof UpstreamError || error instanceof RequestBodyError
       ? { message: error.message }
-      : { error: "DMS backend request failed" };
+      : UNEXPECTED_ERROR_BODY;
   response.writeHead(status, { "content-type": JSON_TYPE });
   response.end(JSON.stringify(payload));
 }
@@ -433,6 +433,8 @@ export async function handleRequest(request, response) {
     return handleAuth(request, response, url);
   if (requestOwnership(request.method, pathname) === "server")
     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();
@@ -472,31 +474,32 @@ export async function handleRequest(request, response) {
   );
 }
 
+async function writeRequestFailure(error, request, response) {
+  if (requestFailure.isResponseGone(error, response)) return;
+  if (
+    error instanceof BackendResponseError &&
+    error.status === 401 &&
+    request.method === "GET" &&
+    readSession(request) &&
+    !request.dmsSessionRetry
+  ) {
+    request.dmsSessionRetry = true;
+    if (await refreshSession(request, response)) {
+      await handleRequestSafely(request, response);
+      return;
+    }
+  }
+  await writeBackendError(error, request, response);
+}
+
 export async function handleRequestSafely(request, response) {
   try {
     await handleRequest(request, response);
   } catch (error) {
-    if (
-      error?.code === "ERR_STREAM_PREMATURE_CLOSE" ||
-      response.destroyed ||
-      response.writableEnded ||
-      response.headersSent
-    )
-      return;
-    if (
-      error instanceof BackendResponseError &&
-      error.status === 401 &&
-      request.method === "GET" &&
-      readSession(request) &&
-      !request.dmsSessionRetry
-    ) {
-      request.dmsSessionRetry = true;
-      if (await refreshSession(request, response)) {
-        await handleRequestSafely(request, response);
-        return;
-      }
-    }
-    await writeBackendError(error, request, response);
+    // An error page failing too must not reject: that would end the process.
+    await writeRequestFailure(error, request, response).catch((failure) =>
+      requestFailure.abandonResponse(failure, response),
+    );
   }
 }
 
@@ -531,4 +534,7 @@ async function announceReady() {
       ? `[${address}]`
       : address;
   console.log(`✓ Server ready on http://${host}:${port}`);
+  // Only the production build produces the email bundle otherwise. Started
+  // once the server answers, so it never delays the first page.
+  if (process.env.DMS_DEV === "true") watchEmailBundle();
 }

package/templates/vue/ssr-renderer.ts

@@ -18,8 +18,10 @@ import {
   createDmsFrontendRuntime,
   hasDmsPage,
   preloadDmsPage,
+  resolveDmsAccessRedirect,
   setDmsServerRuntimeResolver,
   setupFrontendModules,
+  trackDmsServerScopes,
 } from "./frontend-module";
 import { frontendModules } from "./frontend-modules.generated";
 
@@ -51,8 +53,14 @@ interface DmsSsrContext {
 }
 
 const SSR_ASYNC_DATA_ID = "dms-ssr-async-data";
-const runtimeStorage = new AsyncLocalStorage<DmsFrontendRuntime>();
-setDmsServerRuntimeResolver(() => runtimeStorage.getStore());
+// Holds the runtime rather than being it: every socket, timer and promise a
+// render starts keeps this store for its whole life, and a pooled backend
+// connection then serving an SSE stream lives for hours. Emptied once the
+// render is over, the store no longer ties the render to them.
+const runtimeStorage = new AsyncLocalStorage<{
+  runtime?: DmsFrontendRuntime;
+}>();
+setDmsServerRuntimeResolver(() => runtimeStorage.getStore()?.runtime);
 
 function asyncDataScript(runtime: DmsFrontendRuntime): string {
   const value = JSON.stringify(serializeDmsAsyncData(runtime)).replaceAll(
@@ -73,6 +81,10 @@ export function isDmsFrontendPage(path: string): boolean {
   return hasDmsPage(path);
 }
 
+export function accessRedirect(code: string): string | undefined {
+  return resolveDmsAccessRedirect(code);
+}
+
 export async function renderDmsPage(
   page: DmsSsrPage,
   serverFetch?: DmsServerFetch,
@@ -84,9 +96,14 @@ export async function renderDmsPage(
     true,
     requestCookies,
   );
-  return runtimeStorage.run(runtime, () =>
-    renderDmsPageWithRuntime(page, runtime, serverFetch),
-  );
+  const store = { runtime };
+  try {
+    return await runtimeStorage.run(store, () =>
+      renderDmsPageWithRuntime(page, runtime, serverFetch),
+    );
+  } finally {
+    store.runtime = undefined;
+  }
 }
 
 async function renderDmsPageWithRuntime(
@@ -95,64 +112,79 @@ async function renderDmsPageWithRuntime(
   serverFetch?: DmsServerFetch,
 ): Promise<DmsSsrResult> {
   await preloadDmsPage(page.props);
-  const head = createHead();
-  const ssrContext: DmsSsrContext = {};
-  let asyncComponents = new Set<string>();
-  const inertiaResult = await createInertiaApp({
-    page,
-    render: (app) => renderToString(app, ssrContext),
-    resolve: resolveDmsInertiaPage,
-    async setup({ App, props, plugin }) {
-      const app = createSSRApp({ render: () => h(App, props) });
-      asyncComponents = trackDmsAsyncComponents(app);
-      const configured = await configureDmsApp({
-        app,
-        head,
-        initialPageProps: page.props,
-        initialPageUrl: page.url,
-        inertiaPlugin: plugin,
-        runtime,
+  let stopScopes = () => {};
+  try {
+    const head = createHead();
+    const ssrContext: DmsSsrContext = {};
+    let asyncComponents = new Set<string>();
+    const inertiaResult = await createInertiaApp({
+      page,
+      render: (app) => renderToString(app, ssrContext),
+      resolve: resolveDmsInertiaPage,
+      async setup({ App, props, plugin }) {
+        const app = createSSRApp({ render: () => h(App, props) });
+        asyncComponents = trackDmsAsyncComponents(app);
+        stopScopes = trackDmsServerScopes(app);
+        const configured = await configureDmsApp({
+          app,
+          head,
+          initialPageProps: page.props,
+          initialPageUrl: page.url,
+          inertiaPlugin: plugin,
+          runtime,
+          serverFetch,
+        });
+        return app;
+      },
+    });
+    if (!inertiaResult) throw new Error("Inertia SSR returned no result");
+    await runtime.pendingNavigation;
+    if (runtime.serverRedirect) {
+      return {
+        body: "",
+        head: { bodyAttrs: "", headTags: "", htmlAttrs: "" },
+        overlays: "",
+        redirect: runtime.serverRedirect,
+      };
+    }
+    if (runtime.currentError.value && !page.props.error) {
+      const failure = runtime.currentError.value as Error & DmsErrorData;
+      const expected =
+        Number.isInteger(failure.statusCode) &&
+        failure.statusCode! >= 400 &&
+        failure.statusCode! <= 599;
+      // An unexpected failure reaches the page as its status code alone, which
+      // the DMS error page describes in the visitor's language; the technical
+      // cause only reaches the server log.
+      if (!expected) console.error("DMS page render failed", failure);
+      const error = expected
+        ? {
+            statusCode: failure.statusCode,
+            message: failure.message,
+            statusMessage: failure.statusMessage,
+          }
+        : { statusCode: 500 };
+      return renderDmsPage(
+        { ...page, props: { ...page.props, error } },
         serverFetch,
-      });
-      return app;
-    },
-  });
-  if (!inertiaResult) throw new Error("Inertia SSR returned no result");
-  await runtime.pendingNavigation;
-  if (runtime.serverRedirect) {
+        runtime.requestCookies,
+      );
+    }
+    const renderedHead = await renderSSRHead(head);
     return {
-      body: "",
-      head: { bodyAttrs: "", headTags: "", htmlAttrs: "" },
-      overlays: "",
-      redirect: runtime.serverRedirect,
-    };
-  }
-  if (runtime.currentError.value && !page.props.error) {
-    const failure = runtime.currentError.value as Error & DmsErrorData;
-    const expected =
-      Number.isInteger(failure.statusCode) &&
-      failure.statusCode! >= 400 &&
-      failure.statusCode! <= 599;
-    const error = {
-      statusCode: expected ? failure.statusCode : 500,
-      message: expected ? failure.message : "An unexpected error occurred",
-      statusMessage: expected ? failure.statusMessage : "Application error",
+      error: page.props.error,
+      body: `${inertiaResult.body}${asyncDataScript(runtime)}${asyncComponentsScript(asyncComponents)}`,
+      head: {
+        bodyAttrs: renderedHead.bodyAttrs,
+        headTags: `${inertiaResult.head.join("")}${renderedHead.headTags}`,
+        htmlAttrs: renderedHead.htmlAttrs,
+      },
+      overlays: ssrContext.teleports?.["#dms-overlays"] ?? "",
     };
-    return renderDmsPage(
-      { ...page, props: { ...page.props, error } },
-      serverFetch,
-      runtime.requestCookies,
-    );
+  } finally {
+    // Only once the head and the async data are serialized: both still read
+    // state the rendered components own.
+    stopScopes();
+    runtime.scope.stop();
   }
-  const renderedHead = await renderSSRHead(head);
-  return {
-    error: page.props.error,
-    body: `${inertiaResult.body}${asyncDataScript(runtime)}${asyncComponentsScript(asyncComponents)}`,
-    head: {
-      bodyAttrs: renderedHead.bodyAttrs,
-      headTags: `${inertiaResult.head.join("")}${renderedHead.headTags}`,
-      htmlAttrs: renderedHead.htmlAttrs,
-    },
-    overlays: ssrContext.teleports?.["#dms-overlays"] ?? "",
-  };
 }

package/templates/vue/vite.email.config.ts

@@ -42,10 +42,14 @@ export default defineConfig({
         for (const file of readdirSync(directory).filter((name) =>
           name.endsWith(".json"),
         )) {
+          const catalog = resolve(directory, file);
+          // Read as data rather than imported: without this, a build in watch
+          // mode would keep emitting the catalogs of its first run.
+          this.addWatchFile(catalog);
           this.emitFile({
             type: "asset",
             fileName: `locales/${file}`,
-            source: readFileSync(resolve(directory, file), "utf8"),
+            source: readFileSync(catalog, "utf8"),
           });
         }
       },