chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions 2

Address code review feedback on error pages

Browse source 
- Move statusIcon out of ErrorBoundary render as a plain module-level
  function to avoid React re-creating a component type on every render
- Collapse 401 action into a single descriptive button label
  ("Go to Home Page to Sign In") instead of a fragmented button + hint
- Fix details/summary border radius collision by using overflow-hidden
  on the container and removing rounded-md from the summary element;
  separate the pre block with a border-t instead

https://claude.ai/code/session_011jv8desa5vhSkjZHSjWZiV
This commit is contained in:
Claude 2026-02-22 07:41:43 +00:00
parent c8c1238963
commit 773ea7f932
No known key found for this signature in database
1 changed files with 15 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
app/root.tsx
View file

@ -89,7 +89,6 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
let message = "An unexpected error occurred. Please try again later.";
let stack: string | undefined;
let showSignInHint = false;
if (isRouteErrorResponse(error)) {
status = error.status;
switch (error.status) {
@ -119,15 +118,6 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
stack = import.meta.env.DEV ? error.stack : undefined;
}
const StatusIcon = () => {
const cls = "h-14 w-14 text-muted-foreground";
if (status === 401) return <Lock className={cls} />;
if (status === 403) return <ShieldOff className={cls} />;
if (status === 404) return <FileQuestion className={cls} />;
if (status >= 500) return <ServerCrash className={cls} />;
return <AlertCircle className={cls} />;
};
return (
<div className="min-h-screen bg-background text-foreground flex flex-col">
<header className="border-b border-border/40 bg-background/95 backdrop-blur">
@ -145,7 +135,7 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
</div>
<div className="flex justify-center">
<StatusIcon />
{statusIcon(status)}
</div>
<div className="space-y-2">
@ -153,26 +143,21 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
<p className="text-muted-foreground">{message}</p>
</div>
<div className="flex flex-col sm:flex-row gap-3 justify-center pt-2">
<div className="flex justify-center pt-2">
<a
href="/"
className="inline-flex items-center justify-center rounded-md text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 transition-colors"
>
Go Home
{showSignInHint ? "Go to Home Page to Sign In" : "Go Home"}
</a>
{showSignInHint && (
<p className="text-sm text-muted-foreground self-center">
You can sign in from the home page.
</p>
)}
</div>
{stack && (
<details className="text-left mt-8 border border-border rounded-md">
<summary className="cursor-pointer text-sm text-muted-foreground px-4 py-3 hover:bg-muted/50 rounded-md">
<details className="text-left mt-8 border border-border rounded-md overflow-hidden">
<summary className="cursor-pointer text-sm text-muted-foreground px-4 py-3 hover:bg-muted/50">
Stack trace (development only)
</summary>
<pre className="p-4 overflow-x-auto text-xs text-muted-foreground">
<pre className="p-4 overflow-x-auto text-xs text-muted-foreground border-t border-border">
<code>{stack}</code>
</pre>
</details>
@ -182,3 +167,12 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
</div>
);
}
function statusIcon(status: number) {
const cls = "h-14 w-14 text-muted-foreground";
if (status === 401) return <Lock className={cls} />;
if (status === 403) return <ShieldOff className={cls} />;
if (status === 404) return <FileQuestion className={cls} />;
if (status >= 500) return <ServerCrash className={cls} />;
return <AlertCircle className={cls} />;
}