InterviewHubPRO
Section Overview
Q372

Question 372 of 445

Part 11: Legacy Architecture, Migration Patterns & Historical Internals (354 - 445)

84%
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;
  }
}