40 lines
1.2 KiB
JavaScript
40 lines
1.2 KiB
JavaScript
/* ============================================================
|
|
ErrorBoundary — a throw in any lazy screen used to blank the whole app.
|
|
Mounted around the route outlet in AppLayout, keyed by pathname so simply
|
|
navigating away resets it.
|
|
============================================================ */
|
|
|
|
import { Component } from 'react'
|
|
import { EmptyState } from '../ui/primitives'
|
|
|
|
export default class ErrorBoundary extends Component {
|
|
state = { error: null }
|
|
|
|
static getDerivedStateFromError(error) {
|
|
return { error }
|
|
}
|
|
|
|
componentDidCatch(error, info) {
|
|
console.error('Screen crashed:', error, info?.componentStack)
|
|
}
|
|
|
|
render() {
|
|
if (this.state.error) {
|
|
return (
|
|
<div className="page">
|
|
<EmptyState icon="alert" title="Something went wrong">
|
|
This screen hit an unexpected error. The rest of the app is fine —
|
|
try again, or head back to the dashboard.
|
|
</EmptyState>
|
|
<div style={{ textAlign: 'center' }}>
|
|
<button className="btn btn-secondary" onClick={() => this.setState({ error: null })}>
|
|
Try again
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
return this.props.children
|
|
}
|
|
}
|