global-error.tsx
1,175 bytes
| 1 | 'use client'; |
|---|---|
| 2 | |
| 3 | /** Root error boundary. Replaces the whole document, so it ships its own html/body. */ |
| 4 | export default function GlobalError({ reset }: { error: Error & { digest?: string }; reset: () => void }) { |
| 5 | return ( |
| 6 | <html lang="en"> |
| 7 | <body |
| 8 | style={{ |
| 9 | fontFamily: 'system-ui, sans-serif', |
| 10 | display: 'flex', |
| 11 | minHeight: '100vh', |
| 12 | margin: 0, |
| 13 | alignItems: 'center', |
| 14 | justifyContent: 'center', |
| 15 | background: '#0b1020', |
| 16 | color: '#e6ecff', |
| 17 | }} |
| 18 | > |
| 19 | <div style={{ textAlign: 'center', padding: 24 }}> |
| 20 | <h1 style={{ fontSize: 22, marginBottom: 8 }}>Something went wrong</h1> |
| 21 | <p style={{ opacity: 0.7, marginBottom: 16 }}>The application hit an unexpected error.</p> |
| 22 | <button |
| 23 | onClick={() => reset()} |
| 24 | style={{ |
| 25 | padding: '8px 16px', |
| 26 | borderRadius: 8, |
| 27 | border: 'none', |
| 28 | background: '#6366f1', |
| 29 | color: 'white', |
| 30 | cursor: 'pointer', |
| 31 | }} |
| 32 | > |
| 33 | Try again |
| 34 | </button> |
| 35 | </div> |
| 36 | </body> |
| 37 | </html> |
| 38 | ); |
| 39 | } |
| 40 | |