60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
'use client'
|
|
|
|
import React from 'react'
|
|
|
|
class ErrorBoundary extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = { hasError: false, error: null, errorInfo: null }
|
|
}
|
|
|
|
static getDerivedStateFromError(error) {
|
|
// Update state so the next render will show the fallback UI
|
|
return { hasError: true }
|
|
}
|
|
|
|
componentDidCatch(error, errorInfo) {
|
|
// Log detailed error information
|
|
console.error('🚨 React Error Boundary caught an error:', {
|
|
error,
|
|
errorInfo,
|
|
timestamp: new Date().toISOString(),
|
|
componentStack: errorInfo.componentStack,
|
|
errorStack: error.stack
|
|
})
|
|
|
|
this.setState({
|
|
error: error,
|
|
errorInfo: errorInfo
|
|
})
|
|
}
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
// You can render any custom fallback UI
|
|
return (
|
|
<div style={{ padding: '20px', border: '1px solid red', margin: '20px' }}>
|
|
<h2>🚨 Something went wrong!</h2>
|
|
<details style={{ whiteSpace: 'pre-wrap' }}>
|
|
<summary>Error details</summary>
|
|
<p><strong>Timestamp:</strong> {new Date().toISOString()}</p>
|
|
<p><strong>Error:</strong> {this.state.error && this.state.error.toString()}</p>
|
|
<p><strong>Stack Trace:</strong></p>
|
|
<pre>{this.state.errorInfo.componentStack}</pre>
|
|
</details>
|
|
<button
|
|
onClick={() => this.setState({ hasError: false, error: null, errorInfo: null })}
|
|
style={{ marginTop: '10px', padding: '10px 20px' }}
|
|
>
|
|
Try again
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return this.props.children
|
|
}
|
|
}
|
|
|
|
export default ErrorBoundary
|