mirror of
https://github.com/meshtastic/web.git
synced 2026-04-23 07:17:22 -04:00
feat: add chirpy to error page
This commit is contained in:
Dan Ditomaso
1
public/images/chirpy.svg
Normal file
1
public/images/chirpy.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
@@ -38,7 +38,7 @@ export const App = (): JSX.Element => {
|
||||
<DeviceSelector />
|
||||
<div className="flex grow flex-col">
|
||||
{device ? (
|
||||
<div className="flex h-screen">
|
||||
<div className="flex h-screen w-full">
|
||||
<DialogManager />
|
||||
<KeyBackupReminder />
|
||||
<CommandPalette />
|
||||
|
||||
@@ -10,71 +10,83 @@ export function ErrorPage({ error }: { error: Error }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<article>
|
||||
<section className="prose mx-auto mb-20 mt-28 max-w-prose px-8 text-2xl transition-all duration-150 ease-linear space-y-2">
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<img
|
||||
src="/images/chirpy.svg"
|
||||
alt="Chripy the Meshtastic error"
|
||||
className="max-w-2/5 aspect-auto place-self-center md:justify-self-start"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import { cn } from "@app/core/utils/cn";
|
||||
|
||||
export interface PProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const P = ({ children }: PProps) => (
|
||||
<p className="leading-7 not-first:mt-6">{children}</p>
|
||||
export const P = ({ children, className }: PProps) => (
|
||||
<p className={cn("leading-7 not-first:mt-6", className)}>{children}</p>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user