Generated by Spark: Fix all reported errors.

This commit is contained in:
2026-01-17 15:50:43 +00:00
committed by GitHub
parent 57cc3b4251
commit b70b91dece

View File

@@ -1,113 +1,110 @@
import { useState } from "react";
import { Alert, AlertTitle, AlertDescription } from "./components/ui/alert";
import { Button } from "./components/ui/button";
import { AIErrorHelper } from "./components/AIErrorHelper";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/ui/collapsible";
import { AlertTriangleIcon, RefreshCwIcon, ChevronDownIcon, ChevronUpIcon, CopyIcon, CheckIcon } from "lucide-react";
if (import.meta.env.DEV) throw error;
const [isStackOpen, setIsStackOpen] =
const errorDetails = `Error: ${error.message}\n\nSta
setCopied(true);
return (
<div className="w-full max-w-3xl">
navigator.clipboard.writeText(errorDetails);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
return (
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<div className="w-full max-w-3xl">
<Alert variant="destructive" className="mb-6">
<AlertTriangleIcon />
<AlertTitle>This spark has encountered a runtime error</AlertTitle>
<AlertDescription>
Something unexpected happened while running the application. The error details are shown below. Contact the spark author and let them know about this issue.
</AlertDescription>
</Alert>
{copied ? (
<CheckIcon className="h-3.5 w-3.5" />
</>
<>
Copy All
)}
</div>
{error.message}
<Collapsible
<B
size="sm"
>
<ChevronUpIcon className="h-4 w-4"
<Chevr
</B
<C
{er
</
)}
<div c
</pre>
)}
<div className="flex flex-col gap-
onClick={resetErrorBou
variant="outline
<RefreshCwIcon />
</Butto
</div>
);
import { useState } from "react";
import { Alert, AlertTitle, AlertDescription } from "./components/ui/alert";
import { Button } from "./components/ui/button";
import { AIErrorHelper } from "./components/AIErrorHelper";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/ui/collapsible";
import { AlertTriangleIcon, RefreshCwIcon, ChevronDownIcon, ChevronUpIcon, CopyIcon, CheckIcon } from "lucide-react";
interface ErrorFallbackProps {
error: Error;
resetErrorBoundary: () => void;
}
export function ErrorFallback({ error, resetErrorBoundary }: ErrorFallbackProps) {
if (import.meta.env.DEV) throw error;
const [isStackOpen, setIsStackOpen] = useState(false);
const [copied, setCopied] = useState(false);
const errorDetails = `Error: ${error.message}\n\nStack Trace:\n${error.stack || 'No stack trace available'}`;
const handleCopy = () => {
navigator.clipboard.writeText(errorDetails);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
return (
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<div className="w-full max-w-3xl">
<Alert variant="destructive" className="mb-6">
<AlertTriangleIcon />
<AlertTitle>This spark has encountered a runtime error</AlertTitle>
<AlertDescription>
Something unexpected happened while running the application. The error details are shown below. Contact the spark author and let them know about this issue.
</AlertDescription>
</Alert>
<div className="bg-card rounded-lg border border-border p-6 mb-6">
<div className="flex items-start justify-between mb-4">
<h3 className="text-lg font-semibold text-destructive">Error Message</h3>
<Button
variant="outline"
size="sm"
onClick={handleCopy}
className="gap-2"
>
{copied ? (
<>
<CheckIcon className="h-3.5 w-3.5" />
Copied
</>
) : (
<>
<CopyIcon className="h-3.5 w-3.5" />
Copy All
</>
)}
</Button>
</div>
<p className="text-sm text-foreground mb-4 font-mono bg-muted p-3 rounded">
{error.message}
</p>
<Collapsible open={isStackOpen} onOpenChange={setIsStackOpen}>
<CollapsibleTrigger asChild>
<Button
variant="ghost"
size="sm"
className="gap-2 w-full justify-start"
>
{isStackOpen ? (
<>
<ChevronUpIcon className="h-4 w-4" />
Hide Stack Trace
</>
) : (
<>
<ChevronDownIcon className="h-4 w-4" />
Show Stack Trace
</>
)}
</Button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="mt-4">
<pre className="text-xs bg-muted p-4 rounded overflow-x-auto font-mono">
{error.stack || 'No stack trace available'}
</pre>
</div>
</CollapsibleContent>
</Collapsible>
</div>
<div className="flex flex-col gap-4">
<AIErrorHelper error={error} />
<Button
onClick={resetErrorBoundary}
variant="outline"
className="gap-2"
>
<RefreshCwIcon className="h-4 w-4" />
Try Again
</Button>
</div>
</div>
</div>
);
}