ErrorBoundary Setup Guide

🎯 Purpose

Prevent React crash screens by wrapping components with error boundaries that show custom fallback UI instead of the “Application error: a client-side exception has occurred” screen.

📦 Component Setup

Create Error Boundary Component

Create components/Error.jsx:

components/Error.jsx

import React from "react";
 
class ErrorBoundary extends React.Component {
   constructor(props) {
      super(props);
      this.state = { hasError: false };
   }
 
   static getDerivedStateFromError(error) {
      return { hasError: true };
   }
 
   render() {
      if (this.state.hasError) {
         // Use custom fallback if provided
         if (this.props.fallback) {
            return this.props.fallback();
         }
 
         // Default fallback UI
         return (
            <div style={{ padding: "16px", border: "1px solid #ff4d4f", backgroundColor: "#fff2f0" }}>
               <h3>🚨 Something went wrong</h3>
            </div>
         );
      }
 
      return this.props.children;
   }
}
 
export default ErrorBoundary;
 
// HOC with optional fallback support
export const withErrorBoundary = (Component, fallback = null) => {
   return (props) => (
      <ErrorBoundary fallback={fallback}>
         <Component {...props} />
      </ErrorBoundary>
   );
};

🚀 Simple Example: UserAvatar Component

Let’s say you have a UserAvatar component that sometimes fails when loading user images.

Step 1: Make UserAvatar Safe

components/UserAvatar.jsx

// Your component that might fail
function UserAvatar({ user }) {
   return <img src={user.avatar} alt={user.name} />;
}
 
// Create error-safe version (keeps IntelliSense working!)
import { withErrorBoundary } from "@/components/Error";
const SafeUserAvatar = withErrorBoundary(UserAvatar);
export default SafeUserAvatar;

Step 2: Use in Header (Default Fallback)

components/Header.jsx

import SafeUserAvatar from "@/components/UserAvatar";
 
function Header() {
   return (
      <header>
         <SafeUserAvatar user={currentUser} />
      </header>
   );
}
// ✅ IntelliSense works! IDE knows this takes { user } prop
// ✅ If UserAvatar fails → Shows default error message

Step 3: Use in Profile with Custom Fallback

components/Profile.jsx

import UserAvatar from "@/components/UserAvatar";
 
// Custom fallback for profile page
const avatarFallback = () => (
   <div className="avatar-error">
      <div className="avatar-placeholder">👤</div>
      <p>Avatar temporarily unavailable</p>
   </div>
);
 
// Create second safe version with custom fallback
const ProfileAvatar = withErrorBoundary(UserAvatar, avatarFallback);
 
function Profile() {
   return (
      <div>
         <ProfileAvatar user={user} />
      </div>
   );
}
// ✅ IntelliSense works here too! IDE knows ProfileAvatar takes { user }
// ✅ If UserAvatar fails → Shows nice placeholder

📋 Summary

Same Component, Different Error Handling:

Header: withErrorBoundary(UserAvatar) → Default error UI
Profile: withErrorBoundary(UserAvatar, customFallback) → Custom error UI

That’s it! One component, multiple ways to handle errors.

💡 Why Use Error Boundaries

✅ No crash screens - Shows “Something went wrong” instead of React errors
✅ Easy to use - Just wrap your component once
✅ Custom errors - Show different messages in different parts of your app
✅ Simple failure handling - Components fail gracefully

📝 Quick Setup

Copy the components/Error.jsx code above
Create safe component: const SafeComp = withErrorBoundary(Component)
Export safe version: export default SafeComp (keeps IntelliSense!)
Optionally add custom fallback: const CustomComp = withErrorBoundary(Component, fallback)
Done! Your component is now error-safe with full IDE support

📊 Visual Flow

This simple flow shows how ErrorBoundary protects your app from crashes and provides graceful failure handling.

Database Structure Mongodb Connection