Error boundaries concept in React - Mini Project: Build & Apply

Error Boundaries Concept in React

📖 Scenario: You are building a React app that shows user profiles. Sometimes, a profile component might crash due to unexpected data. To keep the app running smoothly, you want to catch these errors and show a friendly message instead of a broken screen.

🎯 Goal: Create a React app with an error boundary component that catches errors from a child component and displays a fallback UI.

📋 What You'll Learn

Create a functional component called UserProfile that throws an error when the user prop is null.

Create an error boundary component called ErrorBoundary using a class component with componentDidCatch and getDerivedStateFromError.

Use the ErrorBoundary component to wrap UserProfile in the main App component.

Display a fallback UI message inside ErrorBoundary when an error occurs.

💡 Why This Matters

🌍 Real World

Error boundaries help keep React apps running smoothly by catching unexpected errors in parts of the UI and showing friendly messages instead of broken screens.

💼 Career

Understanding error boundaries is important for React developers to build resilient user interfaces and improve user experience by handling errors gracefully.

1

Create the UserProfile component

Create a functional React component called UserProfile that accepts a user prop. If user is null, throw a new Error with the message 'User data is missing'. Otherwise, return a div that displays User: {user.name}.

React

// Create UserProfile component that throws error if user is null
// Your code here

Hint

Use a simple if check inside the function to throw an error when user is null.

2

Create the ErrorBoundary class component

Create a class component called ErrorBoundary that extends React.Component. Add a state with hasError set to false. Implement the static method getDerivedStateFromError(error) to set hasError to true. Also implement componentDidCatch(error, info) to log the error to the console. In the render method, if hasError is true, return a div with the text 'Something went wrong.'. Otherwise, return this.props.children.

React

import React from 'react';

function UserProfile({ user }) {
  if (user === null) {
    throw new Error('User data is missing');
  }
  return User: {user.name};
}

// Create ErrorBoundary class component here
// Your code here

Hint

Remember to set initial state in the constructor and update state in getDerivedStateFromError. Use componentDidCatch to log errors.

3

Use ErrorBoundary to wrap UserProfile in App

Create a functional component called App. Inside it, create a constant user set to null. Return JSX where ErrorBoundary wraps UserProfile with the user prop passed in.

React

import React from 'react';

function UserProfile({ user }) {
  if (user === null) {
    throw new Error('User data is missing');
  }
  return User: {user.name};
}

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

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

  componentDidCatch(error, info) {
    console.error('ErrorBoundary caught an error:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return Something went wrong.;
    }
    return this.props.children;
  }
}

// Create App component that uses ErrorBoundary to wrap UserProfile
// Your code here

Hint

Wrap UserProfile inside ErrorBoundary in the returned JSX of App.

4

Export the App component as default

Add a line to export the App component as the default export of the module.

React

import React from 'react';

function UserProfile({ user }) {
  if (user === null) {
    throw new Error('User data is missing');
  }
  return User: {user.name};
}

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

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

  componentDidCatch(error, info) {
    console.error('ErrorBoundary caught an error:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return Something went wrong.;
    }
    return this.props.children;
  }
}

function App() {
  const user = null;
  return (
    
      
    
  );
}

// Export App as default
// Your code here

Hint

Use export default App; at the end of the file.

Practice

1. What is the main purpose of an Error Boundary in React?

easy

A. To catch JavaScript errors in child components and display a fallback UI

B. To manage state across multiple components

C. To optimize rendering performance

D. To handle user input validation

Solution

1. Step 1: Understand Error Boundary role

   Error boundaries catch errors in the components below them in the tree to prevent the whole app from crashing.

2. Step 2: Identify the correct purpose

   They show a fallback UI when an error happens, improving user experience.

3. Final Answer:

   To catch JavaScript errors in child components and display a fallback UI -> Option A

4. Quick Check:

   Error boundaries catch errors = C [OK]

Hint: Error boundaries catch errors and show fallback UI [OK]

Common Mistakes:

• Confusing error boundaries with state management
• Thinking error boundaries optimize rendering
• Assuming error boundaries handle input validation

2. Which of the following is the correct way to define an Error Boundary component in React?

easy

A. A class component implementing componentDidCatch and getDerivedStateFromError

B. A functional component using useErrorBoundary hook

C. A class component implementing componentDidMount and shouldComponentUpdate

D. A functional component with useEffect to catch errors

Solution

1. Step 1: Recall Error Boundary requirements

   Error boundaries must be class components that implement componentDidCatch and getDerivedStateFromError lifecycle methods.

2. Step 2: Identify correct lifecycle methods

   Only A class component implementing componentDidCatch and getDerivedStateFromError lists these two required methods correctly.

3. Final Answer:

   A class component implementing componentDidCatch and getDerivedStateFromError -> Option A

4. Quick Check:

   Class + componentDidCatch + getDerivedStateFromError = A [OK]

Hint: Error boundaries are class components with special lifecycle methods [OK]

Common Mistakes:

• Thinking functional components can be error boundaries
• Confusing lifecycle methods needed for error boundaries
• Using hooks that don't exist for error boundaries

3. Given this Error Boundary class component, what will be rendered if ChildComponent throws an error?

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    console.log('Error logged:', error);
  }
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

// Usage:
// <ErrorBoundary><ChildComponent /></ErrorBoundary>

medium

A. The original ChildComponent UI is shown

B. The app crashes with an uncaught error

C. Nothing is rendered (blank screen)

D. An error message Something went wrong. is shown

Solution

1. Step 1: Understand error handling in ErrorBoundary

   If ChildComponent throws an error, getDerivedStateFromError sets hasError to true.

2. Step 2: Check render output when error occurs

   When hasError is true, the component renders the fallback UI: <h1>Something went wrong.</h1>.

3. Final Answer:

   An error message Something went wrong. is shown -> Option D

4. Quick Check:

   Error caught shows fallback UI = D [OK]

Hint: Error sets state to show fallback UI, not original child [OK]

Common Mistakes:

• Expecting child UI to show despite error
• Thinking error causes app crash
• Assuming blank screen on error

4. What is wrong with this Error Boundary component code?

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }
  componentDidCatch(error, info) {
    this.setState({ error });
  }
  render() {
    if (this.state.error) {
      return <h2>Error occurred</h2>;
    }
    return this.props.children;
  }
}

medium

A. componentDidCatch should not call setState

B. It lacks the static method getDerivedStateFromError to update state on error

C. The constructor should not initialize state

D. render method must not return children

Solution

1. Step 1: Check error state update method

   Error boundaries must implement getDerivedStateFromError to update state when an error happens.

2. Step 2: Identify missing static method

   This code only uses componentDidCatch to set state, which is incorrect because componentDidCatch is for side effects, not state updates.

3. Final Answer:

   It lacks the static method getDerivedStateFromError to update state on error -> Option B

4. Quick Check:

   Missing getDerivedStateFromError static method = A [OK]

Hint: State update on error must be in getDerivedStateFromError [OK]

Common Mistakes:

• Updating state inside componentDidCatch
• Forgetting static getDerivedStateFromError
• Misusing lifecycle methods for error handling

5. You want to create an Error Boundary that logs errors to an external service and shows a fallback UI. Which of the following is the best approach?

class LoggingErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    // ???
  }
  render() {
    if (this.state.hasError) {
      return <div><h1>Oops!</h1><p>Try refreshing.</p></div>;
    }
    return this.props.children;
  }
}

What should replace // ??? to correctly log errors without causing issues?

hard

A. Call an async logging function directly without try/catch

B. Update state again inside componentDidCatch to trigger re-render

C. Use a try/catch inside componentDidCatch to call the logging service safely

D. Ignore logging and only show fallback UI

Solution

1. Step 1: Understand componentDidCatch role

   componentDidCatch is for side effects like logging errors but should handle errors safely to avoid crashing.

2. Step 2: Choose safe logging approach

   Using try/catch inside componentDidCatch when calling async logging prevents unhandled errors from breaking the app.

3. Final Answer:

   Use a try/catch inside componentDidCatch to call the logging service safely -> Option C

4. Quick Check:

   Safe error logging with try/catch in componentDidCatch = B [OK]

Hint: Wrap logging calls in try/catch inside componentDidCatch [OK]

Common Mistakes:

• Calling async logging without error handling
• Updating state inside componentDidCatch causing loops
• Skipping logging and losing error info