You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
3.2 KiB
94 lines
3.2 KiB
import newGithubIssueUrl from "@app/core/utils/github";
|
|
import { ExternalLink } from "lucide-react";
|
|
import { Heading } from "./Typography/Heading";
|
|
import { Link } from "./Typography/Link";
|
|
import { P } from "./Typography/P";
|
|
|
|
export function ErrorPage({ error }: { error: Error }) {
|
|
if (!error) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<article className="w-full overflow-y-auto">
|
|
<section className="flex shrink md:flex-row gap-16 mt-20 px-4 md:px-8 text-lg md:text-xl space-y-2 place-items-center">
|
|
<div>
|
|
<Heading as="h2" className="text-text-primary">
|
|
This is a little embarrassing...
|
|
</Heading>
|
|
<P>
|
|
We are really sorry but an error occurred in the web client that
|
|
caused it to crash. <br />
|
|
This is not supposed to happen, and we are working hard to fix it.
|
|
</P>
|
|
<P>
|
|
The best way to prevent this from happening again to you or anyone
|
|
else is to report the issue to us.
|
|
</P>
|
|
<P>Please include the following information in your report:</P>
|
|
<ul className="list-disc list-inside text-sm">
|
|
<li>What you were doing when the error occurred</li>
|
|
<li>What you expected to happen</li>
|
|
<li>What actually happened</li>
|
|
<li>Any other relevant information</li>
|
|
</ul>
|
|
<P>
|
|
You can report the issue to our{" "}
|
|
<Link
|
|
href={newGithubIssueUrl({
|
|
repoUrl: "https://github.com/meshtastic/web",
|
|
template: "bug.yml",
|
|
title: "[Bug]: An unhandled error occurred. <Add details here>",
|
|
logs: error?.stack,
|
|
})}
|
|
>
|
|
Github
|
|
</Link>
|
|
<ExternalLink size={24} className="inline-block ml-2" />
|
|
</P>
|
|
<P>
|
|
Return to the <Link href="/">dashboard</Link>
|
|
</P>
|
|
</div>
|
|
|
|
<div className="hidden md:block md:max-w-64 lg:max-w-80 w-full aspect-suqare">
|
|
<img
|
|
src="/images/chirpy.svg"
|
|
alt="Chirpy the Meshtastic error"
|
|
className="max-w-full h-auto"
|
|
/>
|
|
</div>
|
|
</section>
|
|
<details className="mt-8 px-4 md:px-8 text-lg md:text-xl space-y-2 text-md whitespace-pre-wrap break-all">
|
|
<summary className="cursor-pointer">Error Details</summary>
|
|
<span className="text-sm mt-4">
|
|
{error?.message && (
|
|
<>
|
|
<label htmlFor="message">Error message:</label>
|
|
<p
|
|
id="message"
|
|
className="text-slate-400 break-words overflow-wrap"
|
|
>
|
|
{error.message}
|
|
</p>
|
|
</>
|
|
)}
|
|
{error?.stack && (
|
|
<>
|
|
<label htmlFor="stack">Stack trace:</label>
|
|
<p
|
|
id="stack"
|
|
className="text-slate-400 break-words overflow-wrap"
|
|
>
|
|
{error.stack}
|
|
</p>
|
|
</>
|
|
)}
|
|
{!error?.message && !error?.stack && (
|
|
<p className="text-slate-400">{error.toString()}</p>
|
|
)}
|
|
</span>
|
|
</details>
|
|
</article>
|
|
);
|
|
}
|
|
|