improve-image-error-handling-and-error-page-buttons

Author: Bilalm354

app/error.tsx

@@ -9,6 +9,7 @@ import {
 } from "@/components/ui/card";
 import { track } from "@vercel/analytics";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 
 export default function ErrorPage({
     error,
@@ -19,6 +20,7 @@ export default function ErrorPage({
 }) {
     console.error({ error });
     track("Error page");
+    const router = useRouter();
 
     return (
         <Card>
@@ -36,6 +38,9 @@ export default function ErrorPage({
                 <Button className="w-full" onClick={() => reset()}>
                     Try again
                 </Button>
+                <Button className="w-full" onClick={() => router.back()}>
+                    Go back
+                </Button>
                 <Link href="/support" className="w-full">
                     <Button variant={"secondary"} className="w-full">
                         Tell us what happened

app/image/[prompt]/page.tsx

@@ -43,7 +43,7 @@ export default async function GenerateImagePage(params: {
         decodedPrompt,
     });
 
-    let generatedImageUrl: string;
+    let generatedImageUrl: string | undefined;
 
     if (isTestPrompt) {
         console.log(

lib/images/openai.ts

@@ -32,7 +32,11 @@ export const generateOpenAiImageUrl = async ({
         style: "vivid",
     });
 
-    const url = response.data[0].url!;
+    const url = response.data[0].url;
+    if (!url) {
+        console.error("No url");
+        throw new Error("No url");
+    }
     console.log("Generated image:", { url });
 
     return url;