@uniflowed/router 0.1.0 → 0.3.0

package/internal/action-endpoint.js

@@ -55,16 +55,46 @@
 // header for what is excluded and why.
 //
 // A submitted form is inside that boundary and does not widen it: `<form
-// action={fn}>` reaches here as the same `application/json` body, with the
-// form's entries beside the values under a `form` key, bounded in count and in
-// field-name length and holding strings only. Nothing about it is multipart
-// and nothing about it is a content type a cross-origin `<form>` could
-// produce, so rule 4 is exactly as true of a form call as of any other. The
-// cost of keeping it that way is written down where it is paid — a form that
-// submits before its page has hydrated throws in the page rather than posting
-// anywhere, because React writes `action="javascript:throw …"` for a form
-// whose action carries no `$$FORM_ACTION`, and giving it one would mean
-// accepting a native form post here.
+// action={fn}>` on a hydrated page reaches here as the same `application/json`
+// body, with the form's entries beside the values under a `form` key, bounded
+// in count and in field-name length and holding strings only. Nothing about it
+// is multipart and nothing about it is a content type a cross-origin `<form>`
+// could produce, so rule 4 is exactly as true of a form call as of any other.
+//
+// # The second door: a form posted before the page hydrated
+//
+// React's progressive enhancement is a *native* form post, and a native post is
+// the one request rule 4 was written to keep out. So it is not let in through
+// that door. It has its own, narrower than the first, and it is worth being
+// exact about what it keeps of the six rules above:
+//
+// - **Rules 1, 2, 3, 5 and 6 hold unchanged.** The id selects a row and is
+//   compared the same way; a failed lookup is the same `404`; the bound
+//   arguments and the form cross through `decodeActionArguments`, so the
+//   grammar, the counts, the depth and the field limits are the JSON call's
+//   own; a throw is the same fixed `500`.
+// - **Rule 4 keeps one of its three guards.** A native post is a simple
+//   request, so there is no custom header and no JSON content type to lean on.
+//   What is left is `Origin`, which every browser sends on a `POST` and which
+//   must equal `Host` exactly as before — and `Sec-Fetch-Site`, which must say
+//   `same-origin` when the browser sends it. A cross-site form, a sandboxed
+//   frame (`Origin: null`) and a request with no `Origin` are `403`s.
+// - **It accepts one content type**, `application/x-www-form-urlencoded`, which
+//   is what `$$FORM_ACTION` asks React to write. Not multipart: a file cannot
+//   cross to an action, and a multipart parser is surface uf does not open.
+// - **It is recognised by its fields, read from a copy of the body.** A post
+//   that carries no `$uf_ref_` field is somebody else's — an ordinary form to a
+//   route handler — and is declined with `null` and its body untouched. So is
+//   one larger than an action accepts or not UTF-8, because it cannot be known
+//   to be an action post without reading it; it goes on to the route handlers,
+//   and a page answers a `POST` with a `404`.
+//
+// The answer is a document rather than JSON, because a person is looking at it:
+// a `303` back to the page for a plain form action, the page rendered again
+// with the action's result as the submitting `useActionState`'s state (the
+// host supplies that render as `postback`), or a `303` to wherever
+// `redirect()` pointed. See `./form-action.js` for the fields and
+// ubugeeei-prod/uf#1358.
 //
 // **6. Nothing about a failure goes back.** An action that throws is a `500`
 // with a fixed body; the exception goes to the host's error reporting. A
@@ -95,6 +125,7 @@ import { asResponder, nativeActionAllowed } from "@uniflowed/server/host";
 import {
   ACTION_CONTENT_TYPE,
   ACTION_HEADER,
+  ACTION_OUTCOME_HEADER,
   type ActionArgument,
   ActionValueError,
   MAX_ACTION_BODY_BYTES,
@@ -102,7 +133,30 @@ import {
   encodeActionResult,
   isActionId,
 } from "./action-wire.js";
+import { addressOf } from "./base-path.js";
+import {
+  FORM_ACTION_CONTENT_TYPE,
+  type FormPost,
+  type FormState,
+  readFormPost,
+} from "./form-action.js";
 import { requireRequest } from "./request.js";
+import { ForbiddenError, NotFoundError, RedirectError, UnauthorizedError } from "./routing.js";
+
+export type { FormState } from "./form-action.js";
+
+/**
+ * What a host gives the dispatcher beyond the request.
+ *
+ * `postback` renders the page the request is for, with a `useActionState`'s
+ * result as React's `formState`, and is how a form posted before hydration
+ * gets the page back with its answer in it. A host that supplies none still
+ * serves native posts: the answer is a `303` back to the page, which runs the
+ * action and loses only the state.
+ */
+export type ActionDispatchOptions = {|
+  readonly postback?: (formState: FormState) => Promise<Response>,
+|};
 
 /** A module holding server actions, as the generated table loads it. */
 export type ActionModule = { readonly [name: string]: mixed };
@@ -146,10 +200,13 @@ const ANSWER_HEADERS: { readonly [string]: string } = {
  */
 export function createActionDispatcher(options: {|
   readonly actions: $ReadOnlyArray<ActionRecord>,
-|}): (request: Request) => Promise<Response | null> {
+|}): (request: Request, settings?: ActionDispatchOptions) => Promise<Response | null> {
   const table = options.actions;
 
-  return async function callAction(request: Request): Promise<Response | null> {
+  return async function callAction(
+    request: Request,
+    settings?: ActionDispatchOptions,
+  ): Promise<Response | null> {
     // The host's half of the contract, checked rather than assumed, exactly as
     // `dispatch` and `runMiddleware` check it: an action that calls `cookies()`
     // has to answer about the request it is inside.
@@ -157,7 +214,9 @@ export function createActionDispatcher(options: {|
 
     const id = request.headers.get(ACTION_HEADER);
     if (id == null) {
-      return null;
+      // Not a JSON call. It may still be a form posted before its page
+      // hydrated, which is the second door in the header.
+      return nativeFormPost(table, request, settings?.postback);
     }
 
     // Cheapest and most protective first, and all of it before a byte of the
@@ -236,6 +295,13 @@ export function createActionDispatcher(options: {|
         const call = action as $FlowFixMe;
         result = await traceRequestPhase("action", () => call(...args));
       } catch (error) {
+        // `redirect()` and its three siblings are where the visitor goes next,
+        // not something that went wrong: answered as themselves, and never
+        // reported. See `ACTION_OUTCOME_HEADER`.
+        const outcome = routingOutcome(error);
+        if (outcome != null) {
+          return outcome;
+        }
         report(record, error);
         return refusal(500);
       }
@@ -256,6 +322,243 @@ export function createActionDispatcher(options: {|
   };
 }
 
+/**
+ * Answer a form the browser posted natively, or decline with `null`.
+ *
+ * The header's second door. Declines everything that is not a urlencoded
+ * `POST` carrying a `$uf_ref_` field, and answers everything that is,
+ * refusals included — the same promise the JSON door makes, for the same
+ * reason.
+ */
+async function nativeFormPost(
+  table: $ReadOnlyArray<ActionRecord>,
+  request: Request,
+  postback: ?(formState: FormState) => Promise<Response>,
+): Promise<Response | null> {
+  if (request.method.toUpperCase() !== "POST") {
+    return null;
+  }
+  if (!isMedia(request.headers.get("content-type"), FORM_ACTION_CONTENT_TYPE)) {
+    return null;
+  }
+  // A copy, so that a form which turns out not to be an action post reaches the
+  // route handler with its body unread.
+  const text = await readBoundedText(request.clone(), MAX_ACTION_BODY_BYTES);
+  if (text == null) {
+    return null;
+  }
+  const post = readFormPost(new URLSearchParams(text));
+  if (post == null) {
+    return null;
+  }
+
+  // An action post from here on, and every outcome is an answer.
+  if (!sameOrigin(request) || !sameSiteFetch(request)) {
+    return refusal(403);
+  }
+
+  let args: Array<ActionArgument>;
+  let bound: number;
+  try {
+    ({ args, bound } = formArguments(post));
+  } catch (error) {
+    if (!(error instanceof ActionValueError)) {
+      throw error;
+    }
+    return refusal(400);
+  }
+
+  const id = post.id;
+  const record = id != null && isActionId(id) ? select(table, id) : null;
+  if (record == null) {
+    return refusal(404);
+  }
+
+  let action: mixed;
+  try {
+    const module = await record.load();
+    action = module[record.export];
+  } catch (error) {
+    report(record, error);
+    return refusal(500);
+  }
+  if (typeof action !== "function") {
+    report(record, new Error(`export \`${record.export}\` is not a function`));
+    return refusal(500);
+  }
+
+  const url = new URL(request.url);
+  const stateKey = post.stateKey;
+  return asResponder("a server action", async () => {
+    let result: mixed;
+    try {
+      const call = action as $FlowFixMe;
+      result = await traceRequestPhase("action", () => call(...args));
+    } catch (error) {
+      if (error instanceof RedirectError) {
+        return seeOther(addressOf(error.to));
+      }
+      // A person is looking at this answer and there is no page to render the
+      // boundary into, so it is the status with a fixed line of text — the same
+      // three statuses the JSON door answers, and nothing of the exception.
+      const status = routingStatus(error);
+      if (status != null) {
+        return new Response(`${status.text}\n`, {
+          status: status.code,
+          headers: { "content-type": "text/plain; charset=utf-8", "cache-control": "no-store" },
+        });
+      }
+      report(record, error);
+      return refusal(500);
+    }
+    if (stateKey == null || postback == null) {
+      // Post/redirect/get: the page again, by a `GET`, so a reload does not
+      // submit the form a second time.
+      return seeOther(addressOf(withOneLeadingSlash(url.pathname) + url.search));
+    }
+    try {
+      // Held to the grammar for the reason the JSON door holds a result to it:
+      // this value is written into a document a browser parses.
+      encodeActionResult(result);
+    } catch (error) {
+      report(record, error);
+      return refusal(500);
+    }
+    // `bound - 1`: `useActionState` bound the previous state itself, and
+    // React compares the count of the bindings the *action* had.
+    return postback([result, stateKey, record.id, bound - 1]);
+  });
+}
+
+/**
+ * The arguments a native post calls its action with: the bound ones, then
+ * the form.
+ *
+ * Built into the JSON call's own envelope and decoded by the JSON call's own
+ * decoder, so there is one grammar and one set of limits, not a second one for
+ * forms that could drift from the first.
+ */
+function formArguments(post: FormPost): {|
+  readonly args: Array<ActionArgument>,
+  readonly bound: number,
+|} {
+  let bound: Array<ActionArgument> = [];
+  if (post.bound != null) {
+    bound = decodeActionArguments(post.bound);
+    if (bound.some((value) => value instanceof FormData)) {
+      throw new ActionValueError("the bound arguments", "carry a form");
+    }
+  }
+  const envelope = JSON.stringify({
+    args: [...bound, null],
+    form: { at: bound.length, entries: post.entries },
+  });
+  return { args: decodeActionArguments(envelope), bound: bound.length };
+}
+
+/**
+ * Whether the browser says the request came from this origin, when it says.
+ *
+ * `Sec-Fetch-Site` is a forbidden header name, so a page cannot set it; a
+ * browser that sends it and says anything but `same-origin` is describing a
+ * cross-site form. Absent is not a refusal on its own — older browsers do not
+ * send it, and `Origin` has already been required.
+ */
+function sameSiteFetch(request: Request): boolean {
+  const site = request.headers.get("sec-fetch-site");
+  return site == null || site === "same-origin";
+}
+
+/** The kind, status and text of a routing error other than a redirect. */
+type RoutingStatus = {|
+  readonly kind: "not-found" | "unauthorized" | "forbidden",
+  readonly code: 404 | 401 | 403,
+  readonly text: string,
+|};
+
+/**
+ * What `notFound()`, `unauthorized()` or `forbidden()` answers with, or `null`
+ * for anything else.
+ *
+ * The statuses are the ones a page gets for the same call (`routeErrorStatus`
+ * and the not-found page), so a client that reads only the status reads the
+ * same thing a document request would have told it.
+ */
+function routingStatus(error: mixed): RoutingStatus | null {
+  if (error instanceof NotFoundError) {
+    return { kind: "not-found", code: 404, text: "not found" };
+  }
+  if (error instanceof UnauthorizedError) {
+    return { kind: "unauthorized", code: 401, text: "unauthorized" };
+  }
+  if (error instanceof ForbiddenError) {
+    return { kind: "forbidden", code: 403, text: "forbidden" };
+  }
+  return null;
+}
+
+/**
+ * The JSON door's answer for a routing error, or `null` for any other throw.
+ *
+ * A redirect is a `204` carrying `Location`, the address `addressOf` makes of
+ * it (under the base path for a path on this application). It is not a `3xx`,
+ * because `fetch` would follow that itself and fetch the page's HTML for
+ * nothing, and the reference could not read where it pointed. The other three
+ * are their page statuses. Each one carries `ACTION_OUTCOME_HEADER`, so a `404`
+ * from `notFound()` is not mistaken for the `404` of an unknown id. The body
+ * names the kind and nothing else.
+ */
+function routingOutcome(error: mixed): Response | null {
+  if (error instanceof RedirectError) {
+    const headers: { [string]: string } = {
+      "cache-control": "no-store",
+      location: addressOf(error.to),
+    };
+    headers[ACTION_OUTCOME_HEADER] = "redirect";
+    return new Response(null, { status: 204, headers });
+  }
+  const status = routingStatus(error);
+  if (status == null) {
+    return null;
+  }
+  const headers: { [string]: string } = { ...ANSWER_HEADERS };
+  headers[ACTION_OUTCOME_HEADER] = status.kind;
+  return new Response(JSON.stringify({ outcome: status.kind }), {
+    status: status.code,
+    headers,
+  });
+}
+
+/**
+ * `path` with a leading run of `/` counted down to one.
+ *
+ * The post/redirect/get above answers with the path the form was posted to,
+ * and that path is the request's: `https://app.example//evil.example/notes` is
+ * a link anybody can write, its page posts its forms back to the same address,
+ * and a URL parser reads `/\evil.example` as the same two slashes. Written
+ * into `Location` as it stands, `//evil.example/notes` is a network-path
+ * reference and the browser follows it to another host — after the person
+ * submitted a form on this one. `@uniflowed/server` makes the same repair to
+ * the trailing-slash redirect (`withOneLeadingSlash` in its `routing.js`); the
+ * router cannot import it, so it is spelled here as a counted loop, never a
+ * pattern (`docs/security.md`, rule 5).
+ */
+function withOneLeadingSlash(path: string): string {
+  let start = 0;
+  while (start + 1 < path.length && path.charCodeAt(start + 1) === 47) {
+    start += 1;
+  }
+  return path.charCodeAt(0) === 47 ? path.slice(start) : path;
+}
+
+/** A `303 See Other`, which a browser follows with a `GET`. */
+function seeOther(location: string): Response {
+  return new Response(null, {
+    status: 303,
+    headers: { location, "cache-control": "no-store" },
+  });
+}
+
 /**
  * The row with this id, or `null`, without saying which by taking longer.
  *
@@ -331,12 +634,17 @@ function sameOrigin(request: Request): boolean {
  * can.
  */
 function isJson(declared: string | null): boolean {
+  return isMedia(declared, ACTION_CONTENT_TYPE);
+}
+
+/** Whether `declared` is exactly the media type `expected`, parameters aside. */
+function isMedia(declared: string | null, expected: string): boolean {
   if (declared == null) {
     return false;
   }
   const semicolon = declared.indexOf(";");
   const media = (semicolon === -1 ? declared : declared.slice(0, semicolon)).trim().toLowerCase();
-  return media === ACTION_CONTENT_TYPE;
+  return media === expected;
 }
 
 /**

package/internal/action-wire.js

@@ -93,6 +93,24 @@
 // Pure: no imports, no platform APIs beyond `JSON`, so the browser half of
 // `@uniflowed/router` can reach it without reaching anything server-only.
 
+/**
+ * The response header that says a server action ended in a routing outcome
+ * rather than a result: `redirect`, `not-found`, `unauthorized` or
+ * `forbidden`.
+ *
+ * `redirect()`, `notFound()`, `unauthorized()` and `forbidden()` are how a
+ * page's code says where the visitor goes next, and an action is page code:
+ * `redirect("/notes")` at the end of a mutation is the common way to finish
+ * one. They are control flow, not failures, so the endpoint does not report
+ * them or answer `500`. It answers with this header, the matching status and,
+ * for a redirect, `Location`. The reference in the browser reads the header
+ * and navigates or throws the same error for the route's boundary. Only the
+ * kind crosses, plus the address for a redirect. The exception's message and
+ * stack never do, which is the fixed-`500` rule applied to the one failure
+ * that is not a failure.
+ */
+export const ACTION_OUTCOME_HEADER: string = "uf-action-outcome";
+
 /** The request header carrying the action id. */
 export const ACTION_HEADER: string = "uf-action";
 
@@ -248,6 +266,21 @@ function asFormData(value: mixed): FormData | null {
 /** One entry of the explicit walk stack. */
 type Pending = {| readonly value: mixed, readonly path: string, readonly depth: number |};
 
+/**
+ * How many more values a walk may visit before `MAX_ACTION_VALUES` is spent.
+ *
+ * An object rather than a number so that one budget can be handed to the walk
+ * of every argument of a call: the ceiling `docs/security.md` states is on the
+ * *call* — "at most 10,000 values in total" — and a budget per argument would
+ * be `MAX_ACTION_ARGUMENTS` times that.
+ */
+export type ValueBudget = { remaining: number };
+
+/** A fresh budget of `MAX_ACTION_VALUES`, for one call or one result. */
+export function valueBudget(): ValueBudget {
+  return { remaining: MAX_ACTION_VALUES };
+}
+
 /**
  * Refuse a value that cannot cross the wire, naming where it was.
  *
@@ -257,11 +290,27 @@ type Pending = {| readonly value: mixed, readonly path: string, readonly depth:
  * hand on the depth. Every bound is checked as the walk runs rather than
  * afterwards, so a payload that busts one is refused before the rest of it is
  * visited.
+ *
+ * That includes the count, which is checked *before* an array's or an
+ * object's members are queued rather than as each is visited. One array of
+ * half a million zeros fits in a 1 MiB body, and queueing every element — each
+ * with a path string of its own — before the counter reached any of them
+ * spent tens of megabytes of heap on a payload that was always going to be
+ * refused.
+ *
+ * `budget` is spent by this walk and may be shared: `decodeActionArguments`
+ * and `encodeActionArguments` hand every argument the same one, so the ceiling
+ * is on the call. Without one, the value has a budget of its own.
  */
-export function checkActionValue(root: mixed, label: string): void {
+export function checkActionValue(
+  root: mixed,
+  label: string,
+  budget?: ValueBudget = valueBudget(),
+): void {
   const stack: Array<Pending> = [{ value: root, path: label, depth: 0 }];
   const seen = new Set<mixed>();
-  let remaining = MAX_ACTION_VALUES;
+  const overBudget = () =>
+    new ActionValueError(label, `holds more than ${String(MAX_ACTION_VALUES)} values`);
 
   while (stack.length > 0) {
     const pending = stack.pop();
@@ -270,9 +319,9 @@ export function checkActionValue(root: mixed, label: string): void {
     }
     const { value, path, depth } = pending;
 
-    remaining -= 1;
-    if (remaining < 0) {
-      throw new ActionValueError(label, `holds more than ${String(MAX_ACTION_VALUES)} values`);
+    budget.remaining -= 1;
+    if (budget.remaining < 0) {
+      throw overBudget();
     }
     if (depth > MAX_ACTION_DEPTH) {
       throw new ActionValueError(path, `is nested deeper than ${String(MAX_ACTION_DEPTH)}`);
@@ -309,6 +358,11 @@ export function checkActionValue(root: mixed, label: string): void {
 
     if (Array.isArray(object)) {
       const items: $ReadOnlyArray<mixed> = object as $FlowFixMe;
+      // Every queued value will be visited and spent, so a queue longer than
+      // what is left is a refusal now rather than after the push.
+      if (stack.length + items.length > budget.remaining) {
+        throw overBudget();
+      }
       for (let index = 0; index < items.length; index += 1) {
         stack.push({ value: items[index], path: `${path}[${String(index)}]`, depth: depth + 1 });
       }
@@ -342,7 +396,11 @@ export function checkActionValue(root: mixed, label: string): void {
     }
 
     const record: { readonly [string]: mixed } = object as $FlowFixMe;
-    for (const key of Object.getOwnPropertyNames(object)) {
+    const keys = Object.getOwnPropertyNames(object);
+    if (stack.length + keys.length > budget.remaining) {
+      throw overBudget();
+    }
+    for (const key of keys) {
       if (FORBIDDEN_KEYS.includes(key)) {
         throw new ActionValueError(`${path}.${key}`, "is a key this grammar never carries");
       }
@@ -407,6 +465,8 @@ export function encodeActionArguments(args: $ReadOnlyArray<mixed>): string {
     );
   }
   const values: Array<mixed> = [];
+  // One budget for the whole call; see `ValueBudget`.
+  const budget = valueBudget();
   let form: {| readonly at: number, readonly entries: Array<Array<string>> |} | null = null;
   for (let index = 0; index < args.length; index += 1) {
     const argument = args[index];
@@ -420,7 +480,7 @@ export function encodeActionArguments(args: $ReadOnlyArray<mixed>): string {
       values.push(null);
       continue;
     }
-    checkActionValue(argument, label);
+    checkActionValue(argument, label, budget);
     values.push(argument);
   }
   return form == null ? JSON.stringify({ args: values }) : JSON.stringify({ args: values, form });
@@ -460,8 +520,10 @@ export function decodeActionArguments(text: string): Array<ActionArgument> {
       `passes more than ${String(MAX_ACTION_ARGUMENTS)} arguments`,
     );
   }
+  // One budget for the whole call; see `ValueBudget`.
+  const budget = valueBudget();
   for (let index = 0; index < args.length; index += 1) {
-    checkActionValue(args[index], `argument ${String(index + 1)}`);
+    checkActionValue(args[index], `argument ${String(index + 1)}`, budget);
   }
   const decoded: Array<ActionArgument> = args as $FlowFixMe;
   if (keys.length === 2) {

package/internal/compose.js

@@ -58,7 +58,7 @@ export type ComposeOptions = {|
 |};
 
 /** The route a slot renders inside, as much of it as a slot reads. */
-type SlotRoute = { +pathname: string, +searchParams: SearchParams, ... };
+type SlotRoute = { readonly pathname: string, readonly searchParams: SearchParams, ... };
 
 /**
  * Whether this bundle marks the boundaries it renders.
@@ -356,11 +356,11 @@ export function slotsAt(
   slots: $ReadOnlyArray<ResolvedSlot>,
   depth: number,
   route: SlotRoute,
-): { readonly [string]: React.Node } {
+): SlotProps {
   if (slots.length === 0) {
     return EMPTY_SLOTS;
   }
-  const props: { [string]: React.Node } = {};
+  const props: { key?: empty, [string]: React.Node } = {};
   for (const slot of slots) {
     if (slot.above === depth) {
       // `null` rather than an element that renders nothing, and the difference
@@ -376,8 +376,18 @@ export function slotsAt(
   return props;
 }
 
+/**
+ * A layout's slots, as the props they are spread into.
+ *
+ * `key` is named out of the indexer, the way `@uniflowed/ui`'s `Rest` names it:
+ * the object is spread onto an element, and a `React.Node` is not a key. No
+ * slot is called `key` — a slot is a prop the layout declares, and React
+ * never hands a component its key.
+ */
+export type SlotProps = { readonly key?: empty, readonly [string]: React.Node };
+
 /** One object for every layout on a project that declares no slot. */
-const EMPTY_SLOTS: { readonly [string]: React.Node } = Object.freeze({});
+const EMPTY_SLOTS: SlotProps = Object.freeze({});
 
 /**
  * One slot's tree: its page, inside the layouts declared under the slot, with

package/internal/deployment.js

@@ -52,8 +52,9 @@ let remembered: string | null | void;
 
 /** The parts of a `Document` read here. */
 type HeadLike = interface {
-  readonly querySelector: (selector: string) => ?interface {
-    readonly getAttribute: (name: string) => ?string,
+  // Methods, as a `Document`'s are: a method cannot be read off as a property.
+  querySelector(selector: string): ?interface {
+    getAttribute(name: string): ?string,
   },
 };
 

package/internal/devtools.js

@@ -92,7 +92,7 @@ export function devtoolsProblem(win: HookWindow): {|
   // handed back. Anything else there is a hook uf did not install and DevTools
   // did not either, and guessing at its shape would report a problem that is
   // really this module not recognising one.
-  const renderers = (hook: $FlowFixMe).renderers;
+  const renderers = (hook as $FlowFixMe).renderers;
   const count = renderers instanceof Map ? renderers.size : null;
   if (count != null && count > 1) {
     return {

package/internal/error-view.js

@@ -34,7 +34,7 @@ component DefaultRouteError(error: RouteError, reset: () => void) {
   const detail = match (error) {
     {kind: "unauthorized"} => "This page needs you to be signed in.",
     {kind: "forbidden"} => "You do not have access to this page.",
-    {kind: "thrown"} => "This page could not be rendered.",
+    {kind: "thrown", ...} => "This page could not be rendered.",
   };
   return (
     <main>