64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { AlertCircle, RefreshCcw } from 'lucide-react'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
interface Props {
|
|
children: React.ReactNode
|
|
}
|
|
|
|
interface State {
|
|
hasError: boolean
|
|
error?: Error
|
|
}
|
|
|
|
export class CanvasErrorBoundary extends React.Component<Props, State> {
|
|
constructor(props: Props) {
|
|
super(props)
|
|
this.state = { hasError: false }
|
|
}
|
|
|
|
static getDerivedStateFromError(error: Error) {
|
|
return { hasError: true, error }
|
|
}
|
|
|
|
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
|
console.error('[CanvasErrorBoundary] caught error:', error, errorInfo)
|
|
}
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
return (
|
|
<div className="flex-1 flex flex-col items-center justify-center p-8 bg-destructive/5 rounded-3xl border border-destructive/20 m-6 gap-4">
|
|
<div className="p-4 bg-destructive/10 rounded-full">
|
|
<AlertCircle className="h-8 w-8 text-destructive" />
|
|
</div>
|
|
<div className="text-center space-y-2">
|
|
<h3 className="text-xl font-bold">Oups ! Le Lab a rencontré un problème.</h3>
|
|
<p className="text-sm text-muted-foreground max-w-md mx-auto">
|
|
Une erreur inattendue est survenue lors du chargement de l'espace de dessin.
|
|
Cela peut arriver à cause d'un conflit de données ou d'une extension de navigateur.
|
|
</p>
|
|
</div>
|
|
<Button
|
|
onClick={() => window.location.reload()}
|
|
variant="outline"
|
|
className="flex items-center gap-2"
|
|
>
|
|
<RefreshCcw className="h-4 w-4" />
|
|
Recharger la page
|
|
</Button>
|
|
{process.env.NODE_ENV === 'development' && (
|
|
<pre className="mt-4 p-4 bg-black/5 rounded-lg text-xs font-mono overflow-auto max-w-full italic text-muted-foreground">
|
|
{this.state.error?.message}
|
|
</pre>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return this.props.children
|
|
}
|
|
}
|