Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 46x 94x 94x 2x 1x 5x 2x 3x | import { Component, type ReactNode, type ErrorInfo } from 'react'
import { Button } from '@/components/ui/button'
interface Props {
children: ReactNode
fallbackTitle?: string
}
interface State {
error: Error | null
}
export class ErrorBoundary extends Component<Props, State> {
Istate: State = { error: null }
static getDerivedStateFromError(error: Error): State {
return { error }
}
componentDidCatch(error: Error, info: ErrorInfo) {
console.error('ErrorBoundary caught:', error, info)
}
render() {
if (this.state.error) {
return (
<div
role="alert"
className="flex flex-col items-center gap-4 py-16 text-center"
>
<h2 className="text-lg font-semibold">
{this.props.fallbackTitle ?? 'Something went wrong'}
</h2>
<p className="max-w-md text-sm text-muted-foreground">
{this.state.error.message}
</p>
<Button
variant="outline"
onClick={() => {
this.setState({ error: null })
window.location.reload()
}}
>
Reload page
</Button>
</div>
)
}
return this.props.children
}
}
|