feat: add custom error boundaries with navigation
Replace Next.js default error boundary with custom error pages that preserve navigation and provide better UX. **Problem:** - Default Next.js error boundary shows generic message with NO navigation - Users have no way to recover or navigate away from error - Message: "Application error: a client-side exception has occurred (see the browser console for more information)." **Solution:** - Add custom error.tsx at root level with navigation links - Add custom error.tsx in /arcade with PageWithNav component - Both provide: - Clear error message - "Try Again" button to reset error boundary - Navigation links (home, arcade lobby) - Collapsible technical details for debugging **Benefits:** - Users can always navigate away from errors - Arcade errors keep the nav bar for consistent UX - Root errors provide basic navigation links - Professional error pages instead of generic Next.js message 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
parent
6a9f3f09ed
commit
73cc4185c3
|
|
@ -0,0 +1,191 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useEffect } from 'react'
|
||||||
|
import { PageWithNav } from '@/components/PageWithNav'
|
||||||
|
import { css } from '../../../styled-system/css'
|
||||||
|
|
||||||
|
export default function ArcadeError({
|
||||||
|
error,
|
||||||
|
reset,
|
||||||
|
}: {
|
||||||
|
error: Error & { digest?: string }
|
||||||
|
reset: () => void
|
||||||
|
}) {
|
||||||
|
useEffect(() => {
|
||||||
|
console.error('[Arcade Error Boundary]', error)
|
||||||
|
}, [error])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageWithNav navTitle="Error" navEmoji="⚠️">
|
||||||
|
<div
|
||||||
|
data-component="arcade-error-page"
|
||||||
|
className={css({
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
minHeight: '60vh',
|
||||||
|
padding: '32px',
|
||||||
|
textAlign: 'center',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{/* Error icon */}
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
fontSize: '64px',
|
||||||
|
marginBottom: '24px',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
⚠️
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error title */}
|
||||||
|
<h1
|
||||||
|
className={css({
|
||||||
|
fontSize: '32px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
marginBottom: '16px',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Something Went Wrong
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{/* Error message */}
|
||||||
|
<p
|
||||||
|
className={css({
|
||||||
|
fontSize: '18px',
|
||||||
|
color: 'gray.600',
|
||||||
|
marginBottom: '32px',
|
||||||
|
maxWidth: '600px',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
The game encountered an unexpected error. You can try reloading the game, or return to the
|
||||||
|
arcade lobby.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Action buttons */}
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
display: 'flex',
|
||||||
|
gap: '16px',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
justifyContent: 'center',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onClick={reset}
|
||||||
|
data-action="retry-game"
|
||||||
|
className={css({
|
||||||
|
padding: '12px 32px',
|
||||||
|
backgroundColor: 'blue.600',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '8px',
|
||||||
|
fontSize: '16px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: 'background-color 0.2s',
|
||||||
|
_hover: {
|
||||||
|
backgroundColor: 'blue.700',
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Try Again
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="/arcade-rooms"
|
||||||
|
data-action="return-to-lobby"
|
||||||
|
className={css({
|
||||||
|
padding: '12px 32px',
|
||||||
|
backgroundColor: 'gray.200',
|
||||||
|
color: 'gray.800',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '8px',
|
||||||
|
fontSize: '16px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
cursor: 'pointer',
|
||||||
|
textDecoration: 'none',
|
||||||
|
transition: 'background-color 0.2s',
|
||||||
|
_hover: {
|
||||||
|
backgroundColor: 'gray.300',
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Return to Lobby
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Technical details (collapsed by default) */}
|
||||||
|
<details
|
||||||
|
className={css({
|
||||||
|
marginTop: '48px',
|
||||||
|
maxWidth: '600px',
|
||||||
|
width: '100%',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<summary
|
||||||
|
className={css({
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
color: 'gray.600',
|
||||||
|
_hover: {
|
||||||
|
color: 'gray.800',
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Show technical details
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
marginTop: '16px',
|
||||||
|
padding: '16px',
|
||||||
|
backgroundColor: 'gray.100',
|
||||||
|
borderRadius: '8px',
|
||||||
|
textAlign: 'left',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
marginBottom: '8px',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Error: {error.message}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error.digest && (
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
fontSize: '12px',
|
||||||
|
color: 'gray.600',
|
||||||
|
marginBottom: '8px',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Digest: {error.digest}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{error.stack && (
|
||||||
|
<pre
|
||||||
|
className={css({
|
||||||
|
fontSize: '12px',
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
color: 'gray.700',
|
||||||
|
overflow: 'auto',
|
||||||
|
maxHeight: '200px',
|
||||||
|
whiteSpace: 'pre-wrap',
|
||||||
|
wordBreak: 'break-word',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{error.stack}
|
||||||
|
</pre>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</PageWithNav>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,237 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useEffect } from 'react'
|
||||||
|
import { css } from '../../styled-system/css'
|
||||||
|
|
||||||
|
export default function RootError({
|
||||||
|
error,
|
||||||
|
reset,
|
||||||
|
}: {
|
||||||
|
error: Error & { digest?: string }
|
||||||
|
reset: () => void
|
||||||
|
}) {
|
||||||
|
useEffect(() => {
|
||||||
|
console.error('[Root Error Boundary]', error)
|
||||||
|
}, [error])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<body>
|
||||||
|
<div
|
||||||
|
data-component="root-error-page"
|
||||||
|
className={css({
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
minHeight: '100vh',
|
||||||
|
padding: '32px',
|
||||||
|
textAlign: 'center',
|
||||||
|
backgroundColor: 'gray.50',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{/* Error icon */}
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
fontSize: '64px',
|
||||||
|
marginBottom: '24px',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
⚠️
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error title */}
|
||||||
|
<h1
|
||||||
|
className={css({
|
||||||
|
fontSize: '32px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
marginBottom: '16px',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Something Went Wrong
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{/* Error message */}
|
||||||
|
<p
|
||||||
|
className={css({
|
||||||
|
fontSize: '18px',
|
||||||
|
color: 'gray.600',
|
||||||
|
marginBottom: '32px',
|
||||||
|
maxWidth: '600px',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
The application encountered an unexpected error. You can try reloading the page, or
|
||||||
|
return to the home page.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Action buttons */}
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
display: 'flex',
|
||||||
|
gap: '16px',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
justifyContent: 'center',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onClick={reset}
|
||||||
|
data-action="retry-page"
|
||||||
|
className={css({
|
||||||
|
padding: '12px 32px',
|
||||||
|
backgroundColor: 'blue.600',
|
||||||
|
color: 'white',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '8px',
|
||||||
|
fontSize: '16px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: 'background-color 0.2s',
|
||||||
|
_hover: {
|
||||||
|
backgroundColor: 'blue.700',
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Try Again
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
data-action="return-home"
|
||||||
|
className={css({
|
||||||
|
padding: '12px 32px',
|
||||||
|
backgroundColor: 'gray.200',
|
||||||
|
color: 'gray.800',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '8px',
|
||||||
|
fontSize: '16px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
cursor: 'pointer',
|
||||||
|
textDecoration: 'none',
|
||||||
|
transition: 'background-color 0.2s',
|
||||||
|
_hover: {
|
||||||
|
backgroundColor: 'gray.300',
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Return Home
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation links */}
|
||||||
|
<nav
|
||||||
|
className={css({
|
||||||
|
marginTop: '48px',
|
||||||
|
display: 'flex',
|
||||||
|
gap: '24px',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
justifyContent: 'center',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
className={css({
|
||||||
|
color: 'blue.600',
|
||||||
|
textDecoration: 'none',
|
||||||
|
_hover: { textDecoration: 'underline' },
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/arcade-rooms"
|
||||||
|
className={css({
|
||||||
|
color: 'blue.600',
|
||||||
|
textDecoration: 'none',
|
||||||
|
_hover: { textDecoration: 'underline' },
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Arcade
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/calendar"
|
||||||
|
className={css({
|
||||||
|
color: 'blue.600',
|
||||||
|
textDecoration: 'none',
|
||||||
|
_hover: { textDecoration: 'underline' },
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Calendar
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Technical details (collapsed by default) */}
|
||||||
|
<details
|
||||||
|
className={css({
|
||||||
|
marginTop: '48px',
|
||||||
|
maxWidth: '600px',
|
||||||
|
width: '100%',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<summary
|
||||||
|
className={css({
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: '14px',
|
||||||
|
color: 'gray.600',
|
||||||
|
_hover: {
|
||||||
|
color: 'gray.800',
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Show technical details
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
marginTop: '16px',
|
||||||
|
padding: '16px',
|
||||||
|
backgroundColor: 'white',
|
||||||
|
borderRadius: '8px',
|
||||||
|
textAlign: 'left',
|
||||||
|
border: '1px solid',
|
||||||
|
borderColor: 'gray.200',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
marginBottom: '8px',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Error: {error.message}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error.digest && (
|
||||||
|
<div
|
||||||
|
className={css({
|
||||||
|
fontSize: '12px',
|
||||||
|
color: 'gray.600',
|
||||||
|
marginBottom: '8px',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Digest: {error.digest}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{error.stack && (
|
||||||
|
<pre
|
||||||
|
className={css({
|
||||||
|
fontSize: '12px',
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
color: 'gray.700',
|
||||||
|
overflow: 'auto',
|
||||||
|
maxHeight: '200px',
|
||||||
|
whiteSpace: 'pre-wrap',
|
||||||
|
wordBreak: 'break-word',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{error.stack}
|
||||||
|
</pre>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue