hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add chirpy to error page

Browse Source
This commit is contained in:
Dan Ditomaso
2025-02-22 15:14:44 -05:00
parent 635d0673bf
commit fb2a057c05
4 changed files with 83 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/chirpy.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

src/App.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export const App = (): JSX.Element => {
<DeviceSelector /> <DeviceSelector />
<div className="flex grow flex-col"> <div className="flex grow flex-col">
{device ? ( {device ? (
<div className="flex h-screen"> <div className="flex h-screen w-full">
<DialogManager /> <DialogManager />
<KeyBackupReminder /> <KeyBackupReminder />
<CommandPalette /> <CommandPalette />
src/components/UI/ErrorPage.tsx
+76 -64
View File
@@ -10,71 +10,83 @@ export function ErrorPage({ error }: { error: Error }) {
} }
return ( return (
<article> <article className="w-full">
<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"> <section className="mx-auto mt-20 p-6 md:p-10 text-xl transition-all duration-150 ease-linear space-y-2">
<Heading as="h2" className="text-text-primary"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
This is a little embarrassing... <div>
</Heading> <Heading as="h2" className="text-text-primary">
<P> This is a little embarrassing...
We are really sorry but an error occured in the web client that caused </Heading>
it to crash. This is not supposed to happen and we are working hard to <P>
fix it. We are really sorry but an error occured in the web client that
</P> caused it to crash. This is not supposed to happen and we are
<P> working hard to fix it.
The best way to prevent this from happening again to you or anyone </P>
else is to report the issue to us. <P>
</P> The best way to prevent this from happening again to you or anyone
<P>Please include the following information in your report:</P> else is to report the issue to us.
<ul className="list-disc list-inside text-sm"> </P>
<li>What you were doing when the error occured</li> <P>Please include the following information in your report:</P>
<li>What you expected to happen</li> <ul className="list-disc list-inside text-sm">
<li>What actually happened</li> <li>What you were doing when the error occured</li>
<li>Any other information you think might be relevant</li> <li>What you expected to happen</li>
</ul> <li>What actually happened</li>
<P> <li>Any other information you think might be relevant</li>
You can report the issue to our{" "} </ul>
<Link <P>
href={newGithubIssueUrl({ You can report the issue to our{" "}
repoUrl: "https://github.com/meshtastic/web", <Link
template: "bug.yml", href={newGithubIssueUrl({
title: "[Bug]: An unhandled error occurred. <Add details here>", repoUrl: "https://github.com/meshtastic/web",
logs: error?.stack, template: "bug.yml",
})} title:
> "[Bug]: An unhandled error occurred. <Add details here>",
Github logs: error?.stack,
</Link> })}
<ExternalLink size={24} className="inline-block ml-2" /> >
</P> Github
<P> </Link>
Return to the <Link href="/">dashboard</Link> <ExternalLink size={24} className="inline-block ml-2" />
</P> </P>
<P>
Return to the <Link href="/">dashboard</Link>
</P>
<details className="mt-6 text-md"> <details className="mt-6 text-md">
<summary className="cursor-pointer">Error Details</summary> <summary className="cursor-pointer">Error Details</summary>
<span className="block text-sm mt-4 overflow-auto"> <span className="block text-sm mt-4 overflow-auto">
{error?.message ? ( {error?.message ? (
<> <>
<label htmlFor="message">Error message:</label> <label htmlFor="message">Error message:</label>
<pre <pre
id="message" id="message"
className="w-full text-slate-400" className="w-full text-slate-400"
>{`${error.message}`}</pre> >{`${error.message}`}</pre>
</> </>
) : null} ) : null}
{error?.stack ? ( {error?.stack ? (
<> <>
<label htmlFor="stack">Stack trace:</label> <label htmlFor="stack">Stack trace:</label>
<pre <pre
id="stack" id="stack"
className="w-full text-slate-400" className="w-full text-slate-400"
>{`${error.stack}`}</pre> >{`${error.stack}`}</pre>
</> </>
) : null} ) : null}
{!error?.message && !error?.stack ? ( {!error?.message && !error?.stack ? (
<pre className=" w-full text-slate-400">{error.toString()}</pre> <pre className=" w-full text-slate-400">
) : null} {error.toString()}
</span> </pre>
</details> ) : 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> </section>
</article> </article>
); );
src/components/UI/Typography/P.tsx
+5 -2
View File
@@ -1,7 +1,10 @@
import { cn } from "@app/core/utils/cn";
export interface PProps { export interface PProps {
children: React.ReactNode; children: React.ReactNode;
className?: string;
} }
export const P = ({ children }: PProps) => ( export const P = ({ children, className }: PProps) => (
<p className="leading-7 not-first:mt-6">{children}</p> <p className={cn("leading-7 not-first:mt-6", className)}>{children}</p>
); );