fix: show code frame on error

src/app_test.tsx

@@ -470,3 +470,19 @@ Deno.test("FreshApp - sets error on context", async () => {
   expect(thrown[0][0]).toEqual(thrown[0][1]);
   expect(thrown[1][0]).toEqual(thrown[1][1]);
 });
+
+Deno.test("FreshApp - pass stuff in ctx.render()", async () => {
+  const app = new App<{ text: string }>()
+    .get("/", (ctx) => {
+      return ctx.render(<div>ok</div>, {
+        status: 416,
+        headers: { "X-Foo": "foo" },
+      });
+    });
+
+  const server = new FakeServer(await app.handler());
+  const res = await server.get("/");
+  await res.body?.cancel();
+  expect(res.status).toEqual(416);
+  expect(res.headers.get("X-Foo")).toEqual("foo");
+});

src/dev/middlewares/error_overlay/code_frame.tsx → src/code_frame.tsx

@@ -132,3 +132,13 @@ export function getCodeFrame(stack: string, rootDir: string) {
     }
   }
 }
+
+export function getCodeFrameFromError(
+  err: unknown,
+  root: string,
+): string | undefined {
+  return (err !== null && typeof err === "object" &&
+      "stack" in err && typeof err.stack === "string")
+    ? getCodeFrame(err.stack, root)
+    : undefined;
+}

src/context.ts

@@ -149,7 +149,11 @@ export class FreshReqContext<State> implements FreshContext<unknown, State> {
       : new Headers();
 
     headers.set("Content-Type", "text/html; charset=utf-8");
-    const responseInit: ResponseInit = { status: init.status ?? 200, headers };
+    const responseInit: ResponseInit = {
+      status: init.status ?? 200,
+      headers,
+      statusText: init.statusText,
+    };
 
     let partialId = "";
     if (this.url.searchParams.has("fresh-partial")) {

src/plugins/fs_routes/mod.ts

@@ -16,6 +16,8 @@ import { type FsAdapter, fsAdapter } from "../../fs.ts";
 import type { PageProps } from "../../runtime/server/mod.tsx";
 import { HttpError } from "../../error.ts";
 import { parseRootPath } from "../../config.ts";
+import { getCodeFrameFromError } from "../../code_frame.tsx";
+import { DENO_DEPLOYMENT_ID } from "../../runtime/build_id.ts";
 
 const TEST_FILE_PATTERN = /[._]test\.(?:[tj]sx?|[mc][tj]s)$/;
 const GROUP_REG = /(^|[/\\\\])\((_[^/\\\\]+)\)[/\\\\]/;
@@ -161,6 +163,8 @@ export async function fsRoutes<State>(
   const stack: InternalRoute<State>[] = [];
   let hasApp = false;
 
+  const specialPaths = new Set<string>();
+
   for (let i = 0; i < routeModules.length; i++) {
     const routeMod = routeModules[i];
     const normalized = routeMod.path;
@@ -251,10 +255,15 @@ export async function fsRoutes<State>(
         }
         let parent = mod.path.slice(0, -"_error".length);
         parent = parent === "/" ? "*" : parent + "*";
-        app.all(
-          parent,
-          errorMiddleware(errorComponents, handler),
-        );
+
+        // Add error route as it's own route
+        if (!specialPaths.has(mod.path)) {
+          specialPaths.add(mod.path);
+          app.all(
+            parent,
+            errorMiddleware(errorComponents, handler),
+          );
+        }
         middlewares.push(errorMiddleware(errorComponents, handler));
         continue;
       }
@@ -325,6 +334,27 @@ function errorMiddleware<State>(
       return await ctx.next();
     } catch (err) {
       ctx.error = err;
+
+      if (err instanceof HttpError) {
+        if (err.status >= 500) {
+          if (DENO_DEPLOYMENT_ID === undefined) {
+            const codeFrame = getCodeFrameFromError(err, ctx.config.root);
+            if (codeFrame !== undefined) {
+              console.error(codeFrame);
+            }
+          }
+          console.error(err);
+        }
+      } else {
+        if (DENO_DEPLOYMENT_ID === undefined) {
+          const codeFrame = getCodeFrameFromError(err, ctx.config.root);
+          if (codeFrame !== undefined) {
+            console.error(codeFrame);
+          }
+        }
+        console.error(err);
+      }
+
       return mid(ctx);
     }
   };

src/plugins/fs_routes/mod_test.tsx

@@ -941,6 +941,74 @@ Deno.test("fsRoutes - async route components returning response", async () => {
   expect(text).toEqual("index");
 });
 
+Deno.test(
+  "fsRoutes - returns response code from error route",
+  async () => {
+    const server = await createServer<{ text: string }>({
+      "routes/_app.tsx": {
+        default: (ctx) => {
+          return (
+            <div>
+              _app/<ctx.Component />
+            </div>
+          );
+        },
+      },
+      "routes/_error.tsx": {
+        default: () => <div>fail</div>,
+      },
+      "routes/index.tsx": {
+        default: () => <div>index</div>,
+      },
+      "routes/bar.tsx": {
+        default: () => <div>index</div>,
+      },
+      "routes/foo/index.tsx": {
+        default: () => <div>foo/index</div>,
+      },
+      "routes/foo/_error.tsx": {
+        default: () => {
+          throw new Error("fail");
+        },
+      },
+      "routes/foo/bar.tsx": {
+        default: () => <div>foo/index</div>,
+      },
+    });
+
+    let res = await server.get("/fooa");
+    await res.body?.cancel();
+    expect(res.status).toEqual(404);
+
+    res = await server.get("/foo/asdf");
+    await res.body?.cancel();
+    expect(res.status).toEqual(500);
+  },
+);
+
+Deno.test(
+  "fsRoutes - set headers from handler",
+  async () => {
+    const server = await createServer<{ text: string }>({
+      "routes/index.tsx": {
+        handler: (ctx) => {
+          return ctx.render(<h1>hello</h1>, {
+            headers: { "X-Foo": "123" },
+            status: 418,
+            statusText: "I'm a fresh teapot",
+          });
+        },
+      },
+    });
+
+    const res = await server.get("/");
+    await res.body?.cancel();
+    expect(res.status).toEqual(418);
+    expect(res.statusText).toEqual("I'm a fresh teapot");
+    expect(res.headers.get("X-Foo")).toEqual("123");
+  },
+);
+
 Deno.test("fsRoutes - sortRoutePaths", () => {
   let routes = [
     "/foo/[id]",

src/plugins/fs_routes/render_middleware.ts

@@ -2,6 +2,7 @@ import { type AnyComponent, h, type RenderableProps, type VNode } from "preact";
 import type { MiddlewareFn } from "../../middlewares/mod.ts";
 import type { HandlerFn, PageResponse } from "../../handlers.ts";
 import type { PageProps } from "../../runtime/server/mod.tsx";
+import { HttpError } from "../../error.ts";
 
 export type AsyncAnyComponent<P> = {
   (
@@ -20,6 +21,7 @@ export function renderMiddleware<State>(
     | AsyncAnyComponent<PageProps<unknown, State>>
   >,
   handler: HandlerFn<unknown, State> | undefined,
+  init?: ResponseInit | undefined,
 ): MiddlewareFn<State> {
   return async (ctx) => {
     let result: PageResponse<unknown> | undefined;
@@ -69,6 +71,23 @@ export function renderMiddleware<State>(
       }
     }
 
-    return ctx.render(vnode!);
+    let status: number | undefined = init?.status;
+    if (
+      ctx.error !== null && ctx.error !== undefined
+    ) {
+      if (
+        ctx.error instanceof HttpError
+      ) {
+        status = ctx.error.status;
+      } else {
+        status = 500;
+      }
+    }
+
+    return ctx.render(vnode!, {
+      status,
+      statusText: init?.statusText,
+      headers: init?.headers,
+    });
   };
 }

src/runtime/server/preact_hooks.tsx

@@ -26,9 +26,7 @@ import {
 import type { BuildCache } from "../../build_cache.ts";
 import { BUILD_ID } from "../build_id.ts";
 import { DEV_ERROR_OVERLAY_URL } from "../../constants.ts";
-import {
-  getCodeFrame,
-} from "../../dev/middlewares/error_overlay/code_frame.tsx";
+import { getCodeFrame } from "../../code_frame.tsx";
 import * as colors from "@std/fmt/colors";
 import { escape as escapeHtml } from "@std/html";
 import { HttpError } from "../../error.ts";