ErrorBoundary component in Remix - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when an error occurs inside a child component wrapped by an ErrorBoundary in Remix?

Consider a Remix app where a child component throws an error during rendering. The child is wrapped by an ErrorBoundary component. What will the user see?

A The ErrorBoundary catches the error and renders its fallback UI instead of the broken child component.

B The app crashes completely and shows a blank page with no error message.

C The error is ignored and the child component renders partially with missing content.

D The error is logged but the child component continues rendering normally.

💡 Hint

Think about how ErrorBoundary components are designed to handle errors gracefully.

ErrorBoundary components in Remix catch errors thrown in their child components during rendering, lifecycle methods, and constructors. When an error occurs, they render a fallback UI instead of crashing the whole app.

📝 Syntax

intermediate

Which ErrorBoundary component syntax is correct in Remix?

Choose the correct way to define an ErrorBoundary component in Remix that displays a simple error message.

A export function ErrorBoundary({ error }) { return <div>Error: {error.message}</div>; }

B export function ErrorBoundary({ error }) { return <div>Error: error.message</div>; }

C export function ErrorBoundary(error) { return <div>Error: {error.message}</div>; }

D export function ErrorBoundary() { return <div>Error: {error.message}</div>; }

💡 Hint

Remember how props are passed as an object and how JSX expressions are written.

The ErrorBoundary component receives an object with an error property as props. To display the error message, you must use curly braces inside JSX to evaluate error.message.

🔧 Debug

advanced

Why does this Remix ErrorBoundary not catch errors from a child component?

Given this ErrorBoundary component, errors thrown in the child component are not caught. What is the likely cause? ```jsx export function ErrorBoundary() { return

Oops! Something went wrong.

; } ``` Child component throws an error during rendering.

A The ErrorBoundary does not use the error prop to trigger re-render; it must throw the error again.

B The ErrorBoundary component is missing the required error prop parameter to receive the error.

C The ErrorBoundary must be exported as default to catch errors.

D The ErrorBoundary component must be named with a lowercase first letter to work.

💡 Hint

Check the function parameters and how errors are passed to ErrorBoundary.

Remix passes the error as a prop to the ErrorBoundary component. If the component does not accept the error prop, it cannot display or handle the error properly.

❓ state_output

advanced

What is the output when an ErrorBoundary fallback UI uses useState to reset error state in Remix?

An ErrorBoundary fallback UI includes a button that resets the error state using useState. What happens when the button is clicked?

Remix

import { useState } from 'react';

export function ErrorBoundary({ error }) {
  const [hasError, setHasError] = useState(true);
  if (!hasError) {
    return <div>Try rendering child again.</div>;
  }
  return (
    <div>
      <p>Error occurred: {error.message}</p>
      <button onClick={() => setHasError(false)}>Reset</button>
    </div>
  );
}

A Clicking the button reloads the entire app automatically.

B Clicking the button causes a runtime error because ErrorBoundary cannot use hooks.

C Clicking the button hides the error message and shows 'Try rendering child again.'

D Clicking the button has no effect because error state is managed by Remix, not useState.

💡 Hint

Think about how useState controls what the component renders.

The useState hook manages local state inside the ErrorBoundary fallback UI. Clicking the button updates state to hide the error message and show alternative content.

🧠 Conceptual

expert

Why should you use an ErrorBoundary component in a Remix app?

Select the best reason to use an ErrorBoundary component in Remix applications.

A To prevent any errors from being logged to the console or error tracking services.

B To automatically fix bugs in child components without developer intervention.

C To improve app performance by skipping error checks during rendering.

D To catch runtime errors in child components and show a user-friendly fallback UI instead of crashing the whole app.

💡 Hint

Think about user experience when something goes wrong in the app.

ErrorBoundary components catch errors in their children and display fallback UI, improving user experience by preventing full app crashes.

Practice

1. What is the main purpose of an ErrorBoundary component in Remix?

easy

A. To fetch data from APIs before rendering components

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

C. To style components with CSS-in-JS

D. To manage user authentication state

Solution

1. Step 1: Understand ErrorBoundary role

   ErrorBoundary components catch errors thrown in their child components during rendering or lifecycle.

2. Step 2: Identify main purpose

   They prevent the entire app from crashing by showing a fallback UI instead of the broken component.

3. Final Answer:

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

4. Quick Check:

   ErrorBoundary catches errors = A [OK]

Hint: ErrorBoundary handles errors, not data or styles [OK]

Common Mistakes:

• Confusing ErrorBoundary with data fetching
• Thinking it manages styles or authentication
• Assuming it fixes errors automatically

2. Which of the following is the correct way to define an ErrorBoundary component in Remix?

easy

A. export function ErrorBoundary({ error }) { return {error.message}; }

B. export function ErrorBoundary() { return No error; }

C. export function ErrorBoundary({ data }) { return {data}; }

D. export function ErrorBoundary({ props }) { return {props.error}; }

Solution

1. Step 1: Check parameter usage

   ErrorBoundary receives an error prop with error details, so the parameter must be { error }.

2. Step 2: Verify returned JSX

   The component should display error.message to show the error text.

3. Final Answer:

   export function ErrorBoundary({ error }) { return <div>{error.message}</div>; } -> Option A

4. Quick Check:

   Use { error } prop and show error.message [OK]

Hint: ErrorBoundary gets error prop, not data or props object [OK]

Common Mistakes:

• Using wrong parameter name like data or props
• Not accessing error.message correctly
• Returning static text instead of error info

3. Given this ErrorBoundary component, what will be rendered if an error with message "Failed to load" occurs?

export function ErrorBoundary({ error }) {
  return (
    <div role="alert">
      <h2>Oops!</h2>
      <p>{error.message}</p>
    </div>
  );
}

medium

A. Oops!No error

B. ErrorUnknown error

C. Oops!Failed to load

D. Nothing renders because error is not handled

Solution

1. Step 1: Identify error message usage

   The component renders {error.message} inside a paragraph, so the actual error message will appear.

2. Step 2: Check rendered structure

   The output includes a div with role alert, an h2 with "Oops!", and a paragraph with the error message.

3. Final Answer:

   <div role="alert"><h2>Oops!</h2><p>Failed to load</p></div> -> Option C

4. Quick Check:

   Error message shown inside alert div = A [OK]

Hint: ErrorBoundary shows error.message inside fallback UI [OK]

Common Mistakes:

• Ignoring error.message and showing static text
• Missing role="alert" for accessibility
• Assuming no output if error occurs

4. What is wrong with this ErrorBoundary component code?

export function ErrorBoundary(error) {
  return <div>Error: {error.message}</div>;
}

medium

A. The error parameter should be destructured as { error }, but here it is a plain parameter

B. The error parameter should be destructured as { error }

C. The error parameter should be destructured as { error } but it is not

D. The component must return null on error

Solution

1. Step 1: Check parameter syntax

   ErrorBoundary receives props as an object, so the parameter should be destructured like { error }, not a plain variable.

2. Step 2: Identify correct destructuring

   Using error directly means it is the whole props object, so error.message will be undefined or cause error.

3. Final Answer:

   The error parameter should be destructured as { error }, but here it is a plain parameter -> Option A

4. Quick Check:

   Destructure props as { error } in ErrorBoundary [OK]

Hint: Destructure error prop: use ({ error }) not (error) [OK]

Common Mistakes:

• Using plain parameter instead of destructuring
• Returning null instead of fallback UI
• Confusing error prop with other props

5. You want to create an ErrorBoundary that shows a custom message for network errors and a generic message for others. Which code correctly implements this behavior?

export function ErrorBoundary({ error }) {
  if (error.message.includes('Network')) {
    return <div>Network error occurred. Please try again.</div>;
  }
  return <div>Something went wrong.</div>;
}

hard

A. The error prop should be named props, not error

B. This code will crash if error.message is undefined

C. The if condition should check error.type, not error.message

D. This code correctly shows a custom message for network errors and generic for others

Solution

1. Step 1: Analyze error message check

   The code checks if error.message contains 'Network' to show a specific message.

2. Step 2: Verify fallback message

   If the error is not a network error, it shows a generic fallback message, which is correct behavior.

3. Final Answer:

   This code correctly shows a custom message for network errors and generic for others -> Option D

4. Quick Check:

   Conditional error messages based on error.message = C [OK]

Hint: Check error.message content to customize fallback UI [OK]

Common Mistakes:

• Assuming error.message can be undefined without check
• Using wrong prop name instead of error
• Checking wrong error property like error.type