| 1 |
import { Component } from "@wordpress/element"; |
| 2 |
import { __ } from "@wordpress/i18n"; |
| 3 |
|
| 4 |
/** |
| 5 |
* Error Boundary Component |
| 6 |
* Catches JavaScript errors anywhere in the child component tree |
| 7 |
*/ |
| 8 |
class ErrorBoundary extends Component { |
| 9 |
constructor(props) { |
| 10 |
super(props); |
| 11 |
this.state = { hasError: false, error: null, errorInfo: null }; |
| 12 |
} |
| 13 |
|
| 14 |
static getDerivedStateFromError(error) { |
| 15 |
// Update state so the next render will show the fallback UI |
| 16 |
return { hasError: true }; |
| 17 |
} |
| 18 |
|
| 19 |
componentDidCatch(error, errorInfo) { |
| 20 |
// Log error details |
| 21 |
console.error("Smart Design Library Error:", error, errorInfo); |
| 22 |
|
| 23 |
this.setState({ |
| 24 |
error: error, |
| 25 |
errorInfo: errorInfo, |
| 26 |
}); |
| 27 |
|
| 28 |
// Optional: Send error to logging service |
| 29 |
if (this.props.onError) { |
| 30 |
this.props.onError(error, errorInfo); |
| 31 |
} |
| 32 |
} |
| 33 |
|
| 34 |
render() { |
| 35 |
if (this.state.hasError) { |
| 36 |
// Fallback UI |
| 37 |
return ( |
| 38 |
<div className="sp-smart-error-boundary"> |
| 39 |
<div className="sp-smart-error-content"> |
| 40 |
<h3>{__("Something went wrong", "post-carousel")}</h3> |
| 41 |
<p> |
| 42 |
{__( |
| 43 |
"We're sorry, but something went wrong while loading the design library.", |
| 44 |
"post-carousel" |
| 45 |
)} |
| 46 |
</p> |
| 47 |
|
| 48 |
{this.props.showDetails && this.state.error && ( |
| 49 |
<details className="sp-smart-error-details"> |
| 50 |
<summary>{__("Error Details", "post-carousel")}</summary> |
| 51 |
<pre>{this.state.error.toString()}</pre> |
| 52 |
{this.state.errorInfo && <pre>{this.state.errorInfo.componentStack}</pre>} |
| 53 |
</details> |
| 54 |
)} |
| 55 |
|
| 56 |
<button |
| 57 |
className="sp-smart-retry-button" |
| 58 |
onClick={() => { |
| 59 |
this.setState({ hasError: false, error: null, errorInfo: null }); |
| 60 |
if (this.props.onRetry) { |
| 61 |
this.props.onRetry(); |
| 62 |
} |
| 63 |
}} |
| 64 |
> |
| 65 |
{__("Try Again", "post-carousel")} |
| 66 |
</button> |
| 67 |
</div> |
| 68 |
</div> |
| 69 |
); |
| 70 |
} |
| 71 |
|
| 72 |
return this.props.children; |
| 73 |
} |
| 74 |
} |
| 75 |
|
| 76 |
export default ErrorBoundary; |
| 77 |
|
