Skip to content

Commit aa14d90

Browse files
danditomasodanditomaso
committed
fix overflow issue with stack trace
1 parent 84a85e8 commit aa14d90

File tree

1 file changed

+73
-72
lines changed

1 file changed

+73
-72
lines changed

‎src/components/UI/ErrorPage.tsx

+73-72
Original file line numberDiff line numberDiff line change
@@ -10,84 +10,85 @@ export function ErrorPage({ error }: { error: Error }) {
1010
}
1111

1212
return (
13-
<article className="w-full">
14-
<section className="mx-auto mt-20 p-6 md:p-10 text-xl transition-all duration-150 ease-linear space-y-2">
15-
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
16-
<div>
17-
<Heading as="h2" className="text-text-primary">
18-
This is a little embarrassing...
19-
</Heading>
20-
<P>
21-
We are really sorry but an error occured in the web client that
22-
caused it to crash. This is not supposed to happen and we are
23-
working hard to fix it.
24-
</P>
25-
<P>
26-
The best way to prevent this from happening again to you or anyone
27-
else is to report the issue to us.
28-
</P>
29-
<P>Please include the following information in your report:</P>
30-
<ul className="list-disc list-inside text-sm">
31-
<li>What you were doing when the error occured</li>
32-
<li>What you expected to happen</li>
33-
<li>What actually happened</li>
34-
<li>Any other information you think might be relevant</li>
35-
</ul>
36-
<P>
37-
You can report the issue to our{" "}
38-
<Link
39-
href={newGithubIssueUrl({
40-
repoUrl: "https://github.com/meshtastic/web",
41-
template: "bug.yml",
42-
title:
43-
"[Bug]: An unhandled error occurred. <Add details here>",
44-
logs: error?.stack,
45-
})}
46-
>
47-
Github
48-
</Link>
49-
<ExternalLink size={24} className="inline-block ml-2" />
50-
</P>
51-
<P>
52-
Return to the <Link href="/">dashboard</Link>
53-
</P>
13+
<article className="w-full overflow-y-auto">
14+
<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">
15+
<div>
16+
<Heading as="h2" className="text-text-primary">
17+
This is a little embarrassing...
18+
</Heading>
19+
<P>
20+
We are really sorry but an error occurred in the web client that
21+
caused it to crash. <br />
22+
This is not supposed to happen, and we are working hard to fix it.
23+
</P>
24+
<P>
25+
The best way to prevent this from happening again to you or anyone
26+
else is to report the issue to us.
27+
</P>
28+
<P>Please include the following information in your report:</P>
29+
<ul className="list-disc list-inside text-sm">
30+
<li>What you were doing when the error occurred</li>
31+
<li>What you expected to happen</li>
32+
<li>What actually happened</li>
33+
<li>Any other relevant information</li>
34+
</ul>
35+
<P>
36+
You can report the issue to our{" "}
37+
<Link
38+
href={newGithubIssueUrl({
39+
repoUrl: "https://github.com/meshtastic/web",
40+
template: "bug.yml",
41+
title: "[Bug]: An unhandled error occurred. <Add details here>",
42+
logs: error?.stack,
43+
})}
44+
>
45+
Github
46+
</Link>
47+
<ExternalLink size={24} className="inline-block ml-2" />
48+
</P>
49+
<P>
50+
Return to the <Link href="/">dashboard</Link>
51+
</P>
52+
</div>
5453

55-
<details className="mt-6 text-md">
56-
<summary className="cursor-pointer">Error Details</summary>
57-
<span className="block text-sm mt-4 overflow-auto">
58-
{error?.message ? (
59-
<>
60-
<label htmlFor="message">Error message:</label>
61-
<pre
62-
id="message"
63-
className="w-full text-slate-400"
64-
>{`${error.message}`}</pre>
65-
</>
66-
) : null}
67-
{error?.stack ? (
68-
<>
69-
<label htmlFor="stack">Stack trace:</label>
70-
<pre
71-
id="stack"
72-
className="w-full text-slate-400"
73-
>{`${error.stack}`}</pre>
74-
</>
75-
) : null}
76-
{!error?.message && !error?.stack ? (
77-
<pre className=" w-full text-slate-400">
78-
{error.toString()}
79-
</pre>
80-
) : null}
81-
</span>
82-
</details>
83-
</div>
54+
<div className="hidden md:block md:max-w-64 lg:max-w-80 w-full aspect-suqare">
8455
<img
8556
src="/images/chirpy.svg"
86-
alt="Chripy the Meshtastic error"
87-
className="max-w-2/5 aspect-auto place-self-center md:justify-self-start"
57+
alt="Chirpy the Meshtastic error"
58+
className="max-w-full h-auto"
8859
/>
8960
</div>
9061
</section>
62+
<details className="mt-8 px-4 md:px-8 text-lg md:text-xl space-y-2 text-md whitespace-pre-wrap break-all">
63+
<summary className="cursor-pointer">Error Details</summary>
64+
<span className="text-sm mt-4">
65+
{error?.message && (
66+
<>
67+
<label htmlFor="message">Error message:</label>
68+
<p
69+
id="message"
70+
className="text-slate-400 break-words overflow-wrap"
71+
>
72+
{error.message}
73+
</p>
74+
</>
75+
)}
76+
{error?.stack && (
77+
<>
78+
<label htmlFor="stack">Stack trace:</label>
79+
<p
80+
id="stack"
81+
className="text-slate-400 break-words overflow-wrap"
82+
>
83+
{error.stack}
84+
</p>
85+
</>
86+
)}
87+
{!error?.message && !error?.stack && (
88+
<p className="text-slate-400">{error.toString()}</p>
89+
)}
90+
</span>
91+
</details>
9192
</article>
9293
);
9394
}

0 commit comments

Comments
 (0)