This commit is contained in:
Vula Builder
2026-08-05 18:14:34 +00:00
parent 3cccdadac4
commit 72ad4153d2
+43
View File
@@ -0,0 +1,43 @@
'use client'
import { Component, ErrorInfo, ReactNode } from 'react'
interface Props { children: ReactNode }
interface State { hasError: boolean; error: string }
export class VulaSandboxBoundary extends Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = { hasError: false, error: '' }
}
static getDerivedStateFromError(error: Error): State {
return { hasError: true, error: error.message }
}
componentDidCatch(error: Error, info: ErrorInfo): void {
try {
const parent = typeof window !== 'undefined' && window !== window.parent ? window.parent : null
if (parent) {
parent.postMessage(
{ type: 'VULA_SANDBOX_ERROR', error: error.message, stack: error.stack, componentStack: info.componentStack },
'*'
)
}
} catch (_) { /* cross-origin postMessage can throw — swallow */ }
}
render() {
if (this.state.hasError) {
return (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b', color: '#71717a', fontFamily: 'system-ui, -apple-system, sans-serif', padding: '2rem', textAlign: 'center' }}>
<div>
<div style={{ fontSize: '2rem', marginBottom: '0.75rem' }}></div>
<p style={{ color: '#f97316', fontWeight: 600, margin: '0 0 0.5rem' }}>Fixing detected issue</p>
<p style={{ fontSize: '0.75rem', color: '#52525b', maxWidth: '28rem', margin: '0 auto' }}>{this.state.error}</p>
</div>
</div>
)
}
return this.props.children
}
}