feat: error handling

app/api/get-share/route.ts

@@ -10,28 +10,33 @@ export async function GET(request: Request) {
     throw new Error("no id");
   }
 
-  const res = await fetch(
-    `${getBuildServerBaseUrl()}/playground/share/get/${id}`
-  );
+  try {
+    const res = await fetch(
+      `${getBuildServerBaseUrl()}/playground/share/get/${id}`
+    );
 
-  const data = await res.arrayBuffer();
+    const data = await res.arrayBuffer();
 
-  try {
     const unzipped = unzipSync(Buffer.from(data));
 
     let files: FileContent[] = [];
 
     Object.entries(unzipped).forEach(([k, v]) => {
       files.push({
         path: k,
-        contents: strFromU8(v)
-      })
-    })
+        contents: strFromU8(v),
+      });
+    });
 
-    return Response.json(files);
+    return Response.json({ files, success: true });
   } catch (err) {
     if (err instanceof Error) {
-      return Response.json({ message: err.message }, { status: 500 });
+      let error = err.message;
+
+      if (error === "invalid zip data")
+        error = "This share ID is not available.";
+
+      return Response.json({ message: error, success: false });
     }
   }
 }

app/share/[id]/_sharepagecomponent.tsx

@@ -4,23 +4,31 @@ import { useShare } from "@/data/client";
 import { db } from "@/data/db";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 
 export function SharePageComponent({ id }: { id: string }) {
-  const { data, isLoading, error } = useShare(id);
+  const { data, isLoading } = useShare(id);
   const router = useRouter();
 
   useEffect(() => {
     async function importWorkspace() {
-      if (!data) return;
+      if (!data?.files) return;
 
       const existing = await db.workspaces.get(id);
       if (existing) {
         router.push(`/workspace/${id}`);
       } else {
-        await db.workspaces.add({name: id, template: id, dll: ''});
+        await db.workspaces.add({ name: id, template: id, dll: "" });
 
         await db.files.bulkAdd(
-          data.map(({ path, contents }) => ({
+          data.files.map(({ path, contents }) => ({
             path: `/workspace/${id}/${encodeURIComponent(path)}`,
             contents,
           }))
@@ -30,10 +38,22 @@ export function SharePageComponent({ id }: { id: string }) {
     }
 
     importWorkspace();
-  }, [id, data])
-
+  }, [id, data]);
+
+  if (data?.success === false)
+    return (
+      <Dialog open onOpenChange={() => router.push("/")}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Error</DialogTitle>
+            <DialogDescription>
+              {data.message}
+            </DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    );
   if (isLoading) return <p>Loading...</p>;
-  else if (error) return <p>Error: {String(error)}</p>;
 
   return <p>Loading...</p>;
 }

app/share/[id]/page.tsx

@@ -1,9 +1,6 @@
 import { SharePageComponent } from "./_sharepagecomponent";
 
-
-
-export default function Page({ params: {id} }: { params: { id: string } }) {
-
+export default function Page({ params: { id } }: { params: { id: string } }) {
   return (
     <SharePageComponent id={id} />
   );

data/client.ts

@@ -144,11 +144,14 @@ export function useTutorialList() {
 }
 
 export function useShare(id: string) {
-  return useSWR<FileContent[]>(`get-share-${id}`, async () => {
-    const res = await fetch(`/api/get-share?id=${id}`);
+  return useSWR<{ files?: FileContent[]; message?: string; success: boolean }>(
+    `get-share-${id}`,
+    async () => {
+      const res = await fetch(`/api/get-share?id=${id}`);
 
-    const data = await res.json();
+      const data = await res.json();
 
-    return data;
-  });
+      return data;
+    }
+  );
 }