mirror of
https://github.com/meshtastic/web.git
synced 2026-01-06 06:28:04 -05:00
fix overflow issue with stack trace
This commit is contained in:
Dan Ditomaso
@@ -10,84 +10,85 @@ export function ErrorPage({ error }: { error: Error }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<article className="w-full">
|
||||
<section className="mx-auto mt-20 p-6 md:p-10 text-xl transition-all duration-150 ease-linear space-y-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<Heading as="h2" className="text-text-primary">
|
||||
This is a little embarrassing...
|
||||
</Heading>
|
||||
<P>
|
||||
We are really sorry but an error occured in the web client that
|
||||
caused it to crash. 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 occured</li>
|
||||
<li>What you expected to happen</li>
|
||||
<li>What actually happened</li>
|
||||
<li>Any other information you think might be relevant</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>
|
||||
<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>
|
||||
|
||||
<details className="mt-6 text-md">
|
||||
<summary className="cursor-pointer">Error Details</summary>
|
||||
<span className="block text-sm mt-4 overflow-auto">
|
||||
{error?.message ? (
|
||||
<>
|
||||
<label htmlFor="message">Error message:</label>
|
||||
<pre
|
||||
id="message"
|
||||
className="w-full text-slate-400"
|
||||
>{`${error.message}`}</pre>
|
||||
</>
|
||||
) : null}
|
||||
{error?.stack ? (
|
||||
<>
|
||||
<label htmlFor="stack">Stack trace:</label>
|
||||
<pre
|
||||
id="stack"
|
||||
className="w-full text-slate-400"
|
||||
>{`${error.stack}`}</pre>
|
||||
</>
|
||||
) : null}
|
||||
{!error?.message && !error?.stack ? (
|
||||
<pre className=" w-full text-slate-400">
|
||||
{error.toString()}
|
||||
</pre>
|
||||
) : null}
|
||||
</span>
|
||||
</details>
|
||||
</div>
|
||||
<div className="hidden md:block md:max-w-64 lg:max-w-80 w-full aspect-suqare">
|
||||
<img
|
||||
src="/images/chirpy.svg"
|
||||
alt="Chripy the Meshtastic error"
|
||||
className="max-w-2/5 aspect-auto place-self-center md:justify-self-start"
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user