error handling

src/app.tsx

@@ -1,31 +1,47 @@
 import { useEffect, useState } from "react";
-import { useAtomValue } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 
 import Compress from "./components/compress";
+import Error from "./components/error";
 import Footer from "./components/footer";
 import Header from "./components/header";
 import Loading from "./components/loading";
 import Save from "./components/save";
 import Upload from "./components/upload";
-import { compressedFileAtom, ffmpegAtom, originalFileAtom } from "./lib/atoms";
+import {
+  compressedFileAtom,
+  errorAtom,
+  ffmpegAtom,
+  originalFileAtom,
+} from "./lib/atoms";
 
 export default function App() {
   const ffmpeg = useAtomValue(ffmpegAtom);
+  const [error, setError] = useAtom(errorAtom);
 
   const originalFile = useAtomValue(originalFileAtom);
   const compressedFile = useAtomValue(compressedFileAtom);
 
   const [loaded, setLoaded] = useState(false);
 
   useEffect(() => {
-    ffmpeg.load().then(() => setLoaded(true));
+    ffmpeg
+      .load()
+      .then(() => setLoaded(true))
+      .catch((error) => {
+        setError(error);
+        setError(true);
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ffmpeg]);
 
   return (
     <>
       <Header />
       <main className="container flex h-screen flex-col items-center justify-center">
-        {!loaded ? (
+        {error ? (
+          <Error />
+        ) : !loaded ? (
           <Loading />
         ) : originalFile && compressedFile ? (
           <Save originalFile={originalFile} compressedFile={compressedFile} />

src/components/compress.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { fetchFile } from "@ffmpeg/ffmpeg";
 import { useAtomValue, useSetAtom } from "jotai";
 
-import { compressedFileAtom, ffmpegAtom } from "~/lib/atoms";
+import { compressedFileAtom, errorAtom, ffmpegAtom } from "~/lib/atoms";
 import { createPreview } from "~/lib/create-preview";
 import { Progress } from "./ui/progress";
 import { Spinner } from "./ui/spinner";
@@ -14,6 +14,7 @@ interface CompressProps {
 export default function Compress({ file }: CompressProps) {
   const ffmpeg = useAtomValue(ffmpegAtom);
   const setCompressedFile = useSetAtom(compressedFileAtom);
+  const setError = useSetAtom(errorAtom);
 
   const [progress, setProgress] = useState<number | null>(null);
   const [preview, setPreview] = useState("");
@@ -48,7 +49,10 @@ export default function Compress({ file }: CompressProps) {
       setCompressedFile(blob);
     }
 
-    run();
+    run().catch((error) => {
+      console.error(error);
+      setError(true);
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

src/components/error.tsx

@@ -0,0 +1,22 @@
+import { CircleX, RotateCw } from "lucide-react";
+
+import { Button } from "./ui/button";
+
+export default function Error() {
+  return (
+    <div className="flex w-full flex-col items-center space-y-2 text-center">
+      <CircleX size={64} />
+      <p className="!mt-3">An unexpected error occurred.</p>
+      <p className="text-sm text-muted-foreground">
+        An unhanded error occurred while the app was running. Reload the page to
+        try again.
+      </p>
+      <div className="!mt-3 flex justify-center">
+        <Button className="gap-2" onClick={() => location.reload()}>
+          <span>Reload</span>
+          <RotateCw size={16} />
+        </Button>
+      </div>
+    </div>
+  );
+}

src/lib/atoms.ts

@@ -9,3 +9,5 @@ export const ffmpegAtom = atom(() =>
 
 export const originalFileAtom = atom<File | null>(null);
 export const compressedFileAtom = atom<Blob | null>(null);
+
+export const errorAtom = atom(false);