ErrorBoundary component in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an ErrorBoundary component that catches errors.

Remix

export function ErrorBoundary() {
  return <div>[1]</div>;
}

Drag options to blanks, or click blank then click option'

Aconsole.log('Error')

BAn error occurred.

Cthrow new Error()

DuseState()

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to throw an error inside the render.

Using console.log instead of rendering UI.

The ErrorBoundary component should render a fallback UI like a message when an error occurs.

2fill in blank

medium

Complete the code to receive the error object as a prop in ErrorBoundary.

Remix

export function ErrorBoundary({ error }) {
  return <div>Error: [1]</div>;
}

Drag options to blanks, or click blank then click option'

Aerror.toString()

Berror.stack

Cerror.name

Derror.message

Attempts:

3 left

💡 Hint

Common Mistakes

Using error.stack which is too technical for users.

Using error.name which is just the error type.

Displaying error.message shows a clear error description to the user.

3fill in blank

hard

Fix the error in the ErrorBoundary component to correctly catch errors in Remix.

Remix

export function ErrorBoundary({ error }) {
  return (
    <main>
      <h1>[1]</h1>
      <p>{error.message}</p>
    </main>
  );
}

Drag options to blanks, or click blank then click option'

Aconsole.error(error)

Berror.message

C"Oops! Something went wrong."

Dthrow error

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to throw or log inside JSX.

Using error.message directly as a heading.

The ErrorBoundary should render a user-friendly message inside an element like h1.

4fill in blank

hard

Fill both blanks to create a functional ErrorBoundary component that logs the error and shows a message.

Remix

export function ErrorBoundary({ error }) {
  console.[1](error);
  return <div role="alert">[2]</div>;
}

Drag options to blanks, or click blank then click option'

Aerror

Blog

C"An unexpected error occurred."

Dwarn

Attempts:

3 left

💡 Hint

Common Mistakes

Using console.error or console.warn instead of log.

Not providing a user-friendly message.

Use console.log to log the error and show a clear alert message to users.

5fill in blank

hard

Fill all three blanks to create an accessible and responsive ErrorBoundary component.

Remix

export function ErrorBoundary({ error }) {
  console.[1](error);
  return (
    <section aria-live="assertive" className="[2]">
      <h2>[3]</h2>
      <p>{error.message}</p>
    </section>
  );
}

Drag options to blanks, or click blank then click option'

Awarn

Bp-4 max-w-md mx-auto bg-red-100 text-red-800 rounded

C"Error Occurred"

Dlog

Attempts:

3 left

💡 Hint

Common Mistakes

Using console.warn instead of log.

Not adding aria-live for accessibility.

Missing styling classes for responsiveness.

Use console.log to log errors, apply Tailwind CSS classes for styling, and provide a clear heading.

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