fix: wrap payments ErrorBoundary in html document shell

kof · kof · commit cab02b9d3615 · 2026-03-31T13:32:10.000Z
diff --git a/apps/builder/app/routes/payments.$.tsx b/apps/builder/app/routes/payments.$.tsx
@@ -120,9 +120,17 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 export const ErrorBoundary = () => {
   const error = useRouteError();
 
-  if (isRouteErrorResponse(error)) {
-    return <div style={{ whiteSpace: "pre-wrap" }}>{error.data}</div>;
-  }
-
-  return <div>Unexpected error</div>;
+  const message = isRouteErrorResponse(error) ? error.data : "Unexpected error";
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <title>Error</title>
+      </head>
+      <body>
+        <div style={{ whiteSpace: "pre-wrap" }}>{message}</div>
+      </body>
+    </html>
+  );
 };
