React & Modern Frontend (445 Qs)•Part 11: Legacy Architecture, Migration Patterns & Historical Internals (354 - 445)
How are error boundaries handled in React v15?
⚠️ LEGACY: This question is only relevant for historical context. React v15 is extremely outdated (released in 2016).
markdown
React v15 provided very basic support for _error boundaries_ using the `unstable_handleError` method. This was an experimental feature that was later redesigned and renamed to `componentDidCatch` in React v16.
**Modern Error Boundaries (React 16+):**
- Use `static getDerivedStateFromError(error)` for UI fallback
- Use `componentDidCatch(error, info)` for logging
- Work consistently across server and client rendering
Code Example
tsx
// React v15 experimental error handling (unstable_handleError)
const LegacyV15ErrorBoundary = React.createClass({
getInitialState() {
return { hasError: false };
},
// Experimental and unstable API in React 15:
unstable_handleError(error) {
this.setState({ hasError: true });
console.error('Handled error in React 15:', error);
},
render() {
if (this.state.hasError) {
return <div>An error occurred in child components.</div>;
}
return this.props.children;
}
});
// Modern React 16+ Standard Error Boundary
class ModernErrorBoundary extends React.Component<any, { hasError: boolean }> {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error: Error, info: React.ErrorInfo) {
console.error('Logged via modern error boundary:', error, info);
}
render() {
return this.state.hasError ? <div>Something went wrong.</div> : this.props.children;
}
}