43 lines
905 B
TypeScript
43 lines
905 B
TypeScript
'use client'
|
|
|
|
import React, { Component, ErrorInfo, ReactNode } from 'react'
|
|
|
|
interface Props {
|
|
children?: ReactNode
|
|
}
|
|
|
|
interface State {
|
|
hasError: boolean
|
|
}
|
|
|
|
export class ErrorBoundary extends Component<Props, State> {
|
|
public state: State = {
|
|
hasError: false
|
|
}
|
|
|
|
public static getDerivedStateFromError(_: Error): State {
|
|
return { hasError: true }
|
|
}
|
|
|
|
public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
|
console.error('Uncaught error:', error, errorInfo)
|
|
}
|
|
|
|
public render() {
|
|
if (this.state.hasError) {
|
|
return (
|
|
<div className="p-4 text-red-500">
|
|
<h2>Something went wrong.</h2>
|
|
<button
|
|
className="mt-2 px-4 py-2 bg-red-100 rounded"
|
|
onClick={() => this.setState({ hasError: false })}
|
|
>
|
|
Try again
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return this.props.children
|
|
}
|
|
}
|