mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: add chirpy to error page

pull/458/head
Dan Ditomaso 1 year ago
parent
635d0673bf
commit
fb2a057c05
4 changed files with 83 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      public/images/chirpy.svg
  2. 2
      src/App.tsx
  3. 140
      src/components/UI/ErrorPage.tsx
  4. 7
      src/components/UI/Typography/P.tsx

1
public/images/chirpy.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

2
src/App.tsx
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 />

140
src/components/UI/ErrorPage.tsx
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>
); );

7
src/components/UI/Typography/P.tsx
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>
); );

Write Preview
Loading…
Cancel
Save