jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

🎨 style(CrashErrorComponent/index.tsx): refactor CrashErrorComponent to use UI components for improved readability and maintainability

Browse source 
🐛 fix(CrashErrorComponent/index.tsx): fix typo in error message for better user understanding
✨ feat(CrashErrorComponent/index.tsx): add restart button to reset the app and provide a link to report errors on GitHub for community support
This commit is contained in:
cristhianzl 2024-02-28 16:35:00 -03:00
commit 34d83d82b5
1 changed files with 46 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

103
src/frontend/src/components/CrashErrorComponent/index.tsx
View file

@ -1,4 +1,7 @@
import { XCircle } from "lucide-react";
import { crashComponentPropsType } from "../../types/components"; import { crashComponentPropsType } from "../../types/components";
import { Button } from "../ui/button";
import { Card, CardContent, CardFooter, CardHeader } from "../ui/card";
export default function CrashErrorComponent({ export default function CrashErrorComponent({
error, error,
@ -8,66 +11,52 @@ export default function CrashErrorComponent({
<div className="z-50 flex h-screen w-screen items-center justify-center bg-foreground bg-opacity-50"> <div className="z-50 flex h-screen w-screen items-center justify-center bg-foreground bg-opacity-50">
<div className="flex h-screen w-screen flex-col bg-background text-start shadow-lg"> <div className="flex h-screen w-screen flex-col bg-background text-start shadow-lg">
<div className="m-auto grid w-1/2 justify-center gap-5 text-center"> <div className="m-auto grid w-1/2 justify-center gap-5 text-center">
<div> <Card className="p-8">
<h1 className="text-3xl text-status-red"> <CardHeader>
🚀 Whoops! We've Hit a Snag. <div className="m-auto">
</h1> <XCircle strokeWidth={1.5} className="h-16 w-16" />
<small> </div>
Hey there, it looks like we've encountered a bit of a hiccup. <div>
</small> <p className="mb-4 text-xl text-foreground">
</div> Sorry, we found an unexpectable error!
<div> </p>
<p className="mb-4 text-xl text-foreground"> </div>
But don't worry, it happens to the best of us! We're all about </CardHeader>
making things better together.
</p>
</div>
<div> <CardContent className="grid">
<p> <div>
🔧 Quick Fix: Try hitting the{" "} <p>
<span className="font-bold">'Restart the Adventure'</span> button Click <span className="font-bold">'Restart Langflow'</span>{" "}
to get things moving again. It's like a magic wand for minor button to reset the app. Please report errors on our{" "}
glitches! <a
</p> href="https://github.com/logspace-ai/langflow/issues/new"
</div> target="_blank"
rel="noopener noreferrer"
className="font-medium hover:underline "
>
GitHub Issues
</a>{" "}
page to help the community. Thank you!
</p>
</div>
</CardContent>
<div> <CardFooter>
<p> <div className="m-auto mt-4 flex justify-center">
📝 Still Stuck? Let's Solve It Together: If our magic wand didn't <Button onClick={resetErrorBoundary}>Restart Langflow</Button>
do the trick, we'd love your help to dig a bit deeper. By
reporting this hiccup on our{" "}
<a
href="https://github.com/logspace-ai/langflow/issues/new"
target="_blank"
rel="noopener noreferrer"
className="font-medium text-blue-600 hover:underline dark:text-blue-500"
>
GitHub
</a>{" "}
page, you're not just fixing your own experience but also helping
the whole community.
</p>
</div>
<div className="mt-4 flex justify-center"> <a
<button href="https://github.com/logspace-ai/langflow/issues/new"
onClick={resetErrorBoundary} target="_blank"
className="cursor-pointer rounded-lg border-2 border-blue-600 px-3 py-2 font-bold text-blue-600 hover:bg-blue-600 hover:text-blue-100" rel="noopener noreferrer"
> >
Restart the Adventure <Button className="ml-3" variant={"outline"}>
</button> Report on GitHub
</Button>
<a </a>
href="https://github.com/logspace-ai/langflow/issues/new" </div>
target="_blank" </CardFooter>
rel="noopener noreferrer" </Card>
>
<button className="ml-3 cursor-pointer rounded-lg border-2 border-gray-600 px-3 py-2 font-bold text-gray-600 hover:bg-gray-600 hover:text-gray-100">
Report on GitHub
</button>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>