Introduction

As React applications grow in complexity, handling errors and asynchronous operations becomes crucial for maintaining a smooth user experience. Error boundaries and Suspense are two powerful React features that help build resilient applications by gracefully managing failures and loading states. In this post, we'll explore how to implement both features to create robust React applications.

Understanding Error Boundaries

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. They act like a JavaScript try...catch block for React components.

Creating a Basic Error Boundary

Error boundaries must be class components that implement either componentDidCatch() or static getDerivedStateFromError():

import React from 'react';

class ErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 this.state = { hasError: false, error: null, errorInfo: null };
 }

 static getDerivedStateFromError(error) {
 // Update state so the next render will show the fallback UI
 return { hasError: true };
 }

 componentDidCatch(error, errorInfo) {
 // Log error details for debugging
 console.error('Error caught by boundary:', error, errorInfo);
 
 this.setState({
 error: error,
 errorInfo: errorInfo
 });
 
 // Send error to logging service
 this.logErrorToService(error, errorInfo);
 }

 logErrorToService(error, errorInfo) {
 // Implementation for error logging service
 // e.g., Sentry, LogRocket, or custom analytics
 }

 render() {
 if (this.state.hasError) {
 return (
 

 
Something went wrong
 
We apologize for the inconvenience. Please try refreshing the page.
  window.location.reload()}>
 Refresh Page
 
 
 );
 }

 return this.props.children;
 }
}

Enhanced Error Boundary with Recovery

A more sophisticated error boundary can provide recovery mechanisms:

class EnhancedErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 this.state = { 
 hasError: false, 
 error: null,
 retryCount: 0
 };
 }

 static getDerivedStateFromError(error) {
 return { hasError: true, error };
 }

 componentDidCatch(error, errorInfo) {
 console.error('Error boundary caught an error:', error, errorInfo);
 }

 handleRetry = () => {
 this.setState(prevState => ({
 hasError: false,
 error: null,
 retryCount: prevState.retryCount + 1
 }));
 }

 render() {
 if (this.state.hasError) {
 return (
 

 
Oops! Something went wrong
 

 
Error Details
 {this.state.error && this.state.error.toString()}
 
 

 
 Try Again ({this.state.retryCount})
 
  window.history.back()}>
 Go Back
 
 
 
 );
 }

 return this.props.children;
 }
}

Implementing React Suspense

Suspense lets your components "wait" for something before rendering, showing a loading state while asynchronous operations complete. It's particularly useful for code splitting and data fetching.

Basic Suspense Usage

import React, { Suspense, lazy } from 'react';

// Lazy load components
const LazyComponent = lazy(() => import('./LazyComponent'));
const Dashboard = lazy(() => import('./Dashboard'));

function App() {
 return (
 

 Loading...
}>
 
 
 
 }>