Function ErrorCard

packages/web/src/app/error.tsx:63–120

({ message, errorCode, statusCode, onReloadButtonClicked }: ErrorCardProps)

}

function ErrorCard({ message, errorCode, statusCode, onReloadButtonClicked }: ErrorCardProps) {
    const [copied, setCopied] = useState<string | null>(null)

    const copyToClipboard = (text: string, field: string) => {
        navigator.clipboard.writeText(text)
        setCopied(field)
        setTimeout(() => setCopied(null), 2000)
    }

    return (
        <Card className="w-full max-w-md mx-auto">
            <CardHeader className="space-y-1 flex">
                <CardTitle className="text-2xl font-bold flex items-center gap-2 text-destructive">
                    <TriangleAlert className="h-5 w-5 mt-0.5" />
                    Unexpected Error
                </CardTitle>
                <CardDescription className="text-sm">
                    An unexpected error occurred. Please reload the page and try again. If the issue persists, <Link href={`mailto:${SOURCEBOT_SUPPORT_EMAIL}?subject=Sourcebot%20Error%20Report${errorCode ? `%20|%20Code:%20${errorCode}` : ''}`} className='underline'>please contact us</Link>.
                </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
                <div className="space-y-3">
                    <ErrorField
                        label="Error Message"
                        value={message}
                        onCopy={() => copyToClipboard(message, "message")}
                        copied={copied === "message"}
                    />

                    {errorCode && (
                        <ErrorField
                            label="Error Code"
                            value={errorCode}
                            onCopy={() => copyToClipboard(errorCode.toString(), "errorCode")}
                            copied={copied === "errorCode"}
                        />
                    )}

                    {statusCode && (
                        <ErrorField
                            label="Status Code"
                            value={statusCode}
                            onCopy={() => copyToClipboard(statusCode.toString(), "statusCode")}
                            copied={copied === "statusCode"}
                        />
                    )}
                </div>
                <Button
                    onClick={onReloadButtonClicked}
                    variant='outline'
                    className='w-full'
                >
                    Reload Page
                </Button>
            </CardContent>
        </Card>
    )
}