Fixes App crash when left for a long time (#160)

* Load URI preview based on network state

* Handle URL preview endpoint failures

* Inline response

* Formats code

* Improve performance

* Improve code

Author: tobihans

app/components/Preview/Types/PreviewUri.tsx

@@ -2,6 +2,7 @@ import { JSONStringType } from "@jsonhero/json-infer-types/lib/@types";
 import { useEffect } from "react";
 import { useFetcher } from "remix";
 import { Body } from "~/components/Primitives/Body";
+import { useLoadWhenOnline } from "~/hooks/useLoadWhenOnline";
 import { PreviewBox } from "../PreviewBox";
 import { PreviewResult } from "./preview.types";
 import { PreviewUriElement } from "./PreviewUriElement";
@@ -13,11 +14,10 @@ export type PreviewUriProps = {
 
 export function PreviewUri(props: PreviewUriProps) {
   const previewFetcher = useFetcher<PreviewResult>();
+  const encodedUri = encodeURIComponent(props.value);
+  const load = () => previewFetcher.load(`/actions/getPreview/${encodedUri}`);
 
-  useEffect(() => {
-    const encodedUri = encodeURIComponent(props.value);
-    previewFetcher.load(`/actions/getPreview/${encodedUri}`);
-  }, [props.value]);
+  useLoadWhenOnline(load, [encodedUri]);
 
   return (
     <div>

app/hooks/useLoadWhenOnline.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from "react";
+
+export function useLoadWhenOnline(callback: () => void, deps: unknown[] = []) {
+    const callbackRef = useRef <() => void>(callback);
+
+    useEffect(() => {
+        callbackRef.current = callback;
+    });
+
+    useEffect(() => {
+        const cb = () => callbackRef.current();
+
+        if (window.navigator.onLine) {
+            cb();
+            return;
+        }
+
+        window.addEventListener("online", cb);
+
+        return () => {
+            window.removeEventListener("online", cb);
+        };
+    }, [...deps]);
+}

app/routes/actions/getPreview.$url.ts

@@ -3,29 +3,41 @@ import invariant from "tiny-invariant";
 import { getUriPreview } from "~/services/uriPreview.server";
 
 export const loader: LoaderFunction = async ({ params }) => {
-  invariant(params.url, "expected params.url");
+  try {
+    invariant(params.url, "expected params.url");
 
-  const decoded = decodeURIComponent(params.url);
+    const decoded = decodeURIComponent(params.url);
 
-  const earlyReturn = earlyRespondIfHomepagePreviewUri(decoded);
+    const earlyReturn = earlyRespondIfHomepagePreviewUri(decoded);
 
-  if (earlyReturn) {
-    return new Response(JSON.stringify(earlyReturn), {
+    if (earlyReturn) {
+      return new Response(JSON.stringify(earlyReturn), {
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+          "Cache-Control": "public, max-age=3600",
+        },
+      });
+    }
+
+    const result = await getUriPreview(decoded);
+
+    return new Response(JSON.stringify(result), {
       headers: {
         "Content-Type": "application/json; charset=utf-8",
         "Cache-Control": "public, max-age=3600",
       },
     });
+  } catch {
+    return new Response(
+      JSON.stringify({ error: "Unable to preview this URL" }),
+      {
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+          "Cache-Control": "public, max-age=3600",
+        },
+      }
+    );
   }
-
-  const result = await getUriPreview(decoded);
-
-  return new Response(JSON.stringify(result), {
-    headers: {
-      "Content-Type": "application/json; charset=utf-8",
-      "Cache-Control": "public, max-age=3600",
-    },
-  });
 };
 
 function earlyRespondIfHomepagePreviewUri(uri: string) {