better error handling in client side routing, pass response headers back from server

devxpy · devxpy · commit 81b438cf107e · 2024-08-21T02:14:03.000+05:30
diff --git a/app/app.tsx b/app/app.tsx
@@ -116,6 +116,7 @@ async function callServer({
   serverUrl.search = requestUrl.search;
 
   request.headers.delete("Host");
+  request.headers.set(gooeyGuiRouteHeader, "1");
 
   let response = await fetch(serverUrl, {
     method: request.method,
@@ -137,7 +138,7 @@ async function callServer({
     return response;
   } else {
     return json({
-      body: Buffer.from(await response.arrayBuffer()).toString("base64"),
+      base64Body: Buffer.from(await response.arrayBuffer()).toString("base64"),
       headers: Object.fromEntries(response.headers),
       status: response.status,
       statusText: response.statusText,
@@ -184,11 +185,16 @@ function App() {
   const loaderData = useLoaderData<typeof loader>();
   const actionData = useActionData<typeof action>();
   const submit = useSubmit();
-  const { children, state, channels } = actionData ?? loaderData;
+  const { base64Body, children, state, channels } = actionData ?? loaderData;
   const formRef = useRef<HTMLFormElement>(null);
   const realtimeEvent = useRealtimeChannels({ channels });
   const fetcher = useFetcher();
 
+  useEffect(() => {
+    if (!base64Body) return;
+    document.documentElement.innerHTML = atob(base64Body);
+  }, [base64Body]);
+
   useEffect(() => {
     if (realtimeEvent && fetcher.state === "idle" && formRef.current) {
       submit(formRef.current);
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -42,15 +42,19 @@ export default function handleDocumentRequestFunction(
         <RemixServer context={remixContext} url={request.url} />
       );
 
+      for (let [key, value] of loaderHeaders.entries()) {
+        responseHeaders.set(key, value);
+      }
+      responseHeaders.delete("Content-Length");
       responseHeaders.set("Content-Type", "text/html");
 
       return new Response("<!DOCTYPE html>" + markup, {
         status: responseStatusCode,
         headers: responseHeaders,
       });
     } else {
-      let { body, ...options } = loaderData;
-      let buffer = body && Buffer.from(body, "base64");
+      let { base64Body, ...options } = loaderData;
+      let buffer = base64Body && Buffer.from(base64Body, "base64");
       return new Response(buffer, options);
     }
   } catch (error) {
diff --git a/app/renderedHTML.tsx b/app/renderedHTML.tsx
@@ -52,11 +52,10 @@ function RenderLocalDt({
     }
     const localeDateString = date.toLocaleDateString(
       "en-IN",
-      renderLocalDtDateOptions,
+      renderLocalDtDateOptions
     );
     let result = localeDateString + yearToShow;
     if (renderLocalDtTimeOptions) {
-      console.log(renderLocalDtTimeOptions);
       const localTimeString = date
         .toLocaleTimeString("en-IN", renderLocalDtTimeOptions)
         .toUpperCase();
@@ -138,7 +137,7 @@ function LineClamp({
     function handleResize() {
       if (contentRef && contentRef.current) {
         setClamped(
-          contentRef.current.scrollHeight > contentRef.current.clientHeight,
+          contentRef.current.scrollHeight > contentRef.current.clientHeight
         );
       }
     }
@@ -163,12 +162,12 @@ function LineClamp({
         ...(isExpanded
           ? {}
           : {
-            display: "-webkit-box",
-            WebkitLineClamp: lines,
-            WebkitBoxOrient: "vertical",
-            overflow: "hidden",
-            position: "relative",
-          }),
+              display: "-webkit-box",
+              WebkitLineClamp: lines,
+              WebkitBoxOrient: "vertical",
+              overflow: "hidden",
+              position: "relative",
+            }),
       }}
     >
       {children}
