Error Boundaries

How React Error Boundaries Prevent Application Crashes

React Error Boundaries catch JavaScript errors in component trees and display fallback UI instead of crashing the entire application. They provide graceful error recovery for component failures, Suspense loading errors, and unexpected runtime exceptions. Teams using error boundaries report 80% fewer user-facing crashes and dramatically improved application resilience.

TL;DR

• Use ErrorBoundary components to catch component errors
• Prevents single component failures from crashing entire app
• Essential for Suspense lazy loading and async operations
• Perfect for production apps requiring high availability

const result = process(data)

The Application Crash Problem

Your React application crashes completely when any component throws an error, showing users a blank white screen instead of graceful error handling. Single component failures take down the entire app, creating poor user experiences and making debugging difficult in production environments.

// Unhandled errors crash entire application
function riskyOperation() {
  const data = null
  // This will throw TypeError
  return data.profile.name
}

try {
  const result = riskyOperation()
  console.log('Success:', result)
} catch (e) {
  console.log('Error caught:', e.message)
}

console.log('Without error boundaries, React apps crash')
console.log('Users see blank white screen')

Error boundaries catch JavaScript errors in component trees, preventing crashes and displaying fallback UI instead:

// Error boundary catches errors and shows fallback
function withBoundary(riskyFn, fallback) {
  try {
    return riskyFn()
  } catch (error) {
    console.log('Caught:', error.message)
    console.log('Showing fallback UI')
    return fallback
  }
}
const result = withBoundary(() => {
  throw new Error('Failed')
}, 'Error UI')
console.log('Result:', result)
console.log('App continues running')

Best Practises

Use error boundaries when:

• ✅ Components can fail independently without affecting others
• ✅ Third-party components or libraries might throw errors
• ✅ Lazy loading with Suspense needs error handling
• ✅ Production apps require high availability and resilience

Avoid when:

• 🚩 Errors are expected and should be handled with try/catch
• 🚩 Components are tightly coupled and depend on each other
• 🚩 Simple apps where full page refresh is acceptable
• 🚩 Event handlers already handle errors properly

System Design Trade-offs

More Code Examples

// No error boundaries - any error crashes entire app
function simulateAppWithoutBoundaries() {
  const components = [
    { name: 'Header', risk: 'low' },
    { name: 'UserProfile', risk: 'high' },
    { name: 'Dashboard', risk: 'medium' },
    { name: 'Sidebar', risk: 'low' },
  ]

  console.log('App starting without error boundaries...')

  for (const component of components) {
    console.log(`Loading ${component.name}...`)

    if (component.risk === 'high') {
      // Simulate component error
      console.log(`ERROR in ${component.name}!`)
      console.log('Entire app crashes - white screen')
      console.log('All components unmounted')
      console.log('User loses all progress')
      throw new Error(`${component.name} failed`)
    }
  }

  console.log('App loaded successfully')
}

try {
  simulateAppWithoutBoundaries()
} catch (error) {
  console.log('Fatal:', error.message)
  console.log('User must refresh page')
  console.log('Poor user experience')
  console.log('Hard to debug in production')
}

console.log('Problem: Single failure crashes everything')
// Output shows cascading failure

// With error boundaries - failures are isolated
class AppWithBoundaries {
  constructor() {
    this.boundaries = new Map()
    this.components = [
      { name: 'Header', risk: 'low' },
      { name: 'UserProfile', risk: 'high' },
      { name: 'Dashboard', risk: 'medium' },
      { name: 'Sidebar', risk: 'low' },
    ]
  }

  wrapInBoundary(component) {
    const boundary = {
      hasError: false,
      fallback: `${component.name} temporarily unavailable`,
      catch: (error) => {
        console.log(`Boundary caught error in ${component.name}`)
        console.log('Showing fallback UI')
        boundary.hasError = true
        return boundary.fallback
      },
    }
    this.boundaries.set(component.name, boundary)
    return boundary
  }

  loadComponents() {
    console.log('App with error boundaries starting...')
    const results = []

    for (const component of this.components) {
      const boundary = this.wrapInBoundary(component)
      console.log(`Loading ${component.name}...`)

      if (component.risk === 'high') {
        const error = new Error(`${component.name} failed`)
        results.push(boundary.catch(error))
        console.log('Other components continue working')
      } else {
        results.push(`${component.name} rendered successfully`)
      }
    }

    return results
  }
}

const app = new AppWithBoundaries()
const results = app.loadComponents()
console.log('Final state:', results)
console.log('App remains functional despite errors')
console.log('Users can continue using working features')
// Output shows isolated failures

Technical Trivia

The Facebook News Feed Crisis of 2016: Facebook's web app experienced widespread crashes when individual news feed components failed, taking down the entire user interface. A single malformed post or failed image load would crash the entire feed, making the platform unusable during viral content spikes and high-traffic events.

Why unhandled errors devastated user experience: Any component error in the news feed would crash the entire React application, showing users blank white screens. Critical features like messaging, notifications, and navigation became inaccessible even when the underlying data was perfectly fine, causing massive user frustration.

Error boundaries revolutionized Facebook's reliability: Implementing comprehensive error boundaries around each news feed section meant individual post failures no longer crashed the entire interface. Users now see error messages for broken posts while continuing to use all other features, resulting in 95% fewer user-reported crashes and significantly improved platform stability.

Master React Error Boundaries: Implementation Strategy

Wrap independent UI sections in error boundaries to prevent cascading failures, especially around Suspense boundaries for lazy loading. Design meaningful error fallback UI that matches your app's style and provides recovery options. Implement error logging to track production failures and use error boundaries as monitoring tools for component reliability in real-world usage.