Fix not-found navigation and markdown status

Author: JoviDeCroock

packages/framework/src/router.ts

@@ -444,6 +444,16 @@ export async function initClientRouter(options: InitClientRouterOptions): Promis
         }
 
         if (result.type === "error") {
+          if (result.error.status === 404 && app.notFound) {
+            const routeModule = (await routeModPromise?.catch(() => null)) as {
+              ErrorBoundary?: unknown;
+            } | null;
+            if (!routeModule?.ErrorBoundary) {
+              window.location.href = target.browserUrl;
+              return;
+            }
+          }
+
           state = {
             data: undefined,
             error: result.error,

packages/framework/src/runtime-negotiation.ts

@@ -40,10 +40,14 @@ export function prefersMarkdown(accept: string | null): boolean {
   return md.quality >= html.quality;
 }
 
-export function markdownResponse(source: string, initHeaders?: HeadersInit): Response {
+export function markdownResponse(
+  source: string,
+  initHeaders?: HeadersInit,
+  status = 200,
+): Response {
   const headers = new Headers(initHeaders);
   headers.set("content-type", "text/markdown; charset=utf-8");
   appendVaryHeader(headers, "Accept");
   applyDefaultSecurityHeaders(headers);
-  return new Response(source, { status: 200, headers });
+  return new Response(source, { status, headers });
 }

packages/framework/src/runtime.ts

@@ -482,7 +482,7 @@ export async function handlePrachtRequest<TContext>(
           markdownRepresentation !== undefined &&
           prefersMarkdown(options.request.headers.get("accept"))
         ) {
-          return markdownResponse(markdownRepresentation, documentHeaders);
+          return markdownResponse(markdownRepresentation, documentHeaders, pageOptions.status);
         }
 
         const cssUrls = resolvePageCssUrls(

packages/framework/test/not-found.test.ts

@@ -170,6 +170,29 @@ describe("app-level notFound page", () => {
     expect(response.headers.get("content-type")).toContain("text/plain");
   });
 
+  it("keeps the 404 status for a markdown representation", async () => {
+    const response = await handlePrachtRequest({
+      app: createApp(),
+      registry: {
+        ...registry,
+        routeModules: {
+          ...registry.routeModules,
+          "./routes/not-found.tsx": async () => ({
+            Component: () => h("h1", null, "Page not found"),
+            markdown: "# Page not found\n",
+          }),
+        },
+      },
+      request: new Request("http://localhost/missing", {
+        headers: { accept: "text/markdown" },
+      }),
+    });
+
+    expect(response.status).toBe(404);
+    expect(response.headers.get("content-type")).toContain("text/markdown");
+    await expect(response.text()).resolves.toBe("# Page not found\n");
+  });
+
   it("is not prerendered as a page of its own", async () => {
     const app = defineApp({
       routes: [route("/", "./routes/home.tsx", { render: "ssg" })],

packages/framework/test/router-client.test.ts

@@ -398,6 +398,89 @@ describe("initClientRouter", () => {
     await flush();
     expect(root.textContent).toContain("clicked");
   });
+
+  it("uses a document navigation for loader 404s instead of a shell boundary", async () => {
+    const app = resolveApp(
+      defineApp({
+        shells: { public: "./shells/public.tsx" },
+        routes: [
+          route("/", "./routes/home.tsx", { id: "home", render: "ssr" }),
+          route("/posts/:slug", "./routes/post.tsx", {
+            id: "post",
+            render: "ssr",
+            shell: "public",
+          }),
+        ],
+        notFound: "./routes/not-found.tsx",
+      }),
+    );
+    const originalLocation = window.location;
+    const documentNavigations: string[] = [];
+    Object.defineProperty(window, "location", {
+      configurable: true,
+      value: {
+        ...window.location,
+        get href() {
+          return "http://localhost/";
+        },
+        set href(value: string) {
+          documentNavigations.push(value);
+        },
+        hash: "",
+        origin: "http://localhost",
+        pathname: "/",
+        search: "",
+      },
+    });
+
+    try {
+      root.innerHTML = "<main>home</main>";
+      fetchSpy.mockResolvedValue(
+        createJsonResponse(
+          {
+            error: {
+              message: "Post not found",
+              name: "PrachtHttpError",
+              status: 404,
+            },
+          },
+          { status: 404 },
+        ),
+      );
+
+      await initClientRouter({
+        app,
+        routeModules: {
+          "./routes/home.tsx": async () => ({ default: () => h("main", null, "home") }),
+          "./routes/post.tsx": async () => ({ default: () => h("main", null, "post") }),
+          "./routes/not-found.tsx": async () => ({ default: () => h("main", null, "404") }),
+        },
+        shellModules: {
+          "./shells/public.tsx": async () => ({
+            Shell: ({ children }: { children: ComponentChildren }) => h("section", null, children),
+            ErrorBoundary: () => h("p", null, "shell boundary"),
+          }),
+        },
+        initialState: {
+          data: null,
+          routeId: "home",
+          url: "/",
+        },
+        root,
+        findModuleKey: (_modules, file) => file,
+      });
+
+      await window.__PRACHT_NAVIGATE__!("/posts/missing");
+
+      expect(documentNavigations).toEqual(["/posts/missing"]);
+      expect(root.textContent).not.toContain("shell boundary");
+    } finally {
+      Object.defineProperty(window, "location", {
+        configurable: true,
+        value: originalLocation,
+      });
+    }
+  });
 });
 
 describe("navigate() URL-scheme safety", () => {